ホームページ  >  記事  >  ウェブフロントエンド  >  jQuery.Ajax()のデータパラメータ型例の詳細説明

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

小云云
小云云オリジナル
2017-12-31 16:17:231718ブラウズ

この記事では主に 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:&#39;UserAdd.action&#39;,
      data:user,
      type:&#39;post&#39;,
      dataType:&#39;text&#39;,
      success:function(msg){
        if(msg==&#39;1&#39;){
          console.log(&#39;添加成功&#39;);
        }else{
          console.log(&#39;添加失败&#39;)
        }
      }
       
    })
  }

これで何も問題はありませんが、form 要素の値を取得するのが面倒です。ここには項目が 3 つしかなく、項目が多いと役に立たない....

ある日まで、私はjqueryのserializeArrayメソッドを発見しました

テーブル要素をシリアル化し(「.serialize()」メソッドに似ています)、JSONデータ構造データを返します。

このメソッドは JSON 文字列ではなく JSON オブジェクトを返すことに注意してください。文字列化操作にはプラグインまたはサードパーティのライブラリを使用する必要があります。

返された JSON オブジェクトはオブジェクト配列で構成されており、各オブジェクトには 1 つまたは 2 つの名前と値のペア (name パラメーターと value パラメーター (値が空でない場合)) が含まれています。

試してみましょう


$(&#39;#addForm&#39;).serializeArray();
//返回数据结构,是json数组,每个对像分别name和value为key,代表这个表单元素的name和value
[
  {"name":"uname","value":""},
  {"name":"mobileIpt","value":""},  
  {"name":"birthday","value":""}
]

これは役に立たないようです

これに対処するために JQuery.param() メソッドを使用しましょう:


var arr = $(&#39;#addForm&#39;).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:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"

説明を見ると、私たちには関係ないようですが、json配列に変更しましょう


$.param([{uanme:&#39;vic&#39;},{mobileIpt:&#39;110&#39;},{birthday:&#39;2013-11-11&#39;}]);
"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:&#39;vic&#39;,mobileIpt:&#39;110&#39;,birthday:&#39;2013-11-11&#39;}

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。