jquery.form.js menyedari kaedah menukar penyerahan borang kepada ajax submission_jquery

Contoh dalam artikel ini menerangkan kaedah jquery.form.js untuk menukar penyerahan borang kepada penyerahan ajax. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Rangka kerja ini menyepadukan fungsi penyerahan borang, pengesahan dan muat naik.
Rangka kerja ini mesti digabungkan dengan versi penuh jquery, jika tidak menggunakan min akan menjadi tidak sah.
Prinsip: Gunakan js untuk menghimpunkan borang ke dalam url dan data ajax Prinsipnya masih menggunakan ajax untuk menyerahkannya. Malah, anda boleh menulisnya sendiri, tetapi ia mungkin lebih mudah dengan rangka kerja ini.

1. Contoh paling mudah:

Langkah pertama: petikan js

<!--这里的min是自己用js压缩工具对完整版进行的压缩
并不是真正的min，所以好使-->
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>

Langkah 2: Tulis borang pada halaman

<form id="showDataForm" 
action="/024pm/f_shopUser.do&#63;method=login" method="post">
 <input type="text" value="" name="name" maxlength="2"/>
 <input type="password" value="" name="password" maxlength="2"/>
 <input type="submit" value="提交"/>
</form>
<div id="output1" 
style="width:1000px;height:200px;background-color:#eee;">
</div>

Langkah 3: Tulis js untuk memanggil jquery.form.js dan serahkan borang dengan ajax

$(document).ready(function() {
 var options = {
  target: '#output1',
  // 从服务传过来的数据显示在这个div内部
 也就是ajax局部刷新
  beforeSubmit: showRequest,
 // ajax提交之前的处理
  success:  showResponse
 // 处理之后的处理
 };
 $('#showDataForm').submit(function() {
  $(this).ajaxSubmit(options);
  return false; 
  //非常重要，如果是false，则表明是不跳转
  //在本页上处理，也就是ajax，如果是非false，则传统的form跳转。
 });
});
function showResponse(responseText, statusText, xhr, $form) {
 alert(xhr.responseText+"=="+$form.attr("method")+'status: ' + 
 statusText + '\n\nresponseText: \n' + responseText);
//xhr：说明你可以用ajax来自己再次发出请求
//$form：是那个form对象，是一个jquery对象
//statusText：状态，成功则为success
//responseText，服务器返回的是字符串（当然包括html，不包括json）
}
function showRequest(formData, jqForm, options) {
 //formData是数组，就是各个input的键值map数组
 //通过这个方法来进行处理出来拼凑出来字符串。
 //formData：拼凑出来的form字符串，比如name=hera&password，
 //其实就是各个表单中的input的键值对，
 //如果加上method=XXXX，那也就是相当于ajax内的data。
 var queryString = $.param(formData);
 alert(queryString+"======"+formData.length);
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"==============="+formData[i].name);
 }
 //jqForm，jquery form对象
 var formElement = jqForm[0];
 alert($(formElement).attr("method"));
 alert($(jqForm[0].name).attr("maxlength"));
 //非常重要，返回true则说明在提交ajax之前你验证
 //成功，则提交ajax form
 //如果验证不成功，则返回非true，不提交
 return true;
}

2. Apakah nilai dalam objek pilihan?

Terdapat beberapa atribut utama yang biasa digunakan:

var options = {
 target: '#output1', 
 data:{param1:"我自己的第一个额外的参数"},
//这个参数是指通过ajax来给服务器提交除了form内部input的参数
//在后台中使用String param1=req.getParameter("param1");获取。
 // dataType: null,
 dataType:'json',
//这个参数值的是服务器返回的数据类型，默认的是null
//也就是服务器可以默认返回字符串，然后将这些字符串放在target内部
//当然还有json、xml，其中最常用的便是null和json
//对于json的使用，我们会稍后讲解到
 beforeSubmit: showRequest,
 success:  successRes，
 type：'POST'
 //提交方式，默认是自己在form标签上指定的method
 //如果没有指定，则使用get。
 url：''
 //重新提交的url，即url可以在form中配置
 //也可以在这里配置。
};

3. Cara menghuraikan data json yang diluluskan oleh pelayan

Kami tahu bahawa menggunakan kaedah ajax yang disediakan oleh jquery, jika pelayan mengembalikan data json, ia boleh ditukar menjadi objek json bagi js, dan kemudian nilai yang sepadan boleh diperoleh melalui json.xxx. Jadi bagaimana dengan rangka kerja ini?
1) Mula-mula nyatakan dataType dalam parameter pilihan: 'json'
2) Hantar melalui rangka kerja
3) Pelayan menerima
4) Pelayan mengembalikan json
5) Halaman js menerima json
Kuncinya ialah langkah kelima Cara menerima json melalui js boleh dilakukan dengan melakukan operasi berikut di dalam kaedah yang ditentukan oleh kejayaan:

var options = {
 target: '#output1', 
 dataType:'json',
 beforeSubmit: showRequest,
 success:  successRes
//注意了，successRes方法看起来并没有有参数
//但是为何下面的方法就能有参数了呢，是可以这么传递的。
function successRes(jsonData){
 alert(jsonData.param1);
}

4. Bagaimana untuk melakukan pengesahan mudah melalui rangka kerja ini?

Bercakap tentang pengesahan, ia mesti disahkan dalam kaedah beforeSubmit, kerana kaedah ini telah menyerahkan objek jqform dan formData kepada anda Anda boleh menggunakan kedua-dua parameter ini untuk mendapatkan input yang sepadan, dan kemudian membuatnya sendiri penghakiman jika berjaya, kemukakan.

function showRequest(formData, jqForm, options) {
 for (var i=0; i < formData.length; i++) {
 alert(formData[i].value+"========"+formData[i].name);
 if (!formData[i].value) {
  //验证是否填写完整
  alert('input有没有填写的选项');
  //如果验证不通过，则返回false
  return false;
 }
 }
 var formElement = jqForm[0];
 alert($(jqForm[0].name).attr("maxlength"));
 return true;
}

Klik di sini untuk fail jquery.form.jsMuat turun dari tapak ini.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.