Jquery插件之ajaxForm简介

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

$(document).ready(function(){
    $('#myForm').submit(function(){
      $.ajax({
            url:'www.xxx.com',
            data:$('#myForm').serialize(),
            dataType:'json',
            error:function(data){
                 alert(data);
            }
            success:function(data){
               alert(data);
            }

      });
    });
})

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

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

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

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

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

//1、回调函数使用方法
$('#form1').ajaxForm(function() {
   $('#output1').html("提交成功！").show();
});
$('#form1').ajaxSubmit(function() {
   $('#output2').html("提交成功！").show();
});

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