JQuery_jqueryのAjax()のデータパラメータ型の解析例

この記事では、例を通じて JQuery の Ajax() のデータ パラメーターの型を分析します。参考のために皆さんと共有してください。詳細は次のとおりです:

前の分析では、「ajax でデータ パラメーターを渡す 2 つの方法」を簡単に紹介しました。ajax でデータ パラメーターを渡す方法を予備的に理解したので、データ パラメーターの種類をさらに分析してみましょう。アヤックスで。

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

<form id='addForm' action='UserAdd.action' type='post'>
  <label for='uname'>用户名</label>：<input type='text' name='uname' id='uname'><br>
  <label for='mobileIpt'>手机号：</label><input type='text' name='mobileIpt' id='mobileIpt'><br>
  <label for='birthday'>生日：</label><input type='text' name='birthday'><br>
  <input type='button' value='提交' onclick='addUser()'>
</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('添加失败')
    }
   }
  })
}

これで問題ないのですが、フォーム要素の値を取得するのが面倒です…ここには項目が3つしかありません、項目がたくさんあると意味がありません....

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

シリアル化されたテーブル要素 (「.serialize()」メソッドと同様) は、JSON データ構造データを返します。

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

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

試してみましょう

$('#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])

フォーム要素の配列またはオブジェクトをシリアル化します。

パラメータ:

オブジェクト、[伝統的]

配列または jQuery オブジェクトは名前と値のペアに従ってシリアル化され、通常のオブジェクトはキーと値のペアに従ってシリアル化されます。

traditional: 従来の浅いシリアル化を使用するかどうか。

デモ:

$.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関数では、
で3種類のデータを渡すことができるということです。 1. テキスト: 「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"}
]

つまり、ワンクリックでフォームを取得して送信できるので、とても便利です。

補足:

実際、フォーム データを抽出するには、serialize() メソッドを使用して「uname=alice&mobileIpt=110&birthday=1983-05-12」を直接取得するだけです。

この記事が jQuery プログラミングのすべての人に役立つことを願っています。