htmlフォームの入力をハイジャックし、正確にajaxリクエストで使用するデータを変換するには？

Question

この例では、単純なフォームを使用しますが、実際にはフォームははるかに複雑です。私がしたいのは、フォームが送信されるのを防ぎ、あとでajaxリクエストで使用するために提出しようとしていたデータを収集することです。

<form action="#" method="post" id="myform"> 
<input name="string_input" value="default"/> 
<input type="submit" value="submit"/> 
</form> 

これまでのところ、私は簡単にリスナーを提出すると、フォームの送信を停止することができることを考え出した、そしてそれはまた、その中に大量のデータとイベント値を返します。

document.getElementById('myform').onsubmit = function(e) { 
    console.log(e); 
    return false; 
}; 

しかし、私はajaxリクエストでjson形式にそのイベントデータを変換する方法があまりよく分かりません。

これを行う簡単な方法はありますか？おそらく、これにはいくつかの機能がありますか？

Answer 1

var formData = new FormData(); 
formData.append("string_input", $("[name='string_input']").val()); 
$.ajax({ 
    url: "submit.php", 
    data: formData, 
    type: "POST", 
    error: function(e){ 
     console.log(e); 
    }, 
    success: function(e){ 
     console.log(e); 
    } 
}); 

あり、それを行うには短い方法がありますが、あなたは、このアプローチを使用してファイルを投稿することはできません。

$.ajax({ 
    url: "submit.php", 
    data: {string_input: $("[name='string_input']").val()}, 
    method: "POST" 
}); 

jQueryのは右、タグ付けされていますか？ EDIT

：フォームは予測不可能である

場合

...

var formData = new FormData(); 
$("#myform input, #myform textarea").each(function(){ 
    formData.append($(this).prop("name"), $(this).val()); 
}) 

フォーム＃のあるmyForm要素内のすべての要素を選択し、DOMにそれがクリックされるたびに横断します。