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

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对象可以设置的参数如下：

1. var options = {
2. target: ‘#output1’,         //把服务器返回的内容放入id为output1的元素中
3. beforeSubmit: showRequest,      //提交前的回调函数
4. success: showResponse,          //提交后的回调函数
5. url: url,           //默认是form的action，如果声明，则会覆盖
6. type: type,     //默认是form的method，如果声明，则会覆盖
7. dataType: json  ,   //接受服务端返回的类型
8. clearForm: true,    //成功提交后，清除所有表单元素的值
9. resetForm: true,    //成功提交后，重置所有表单元素的值
10. timeout: 3000       //限制请求的时间，当请求大于3秒后，跳出请求
11. }；

这些参数里，比较常用的就是提交前的回调函数beforeSubmit和提交后的回调函数success。beforeSubmit主要是用来提交表单前，校验数据的。示例代码：

1. function validate(formData, jqForm, options) {
2. /*
3. 在这里需要对表单元素进行验证，如果不符合规则，
4. 直接返回false来阻止表单提交。
5. */
6. var queryString = $.param(formData);        //组装数据
7. return true;
8. }

这个回调函数有三个参数，formData是数组对象，jqForm是一个JQuery对象，它封装了表单的元素，options参数就是options对象。在这个回调函数中，只要不返回false，表单都将被允许提交；如果返回false，则会阻止表单提交。

success是提交后的回调函数，有4个参数responseText，statusText，xhr，和$form。其中，比较常用的是前两个。statusText只是一个返回状态，例如success，error等。responseText携带着服务器返回的数据内容，它会根据设置的options对象中的dataType属性来返回相应格式的内容。

3.      ajaxSubmit()方法代码示例

下面是ajaxSubmit()方法使用的一个模板。

1. $(function(){
2. var options = {
3. type: 'POST',
4. url: '提交路径',
5. success:showResponse,
6. dataType: 'json',
7. error : function(xhr, status, err) {
8. alert("操作失败");
9. }
10. };
11. $("##Form名称").submit(function(){
12. $(this).ajaxSubmit(options);
13. return false;   //防止表单自动提交
14. });
15. });
16. /**
17. * 保存操作
18. */
19. function toSave(){
20. $("#Form名称").submit();
21. }
22. /**
23. * 保存后，执行回调
24. * @param responseText
25. * @param statusText
26. * @param xhr
27. * @param $form
28. */
29. function showResponse(responseText, statusText, xhr, $form){
30. if(responseText.status == "0"){
31. /**
32. * 请求成功后的操作
33. */
34. alert(responseText.msg);
35. } else {
36. alert(responseText.msg);
37. }
38. }