jquery.form.js realizes the method of converting form submission to ajax submission_jquery

The example in this article describes the method of jquery.form.js to convert form submission into ajax submission. Share it with everyone for your reference. The specific analysis is as follows:

This framework integrates the functions of form submission, verification, and uploading.
This framework must be combined with the full version of jquery, otherwise using min will be invalid.
Principle: Use js to assemble the form into ajax url and data. The principle is still to use ajax to submit. In fact, you can write it yourself, but it may be simpler with this framework.

1. The simplest example:

Step one: quote 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>

Step 2: Write the form on the page

<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>

Step 3: Write js to call jquery.form.js and submit the form with 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. What are the values ​​in the options object?

There are several main commonly used attributes:

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. How to parse the json data passed by the server

We know that using the ajax method provided by jquery, if the server passes back json data, it can be converted into a json object of js, and then the corresponding value can be obtained through json.xxx. So what about this framework?
1) First specify dataType in the options parameter: 'json'
2) Submit through the framework
3) Server receives
4) The server returns json
5) Page js receives json
The key is the fifth step. How to receive json via js can be done by performing the following operations inside the method specified by success::

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

4. How to perform simple verification through this framework?

Speaking of verification, it must be verified inside the beforeSubmit method. How to verify, because this method has passed the jqform object and formData to you. You can use these two parameters to obtain the corresponding input, and then make its own judgment. If the judgment is successful, submit it.

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;
}

Click here for the jquery.form.js fileDownload from this site.

I hope this article will be helpful to everyone’s jQuery programming.