【js】Ajax提交form表单（ajaxSubmit使用讲解 ）

1 、引入依赖脚本

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script>   //ajaxForm 依赖脚本

脚本下载地址  http://download.csdn.net/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来提交表单。你可以在任何情况下进行该项提交。