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, ????????????????//返回的数据类型 ?现阶段一般用json17 ???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=123426 ???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); ?