Jquery插件之ajaxForm简介

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

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