Jquery插件之ajaxForm简介

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