jQuery.Ajax()のデータパラメータ型例の詳細説明

この記事では主に jQuery.Ajax() のデータパラメータ型の詳細な説明を紹介します。必要な方は参考にしていただければ幸いです。

要素を追加するために使用されるそのようなフォームがあるとします。

<form id=&#39;addForm&#39; action=&#39;UserAdd.action&#39; type=&#39;post&#39;>
   <label for=&#39;uname&#39;>用户名</label>：<input type=&#39;text&#39; name=&#39;uname&#39; id=&#39;uname&#39;><br>
   <label for=&#39;mobileIpt&#39;>手机号：</label><input type=&#39;text&#39; name=&#39;mobileIpt&#39; id=&#39;mobileIpt&#39;><br>
   <label for=&#39;birthday&#39;>生日：</label><input type=&#39;text&#39; name=&#39;birthday&#39;><br>
   <input type=&#39;button&#39; value=&#39;提交&#39; onclick=&#39;addUser()&#39;>
</form>

この要素を追加するためにフォーム送信を使用するのではなく、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"

のようにserialize()メソッドを直接取得するだけです。 Jqueryにおける

Ajaxメソッドの使い方まとめ データparameter_jquery

jQueryフォームプラグインformDdataパラメータ検証フォームと検証後の提出_jquery

以上がjQuery.Ajax()のデータパラメータ型例の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。