未加星标

利用AjaxSubmit()方法实现Form提交表单后回调功能

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

1.      背景

最近在工作中,需要实现网页端图片上传到FTP服务器的功能。上传文件是用Form表单提交数据的方法向后台传输文件流,在此遇到了一个问题:后台在处理完图片上传功能后,需要向前台回传是否上传成功的状态码、上传失败的错误信息和上传成功后的图片URL。但是,用普通Form表单提交的话,没有办法实现回调函数。后来在小伙伴的介绍下,发现可以用ajaxSubmit()方法来实现此功能。

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提交表单后回调功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!


您可能感兴趣的文章:浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象ajaxForm和ajaxSubmit 粘贴就可用示例代码jQuery ajaxSubmit 实现ajax提交表单局部刷新jQuery使用ajaxSubmit()提交表单示例

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: AjaxjQuery服务器数据谢大
tags: ajaxSubmit,表单,提交,options,form,responseText,回调,function,Form,函数,success,param,参数,statusText,false
分页:12
转载请注明
本文标题:利用AjaxSubmit()方法实现Form提交表单后回调功能
本站链接:https://www.codesec.net/view/576892.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(134)