がどのようにjQueryを使用してJSONやAJAXポストメソッドを使って配列に類似したデータを送信するために

Question

は、HTMLのCODE

<form id="details"> 
    <div> 
    <input type="text" placeholder="Email ID" id="email"></input> 
    <input type="text" placeholder="Mobile Number" id="mobile"></input> 
</div> 
<h5>Data</h5> 
<div> 
    <div> 
     <input type="text" placeholder="Name" id="name1"></input> 
     <input type="text" placeholder="Age" id="age1"></input> 
    </div> 
    <div> 
     <input type="text" placeholder="Name" id="name2"></input> 
     <input type="text" placeholder="Age" id="age2"></input> 
    </div> 
</div> 
</form> 

JSコード

$(document).ready(function() { 
    $("form").on('submit', function(e) { 
     // Prepare data 
     var form = $("form"); 
     var formData = new FormData(document.getElementById("details")); 
     e.preventDefault(); 
     $.ajax(form.attr('action'), { 
      type: 'POST', 
      data: formData, 
      contentType: false, 
      cache: false, 
      processData:false, 
      dataType: "json", 
      success: function(result) { 
       // Success Code 
      }, 
      error: function(result) { 
       // Failure Code 
      }, 
      timeout: 5000, 
     }); 
    }); 
}); 

私のコードのためのcodepenリンクはhttp://codepen.io/anon/pen/VKzGRG

です

のようなデータを送信したい

{ 
    "email" : "xyz@gmail.com", 
    "mobile" : "9898989898", 
    "data" : [ 
     { 
      "name":"xyz", 
      "age":45 
     }, 
     { 
      "name":"xyz", 
      "age":45 
     } 
    ] 
} 

jQueryを使用してデータを送信しようとしました。

問題は、名前と年齢が1つだけ送信されることです。

また、私のプロジェクトでは、jQueryとボタンを使って名前と年齢のボックスを動的に追加しています。

jQueryを使用してAJAXのポストメソッドを使用してデータを送信するにはどうすればよいですか？

Answer 1

あなたはデータが投稿されない理由の入力の名前を逃しました 以下の作業コードを参照してください。

// HTMLコード

<form name="details" action="t.php" id="details"> 
    <div> 
    <input type="text" name="email" placeholder="Email ID" id="email"></input> 
    <input type="text" name="mobile" placeholder="Mobile Number" id="mobile"></input> 
</div> 
<h5>Data</h5> 
<div> 
    <div> 
     <input type="text" name="data1[]" placeholder="Name" id="name1"></input> 
     <input type="text" name="data1[]" placeholder="Age" id="age1"></input> 
    </div> 
    <div> 
     <input type="text" name="data2[]" placeholder="Name" id="name2"></input> 
     <input type="text" name="data2[]" placeholder="Age" id="age2"></input> 
    </div> 
</div> 
<input type="submit" value="send"> 
</form> 

// AJAXコード

$(document).ready(function() { 
    $("form").on('submit', function(e) { 
     // Prepare data 
     var form = $("form"); 
     var formData = new FormData(document.getElementById("details")); 
     console.log(formData); 
     e.preventDefault(); 
     $.ajax(form.attr('action'), { 
      type: 'POST', 
      data: formData, 
      contentType: false, 
      cache: false, 
      processData:false, 
      dataType: "json", 
      success: function(result) { 
       // Success Code 
      }, 
      error: function(result) { 
       // Failure Code 
      }, 
      timeout: 5000, 
     }); 
    }); 
}); 

Answer 2

jQueryとAjaxを使ってデータをポストするには、掲載します。この

var myObj = { 
    "email" : "xyz@gmail.com", 
    "mobile" : "9898989898", 
    "data" : [ 
     { 
      "name":"xyz", 
      "age":45 
     }, 
     { 
      "name":"xyz", 
      "age":45 
     } 
    ] 
}; 

$.post("test.php", myObj) 
.done(function(data) { 
    alert("Data Loaded: " + data); 
    }); 

ような何かを行うことができますデータを収集し、要求の応答を警告する。