使用AjaxSubmit()方法怎么实现Form提交表单后回调功能
今天就跟大家聊聊有关使用AjaxSubmit()方法怎么实现Form提交表单后回调功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联主营金门网站建设的网络公司,主营网站建设方案,成都App定制开发,金门h5成都小程序开发搭建,金门网站营销推广欢迎金门等地区企业咨询
2. ajaxSubmit()方法简介
(1)ajaxSubmit()依赖
ajaxSubmit()方法是JQuery Form表单插件中的方法,要想使用该插件,可以直接去官网http://jquery.malsup.com/form/下载。使用时,需要在jsp或者html页面上,引入JQuery库和Form插件。
(2)ajaxSubmit()用法简介
ajaxSubmit()方法接受0个或者1个参数,当为单个参数时,该参数既可以是一个回调函数,也可以是一个options对象。回调函数比较简单,下面主要介绍一下options的用法。options对象可以设置的参数如下:
var options = { target: ‘#output1', //把服务器返回的内容放入id为output1的元素中 beforeSubmit: showRequest, //提交前的回调函数 success: showResponse, //提交后的回调函数 url: url, //默认是form的action,如果声明,则会覆盖 type: type, //默认是form的method,如果声明,则会覆盖 dataType: json , //接受服务端返回的类型 clearForm: true, //成功提交后,清除所有表单元素的值 resetForm: true, //成功提交后,重置所有表单元素的值 timeout: 3000 //限制请求的时间,当请求大于3秒后,跳出请求 };
这些参数里,比较常用的就是提交前的回调函数beforeSubmit和提交后的回调函数success。beforeSubmit主要是用来提交表单前,校验数据的。示例代码:
function validate(formData, jqForm, options) { /* 在这里需要对表单元素进行验证,如果不符合规则, 直接返回false来阻止表单提交。 */ var queryString = $.param(formData); //组装数据 return true; }
这个回调函数有三个参数,formData是数组对象,jqForm是一个JQuery对象,它封装了表单的元素,options参数就是options对象。在这个回调函数中,只要不返回false,表单都将被允许提交;如果返回false,则会阻止表单提交。
success是提交后的回调函数,有4个参数responseText,statusText,xhr,和$form。其中,比较常用的是前两个。statusText只是一个返回状态,例如success,error等。responseText携带着服务器返回的数据内容,它会根据设置的options对象中的dataType属性来返回相应格式的内容。
3. ajaxSubmit()方法代码示例
下面是ajaxSubmit()方法使用的一个模板。
$(function(){ var options = { type: 'POST', url: '提交路径', success:showResponse, dataType: 'json', error : function(xhr, status, err) { alert("操作失败"); } }; $("##Form名称").submit(function(){ $(this).ajaxSubmit(options); return false; //防止表单自动提交 }); }); /** * 保存操作 */ function toSave(){ $("#Form名称").submit(); } /** * 保存后,执行回调 * @param responseText * @param statusText * @param xhr * @param $form */ function showResponse(responseText, statusText, xhr, $form){ if(responseText.status == "0"){ /** * 请求成功后的操作 */ alert(responseText.msg); } else { alert(responseText.msg); } }
看完上述内容,你们对使用AjaxSubmit()方法怎么实现Form提交表单后回调功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
名称栏目:使用AjaxSubmit()方法怎么实现Form提交表单后回调功能
新闻来源:http://azwzsj.com/article/jcoged.html