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

1.      背景

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

2.      ajaxsubmit()方法简介

（1）ajaxsubmit()依赖

ajaxsubmit()方法是jquery 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提交表单后回调功能，希望对大家有所帮助