Jquery插件之ajaxForm简介

Posted 2020-10-08 .class

我们平常在使用jQuery异步提交表单的时候，一般都是加载在submit事件中，如下所示:

 1 $(document).ready(function(){
 2     $(‘#myForm‘).submit(function(){
 3       $.ajax({
 4             url:‘www.xxx.com‘,
 5             data:$(‘#myForm‘).serialize(),
 6             dataType:‘json‘,
 7             error:function(data){
 8                  alert(data);
 9             }
10             success:function(data){
11                alert(data);
12             }
13 
14       });
15     });
16 })

但是这样的方式掩盖了form的功能 ，使他变相的成为了无刷新的ajax技术  下面来看看更符合form的ajaxForm 1 //1、回调函数使用方法  

 2 $(‘#form1‘).ajaxForm(function() {       //注意 ajaxForm是为表单提交做准备表单并不是真的提交 他需要用submit()方法来触发！ ajaxForm接收0到1个参数!
 3    $(‘#output1‘).html("提交成功！").show();// 这个参数可以是一个回调函数 也可以是一个options对象!    
 4 });             
 5 $(‘#form1‘).ajaxSubmit(function() {       //ajaxSubmit是表单立即提交 该函数也接收0到1个参数 这个函数可以是一个匿名的回调函数 也可以是一个options对象//用法和ajaxForm类似
 6    $(‘#output2‘).html("提交成功！").show();        
 7 });    
 8   
 9 //2、option对象使用方法  
10 var ajax_option={  
11    target: ‘#output‘,              //把服务器返回的内容放到id为output的元素中   
12    beforeSubmit: showRequest,      //提交前的回调函数 beforeSubmit 回调函数作为一个钩子函数 常被用来运行预提交逻辑或者是检验表单的数局 如果在该函数中 return false 那么
                                      //表单将不能提交 beforeSubmit带3个调用参数 这3个调用参数 你必须显示的调用 参数1. 数组对象 formData 参数2. jQuery表单对象 jqForm，
                                      //参数3.options！ 其中表单数组接受一下形式的数据:[{name:‘username‘,value:‘jianjie‘},{name:‘password‘,value:‘screat‘}]

13    success: showResponse,          //提交成功后的回调函数
14    url: url,                       //提交的url地址 如果没有 则默认使用表单的action 如果有则覆盖
15    type: type,                     //提交数据的方式 如果没有 则默认使用表单的method 如果有则覆盖
16    dataType: null,                 //返回的数据类型  现阶段一般用json
17    clearForm: true,                //提交成功后是否清空表单里面的数值 true为清空 false 为不清空
18    resetForm: true,                //提交成功后是否重置表单中的数据  true为清空 false  为不清空
19    timeout: 3000                  //设置请求的时间  超出时间则自动放弃连接
20 };  
21 //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]    
22 //jqForm:   jQuery对象，封装了表单的元素       
23 //options:  options对象    
24 function showRequest(formData, jqForm, options){    
25    var queryString = $.param(formData);   //序列化一个key/value对象 name=1&password=1234
26    var formElement = jqForm[0];              //jquery对象和js对象相互的转换
27    var address = formElement.address.value;  //获取表单元素的 name=address的输入框的value值 
28    return true;  //只要不反回false 表单都会提交 在这里就对表单进行验证
29 };    
30 function showResponse(responseText, statusText){    
31    //dataType=xml    
32    var name = $(‘name‘, responseXML).text();    
33    var address = $(‘address‘, responseXML).text();    
34    $("#xmlout").html(name + "  " + address);    
35    //dataType=json    
36    $("#jsonout").html(data.name + "  " + data.address);    
37 };    
38 $(‘#form1‘).ajaxSubmit(ajax_option);  

ajaxForm和ajaxSubmit的区别 : ajaxForm不主动提交数据 需要事件触发  而ajaxSubmit直接就是提交表单不需要事件的触发

ajaxForm实质上也是$.ajax()实现的一种！ 只不过ajaxForm更接近form的特性! 用法习惯依照个人习惯

1. //1、回调函数使用方法  
2. $(‘#form1‘).ajaxForm(function() {       
3.    $(‘#output1‘).html("提交成功！").show();        
4. });             
5. $(‘#form1‘).ajaxSubmit(function() {       
6.    $(‘#output2‘).html("提交成功！").show();        
7. });    
8.   
9. //2、option对象使用方法  
10. var ajax_option={  
11.    target: ‘#output‘,          //把服务器返回的内容放入id为output的元素中        
12.    beforeSubmit: showRequest,  //提交前的回调函数    
13.    success: showResponse,      //提交后的回调函数    
14.    url: url,                 //默认是form的action， 如果申明，则会覆盖    
15.    type: type,               //默认是form的method（get or post），如果申明，则会覆盖    
16.    dataType: null,           //html(默认), xml, script, json...接受服务端返回的类型    
17.    clearForm: true,          //成功提交后，清除所有表单元素的值    
18.    resetForm: true,          //成功提交后，重置所有表单元素的值    
19.    timeout: 3000               //限制请求的时间，当请求大于3秒后，跳出请求   
20. };  
21. //formData: 数组对象，提交表单时，Form插件会以Ajax方式自动提交这些数据，格式如：[{name:user,value:val },{name:pwd,value:pwd}]    
22. //jqForm:   jQuery对象，封装了表单的元素       
23. //options:  options对象    
24. function showRequest(formData, jqForm, options){    
25.    var queryString = $.param(formData);   //name=1&address=2    
26.    var formElement = jqForm[0];              //将jqForm转换为DOM对象    
27.    var address = formElement.address.value;  //访问jqForm的DOM元素    
28.    return true;  //只要不返回false，表单都会提交,在这里可以对表单元素进行验证    
29. };    
30. function showResponse(responseText, statusText){    
31.    //dataType=xml    
32.    var name = $(‘name‘, responseXML).text();    
33.    var address = $(‘address‘, responseXML).text();    
34.    $("#xmlout").html(name + "  " + address);    
35.    //dataType=json    
36.    $("#jsonout").html(data.name + "  " + data.address);    
37. };    
38. $(‘#form1‘).ajaxSubmit(ajax_option);