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

 更新时间:2018年05月16日 09:57:39   作者:Kevin_zhai  
ajaxSubmit()方法是JQuery Form表单插件中的方法,使用时,需要在jsp或者html页面上,引入JQuery库和Form插件。接下来通过本文给大家分享通过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对象可以设置的参数如下:

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

相关文章

  • Ajax异步请求JSon数据(图文详解)

    Ajax异步请求JSon数据(图文详解)

    在编程过程中使用ajax调用数据的时候,难免要进行逻辑的处理,接受的数据也变的复杂比如数组类型的数据,这时候就需要使用JSON数据类型进行处理,通过本篇文章给大家介绍Ajax异步请求json数据,需要的朋友可以参考下本文
    2015-09-09
  • 浅析AJAX乱码及错误解决方案

    浅析AJAX乱码及错误解决方案

    据不可靠消息JavaScript是用Unicode UTF-8作为内码的,但是在目前混乱的浏览器环境中各种错误都有,特别是加入了更加混乱的AJAX后
    2013-07-07
  • Ajax级联菜单实例代码

    Ajax级联菜单实例代码

    本篇文章主要是对Ajax级联菜单的实例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • 基于 Ajax 的无限级菜单

    基于 Ajax 的无限级菜单

    基于 Ajax 的无限级菜单...
    2006-08-08
  • Ajax 接收服务器返回的json响应方法

    Ajax 接收服务器返回的json响应方法

    今天小编就为大家分享一篇Ajax 接收服务器返回的json响应方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • Ajax返回数据之前的loading等待效果

    Ajax返回数据之前的loading等待效果

    我们通过ajax请求,向后台传递参数,然后后台经过一系列的运算之后向前台返还数据,我希望在等待数据成功返还之前可以展示一个loading.gif图。接下来通过本文给大家分享Ajax返回数据之前的loading等待效果,需要的朋友可以参考下
    2017-08-08
  • ajax readyState的五种状态详解

    ajax readyState的五种状态详解

    0 - (未初始化)还没有调用send()方法 1 - (载入)已调用send()方法,正在发送请求 2 - (载入完成)send()方法执行完成,已经接收到全部响应内容 3 - (交互)正在解析响应内容 4 - (完成)响应内容解析完成,可以在客户端调用了
    2008-12-12
  • 利用H5特性FormData实现不刷新文件上传

    利用H5特性FormData实现不刷新文件上传

    之前朋友说的不刷新上传文件。最暴力的解决方案就是上网上搜各种JS库,附带多图上传,预览,甚至是图片处理等特技。下面看小编给大家分享的利用H5特性FormData实现不刷新文件上传,非常实用,小伙伴一起来看看吧
    2015-09-09
  • 通过构造AJAX参数实现表单元素JSON相互转换

    通过构造AJAX参数实现表单元素JSON相互转换

    这篇文章主要介绍了通过构造AJAX参数实现表单元素JSON相互转换 的相关介绍,需要的朋友可以参考下
    2016-05-05
  • 使用ajax技术实现txt弹出在页面上的方法

    使用ajax技术实现txt弹出在页面上的方法

    下面小编就为大家带来一篇使用ajax技术实现txt弹出在页面上的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08

最新评论