この記事では主に jQuery.Ajax() のデータパラメータ型の詳細な説明を紹介します。必要な方は参考にしていただければ幸いです。
要素を追加するために使用されるそのようなフォームがあるとします。
この要素を追加するためにフォーム送信を使用するのではなく、ajax を使用して送信したいと考えています。
以前は次のように実装していました:
function addUser(){ var user = { uname:$("#uname").val(), mobileIpt:$("#mobileIpt").val(), birthday:$("#birthday").val() }; $.ajax({ url:'UserAdd.action', data:user, type:'post', dataType:'text', success:function(msg){ if(msg=='1'){ console.log('添加成功'); }else{ console.log('添加失败') } } }) }
これで何も問題はありませんが、form 要素の値を取得するのが面倒です。ここには項目が 3 つしかなく、項目が多いと役に立たない....
ある日まで、私はjqueryのserializeArrayメソッドを発見しました
テーブル要素をシリアル化し(「.serialize()」メソッドに似ています)、JSONデータ構造データを返します。
このメソッドは JSON 文字列ではなく JSON オブジェクトを返すことに注意してください。文字列化操作にはプラグインまたはサードパーティのライブラリを使用する必要があります。
返された JSON オブジェクトはオブジェクト配列で構成されており、各オブジェクトには 1 つまたは 2 つの名前と値のペア (name パラメーターと value パラメーター (値が空でない場合)) が含まれています。
試してみましょう
$('#addForm').serializeArray(); //返回数据结构，是json数组，每个对像分别name和value为key，代表这个表单元素的name和value [ {"name":"uname","value":""}, {"name":"mobileIpt","value":""}, {"name":"birthday","value":""} ]
これは役に立たないようです
これに対処するために JQuery.param() メソッドを使用しましょう:
var arr = $('#addForm').serializeArray(); $.param(arr); "uname=alice&mobileIpt=110&birthday=1983-05-12"
これで私たちのニーズは満たされました。 json型ではありませんが、少なくともデータとしてアップロードすることは可能です。
ここでは、ajax データの json 配列を直接入力し、jquery 内で $.param() を呼び出して処理できます。
jquery.param() メソッドの説明を見てみましょう:
戻り値: StringjQuery.param(obj,[traditional])
フォーム要素の配列またはオブジェクトをシリアル化します。
Parameters
obj,[traditional]
配列または jQuery オブジェクトは名前と値のペアに従ってシリアル化され、通常のオブジェクトはキーと値のペアに従ってシリアル化されます。
traditional: 従来の浅いシリアル化を使用するかどうか。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}); "uanme=vic&mobileIpt=110&birthday=2013-11-11"
説明を見ると、私たちには関係ないようですが、json配列に変更しましょう
$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]); "undefined=&undefined=&undefined="
この変換はなぜ失敗しました。私たちのフォームは URL パラメーターに正常に変換できますか? jquery のソース コードを見てみましょう
//在ajax()方法中，对json类型的数据进行了$.param()处理 if ( s.data && s.processData && typeof s.data !== "string" ) { s.data = jQuery.param( s.data, s.traditional ); } //param方法中 if ( jQuery.isArray( a ) || ( a.jquery && !jQuery.isPlainObject( a ) ) ) { // Serialize the form elements jQuery.each( a, function() { add( this.name, this.value ); }); } else { // If traditional, encode the "old" way (the way 1.3.2 or older // did it), otherwise encode params recursively. for ( prefix in a ) { buildParams( prefix, a[ prefix ], traditional, add ); } }
これで、JSON データの場合は 1 つずつループし、その name 属性と value 属性のみを文字列に結合することがわかります。
通常のオブジェクトの場合は、オブジェクトのプロパティをループしてから文字列を連結します。
まとめ:
つまり、この記事が言いたいことは、jqueryのajax関数では
1に3種類のデータを渡すことができるということです。 テキスト:
"uname=alice&mobileIpt=110&birthday=1983-05-12"
2.jsonオブジェクト:
{uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'}
3.json 配列:
[ {"name":"uname","value":"alice"}, {"name":"mobileIpt","value":"110"}, {"name":"birthday","value":"2012-11-11"} ]
ということで、ワンクリックでフォームを取得して送信できるのでとても便利です。補足: 実際、フォームデータを抽出するには、uname=alice&mobileIpt=110&birthday=1983-05-12"
Ajaxメソッドの使い方まとめ データparameter_jquery
jQueryフォームプラグインformDdataパラメータ検証フォームと検証後の提出_jquery
以上がjQuery.Ajax()のデータパラメータ型例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
