1 、引入依赖脚本
<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> //ajaxForm 依赖脚本
脚本下载地址 /detail/yjqyyjw/9488464
2、使用方法
//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);
3、实战
html 部分
<!-- 表单中若无文件上传，可不写enctype="multipart/form-data" --><form id="from1" name="from1" action="#" method="post" class="form-horizontal" enctype="multipart/form-data"><button type="button" id="save" class="btn blue">保存</button><button type="button" id="cancel" class="btn">取消</button></form>
js 部分
var ajax_option={url:"gfan_yyq!images_edit_save.action",success:function(data){var result = $.parseJSON(data);if (result.success) {var index = parent.layer.getFrameIndex();var parentWin = parent;parent.layer.msg(result.message, 1, 1, function(){parentWin.layer.close(index);parentWin.window.location.href=parentWin.window.location.href;});} else {parent.layer.msg(result.message, 1, 3);}}};$('#save').click(function(){alert(123);$('#from1').ajaxSubmit(ajax_option);});$('#cancel').click(function(){var index = parent.layer.getFrameIndex();parent.layer.close(index);});
4、总结ajaxSubmit 和ajaxForm区别
ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit马上由AJAX来提交表单。你可以在任何情况下进行该项提交。
