jQueryを使用したフォームデータの投稿

Question

私はPostmanで作成した作業要求を持っています。このリクエストでは、エンドポイントにデータを投稿するのはhttp://localhost:21124/submissions/[someId]です。郵便配達では、の値を持つContent-Typeというヘッダーキーがあります。

郵便番号の[本文]タブには、x-www-form-urlencodedラジオボタンが選択されています。次に、いくつかのキーと値のペアを入力します。このリクエストをPOSTすると、正常に動作します。私は今このリクエストをHTMLフォームとして再構築しようとしています。

は、HTMLフォームとして要求を再構築しようとする試みで、私が持っている：私は「送信」ボタンをクリックすると

 function submitClick() { 
 
     var form = $('#myForm'); 
 
     $.ajax({ 
 
      url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a', 
 
      data: form.serialize(), 
 
      type: 'POST' 
 
     }); 
 
    
 
     return false; 
 
     } 
 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form id="myForm" method="post"> 
 
     <label for="emailAddress">Email address</label> 
 
     <input type="email" id="emailAddress"> 
 
     
 
     <label for="name">Name</label> 
 
     <input type="text" id="name"> 
 
    
 
     <button onclick="return submitClick();">Submit</button> 
 
    </form>

、私は私の中で私の値を見ていませんよコントローラ。私は郵便配達員を介して投稿すると、それらを正常に見ることができます。これは、値が2つの異なる方法でPOSTされていることを意味します。しかし、私はなぜそうは分かりません。誰かが私との違いを説明してくれますか？

ありがとうございました

Answer 1

フォーム要素には「名前」属性はありません。これは、要素がjQueryによってシリアライズされ、要求データで送信されるために必要です。

また、あなたは直接フォームのsubmitイベントを処理するためにjQueryの構文を使用して、ビットすっきりスクリプトを作ることができる：

スクリプト

$('#myForm').submit(function(event) { 
    event.preventDefault(); //prevent a (default) full postback 

    $.ajax({ 
    url: '/submissions/2e5f7619-23a5-425c-a39c-97928e3c2f9a', 
    data: $(this).serialize(), 
    type: 'POST' 
    }); 
}); 

HTML

あなたの避難所」コントローラのコードが表示されているので、例として、サーバーが受け取ろうとしているフィールドの名前を仮定しますフォーム要素のID属性と一致します。しかし、コントローラーがそれらを認識するためにコントローラーが期待するものと一致するようにする必要があります。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form id="myForm" method="post"> 
    <label for="emailAddress">Email address</label> 
    <input type="email" id="emailAddress" name="emailAddress"> 
    <label for="name">Name</label> 
    <input type="text" id="name" name="name"> 
    <button type="submit" id="submitMyForm" name="submitMyForm" >Submit</button> 
</form>