私たちはAjaxを使用してバックエンドにデータを送信する場合、よくフォームデータを取得する必要があります。
フォームのデータが多くない場合は問題ありませんが、フォームフィールドが非常に多い場合、非常に面倒なことになります。大量のフォームデータをどのように取得するかは非常に重要なことです。
今回は3つの方法を紹介します。
- 普通のやり方
- serialize
- serializeArray
順番に説明します。
フォームページ
<form action="">
<input type="text" name="username1">
<input type="text" name="address1">
<input type="text" name="age1">
<input type="text" name="username2">
<input type="text" name="address2">
<input type="text" name="age2">
</form>
<button class="btn1">普通のやり方</button>
<button class="btn2">serialize</button>
<button class="btn3">serializeArray</button>
ここではフォームデータのみを取得し、送信は行いません。
1. 普通のやり方
シリアライズの方法を理解する前に、まず、一つのJavaScript関数を書いて、すべてのinputを1回反復処理して、オブジェクトを作成し、Ajaxでバックエンドに渡す。
$(".btn1").click(function(){
var inputs = $("input");
var data={};
for(var i=0;i<inputs.length;i++){
var name =inputs.eq(i).attr("name");
var value=inputs.eq(i).val();
data[name]=value;
}
console.log(data);
})
結果確認
{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
この方法でも目的を達成できるようですが、フォームにselect、checkboxなどのタイプのフィールドがある場合、取得するためにさらにコードを書く必要があるようです。
2. serialize()
serializeメソッドは、フォームを連結された文字列形式にシリアル化できます。
$(".btn2").click(function(){
var data = $("form").serialize();
console.log(data);
})
結果確認
username1=a&address1=b&age1=c&username2=d&address2=e&age2=fこの方法は、単純なフォームの処理には十分でしょう。
3. serializeArray()
serializeArray()メソッドは、フォームを特別なJSON配列にシリアル化することができます。このJSON配列には、nameとvalueが含まれます。
$(".btn3").click(function(){
var data = $("form").serializeArray()
console.log(data);
})
結果確認
Array(6)
0: {name: "username1", value: "a"}
1: {name: "address1", value: "b"}
2: {name: "age1", value: "c"}
3: {name: "username2", value: "d"}
4: {name: "address2", value: "e"}
5: {name: "age2", value: "f"}明らかに、この配列を処理する必要があります。そうすることで、より望ましいデータを得ることができます。
配列の処理
$(".btn3").click(function(){
var data = $("form").serializeArray()
var newdata ={}
data.map(function(val,key){
newdata[val.name]=val.value;
})
console.log(newdata);
})
結果確認
{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}今、必要なデータを取得できましたので、安心してデータを渡すことができます。ただし、これで終わりではありません。 このコードは機能を実現していますが、簡潔でないようです。さらに最適化が必要です。
コードの最適化
$(".btn3").click(function(){
var data ={}
$("form").serializeArray().map(function(val,key){
data[val.name]=val.value;
})
console.log(data);
})
結果確認
{username1: "a", address1: "b", age1: "c", username2: "d", address2: "e", …}
データの取得は完璧に成功し、コードも最適化されました。
コメント