Rumah > hujung hadapan web > tutorial js > Penjelasan terperinci tentang contoh jenis parameter data JQuery.Ajax()_jquery

Penjelasan terperinci tentang contoh jenis parameter data JQuery.Ajax()_jquery

WBOY
Lepaskan: 2016-05-16 15:30:56
asal
1189 orang telah melayarinya

Andaikan terdapat borang sedemikian sekarang, yang digunakan untuk menambah elemen.

<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>
Salin selepas log masuk

Kami tidak mahu menggunakan serah borang untuk menambah elemen ini, kami mahu menggunakan ajax untuk menyerahkan.

Beginilah kami melaksanakannya sebelum ini:

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('添加失败')
        }
      }
    })
  }
Salin selepas log masuk

Tidak ada yang salah dengan ini, tetapi terlalu menyusahkan untuk mendapatkan nilai elemen bentuk.... Terdapat hanya tiga item di sini, dan ia akan menjadi sia-sia jika terdapat banyak item....

Sehingga satu hari, saya menemui kaedah serializeArray jquery

Elemen jadual bersiri (serupa dengan kaedah '.serialize()') mengembalikan data struktur data JSON.
Ambil perhatian bahawa kaedah ini mengembalikan objek JSON dan bukannya rentetan JSON. Anda perlu menggunakan pemalam atau pustaka pihak ketiga untuk operasi stringifikasi.
Objek JSON yang dikembalikan terdiri daripada tatasusunan objek, setiap satunya mengandungi satu atau dua pasangan nilai nama - parameter nama dan parameter nilai (jika nilai tidak kosong).

Jom cuba

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

Ini nampaknya tidak berguna

Mari gunakan kaedah JQuery.param() untuk mengendalikannya:

var arr = $('#addForm').serializeArray();
$.param(arr);
"uname=alice&mobileIpt=110&birthday=1983-05-12"
Salin selepas log masuk

Hei, kini ia memenuhi keperluan kami Walaupun ia bukan jenis json, ia sekurang-kurangnya boleh dimuat naik sebagai data.

Di sini kita boleh terus mengisi tatasusunan json dalam data ajax, dan memanggil $.param() di dalam jquery untuk memprosesnya.

Mari kita lihat huraian kaedah jquery.param():

返回值:StringjQuery.param(obj,[traditional])
将表单元素数组或者对象序列化。
参数
obj,[traditional]
数组或jQuery对象会按照name/value对进行序列化,普通对象按照key/value对进行序列化。
traditional:是否使用传统的方式浅层序列化。
demo:
$.param({uanme:'vic',mobileIpt:'110',birthday:'2013-11-11'});
"uanme=vic&mobileIpt=110&birthday=2013-11-11"
Salin selepas log masuk

Melihat pada huraian, nampaknya ia tiada kaitan dengan kami. Mari kita tukarkannya kepada tatasusunan json

$.param([{uanme:'vic'},{mobileIpt:'110'},{birthday:'2013-11-11'}]);
"undefined=&undefined=&undefined="
Salin selepas log masuk

Adakah penukaran ini tidak berjaya Mengapakah data dalam borang kami berjaya ditukar kepada parameter url? Mari lihat kod sumber 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 );
    }
  }
Salin selepas log masuk

Sekarang anda faham, jika ia adalah data json, kemudian gelung satu demi satu dan hanya ambil atribut nama dan atribut nilai untuk menyambung rentetan.

Jika ia adalah objek biasa, gelung sifat objek dan kemudian gabungkan rentetan.

Ringkasan:

Jadi, apa yang artikel ini akan katakan ialah dalam fungsi ajax jquery, 3 jenis data boleh dihantar dalam

1 Teks: "uname=alice&mobileIpt=110&birthday=1983-05-12"

objek 2.json: {uanme:'vic',mobileIpt:'110',hari lahir:'2013-11-11'}

tatasusunan 3.json:

[
  {"name":"uname","value":"alice"},
  {"name":"mobileIpt","value":"110"},  
  {"name":"birthday","value":"2012-11-11"}
]
Salin selepas log masuk

Jadi, kita boleh mendapatkan borang dan menghantarnya dengan satu klik, yang sangat mudah.

Tambahan:

Malah, untuk mengekstrak data borang, anda hanya perlu menggunakan kaedah serialize() untuk terus mendapatkan "uname=alice&mobileIpt=110&birthday=1983-05-12".

ps: Ringkasan penggunaan parameter data kaedah ajax dalam jquery

$.ajax({
  type: post,
  url: some.php,
  data: name=john&location=boston, //第一种方式传参
 // data: {name:john,location:boston} //第二种方式传参
 // data: {foo:[bar1, bar2]} 转换为 '&foo=bar1&foo=bar2'
 /*
 第一种我们用url传参,参数里面如果加带&这个符号地话,可能参数接收不到或不完整,
 如“ data: name=john&location=boston,” 如果name地值是john&smith这样写可能就会有问题,
 我们可以用js里面地encodeuricomponent()方法进行转义,
 但如果用data: {name:john,location:boston}这种方式写地话就不需要进行转义,
 如果转义地话,接收地将是转义后地字符串
 */
  success: function(msg){
   alert( data saved: + msg );
  }
});
Salin selepas log masuk
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan