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

2024-10-22 10:22:30

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

ajaxForm和ajaxSubmit 粘贴就可用示例代码

复制代码代码如下:  <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/ht
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象

Form Plugin API 里提供了很多有用的方法可以让你轻松的处理表单里的数据和表单的提交过程. 测试环境:部署到Tomcat中的web项目. 本文演示的是:jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm()和ajaxSubmit()的可选参数项对象 ajaxForm 和 ajaxSubmit 都支持大量的可选参数,它们通过可选参数项对象传入.可选参数项对象只是一个简单的 JavaScript对象,里边包含了一些属性和一些值:
jQuery ajaxSubmit 实现ajax提交表单局部刷新

AJAX简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下. 需要引入 : jquery-form.js 使用说明: Java代码 $(document).ready(function() { var options = { target: '#mydiv', // 需要刷新的区域
jQuery使用ajaxSubmit()提交表单示例

ajaxSubmit(obj)方法是jQuery的一个插件jquery.form.js里面的方法,所以使用此方法需要先引入这个插件.如下所示: 复制代码代码如下: <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script><script src="http://malsup.github.io/jquery.form.js"></script>
浅谈jquery.form.js的ajaxSubmit和ajaxForm的使用

• 依赖的脚本文件 <script src="../Javascript/jquery-1.11.1.min.js" type="text/javascript"></script> <script src="../Javascript/jquery.form.js" type="text/javascript"></script> • ajaxSubmit 和ajaxForm区
利用AjaxSubmit()方法实现Form提交表单后回调功能

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

问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中. 解决办法有四个: 1. 修改php.ini,查找 register_globals,将其值修改为 On.这样就可以像原来一样,例如,提交的表单中包括一个名为"username"的变量,那么在php中就可以直接使用$username来访问该变量.但是,除非你要使用一段旧的代码而考虑到兼容性问题,否则
IE浏览器下JS脚本提交表单后，不能自动提示问题解决方法

本文实例讲述了IE浏览器下JS脚本提交表单后,不能自动提示问题解决方法.分享给大家供大家参考,具体如下: 经常我们用表单提交东西,在提交后,浏览器会自动记录你输入的东西,下次你再输入的时候,可以重新选择,但是如果你是用IE的话,这里有一个BUG, 其他浏览器没有这个问题.当然首先你得设置IE 浏览器选项是可以记录表单数据的,然后写一段代码来测试. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> &
ThinkPHP防止重复提交表单的方法实例分析

本文实例总结分析了ThinkPHP防止重复提交表单的方法.分享给大家供大家参考,具体如下: 为什么会有表单重复的坑在开发中,如果一个新增或修改的表单,在后台完成数据库操作后我们设定的不是跳转到其他页面,还是返回本页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交,即这条记录会被增加或修改两次. 导致表单重复提交的原因是:第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其他页面时才消失.在自调用返回时,内存中的数据依然在,这时页面中的判断提交的代码依然可以检
Jquery提交表单 Form.js官方插件介绍

先说说常用的Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.最新JQuery框架软件包下载 jquery.js压缩包 jquery.js非压缩包 2.Form插件下载 form.js 3.Form插件的简单入门第一步:先增加一个表单代码: 复制代码代码如下: <form id="myForm" action="comment.php" method="post"> Name: <inpu
jquery.form.js异步提交表单详解

本文实例为大家分享了jquery.form.js异步提交表单的具体代码,供大家参考,具体内容如下引入脚本: <script type="text/javascript" src="/js/jquery.form.min.js"></script> <script src="/js/json2.js"></script> //前端代码: <form id="f1">
IDEA中HTML通过servlet3.0注解名提交表单到servlet类找不到页面的问题

这个问题困扰我整整一天一夜,先是代码检查路径设置找不出问题,后面换tomcat版不行,抱着侥幸心理换IDEA版本意料之中还是没解决问题. 都快想秃了最后终于完美解决了. 场景描述: IDEA中新建web项目 tomcat正常 HTML通过XML配置文件提交表单正常当HTML通过Servlet注解名提交表单时404 问题分析: 通常404是路径出现问题,此时第一反应是form中action值和servlet注解值出错,检查后属性值匹配.检查游览器访问路径最终找到问题出在启动虚拟路径上. 如图访
php 提交表单关闭layer弹窗iframe的实例讲解

介绍一款非常好用的前端弹窗插件: layer 官网地址:http://layer.layui.com/ 根据官方的API:layer的iframe弹窗 //iframe层-父子操作 layer.open({ type: 2, area: ['700px', '530px'], fix: false, //不固定 maxmin: true, content: 'test/iframe.html' }); 这里以php开发为例演示如何提交表单后自动关闭layer弹窗 (1)弹出layer编辑框
Jquery基于Ajax方法自定义无刷新提交表单Form实例

本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法.分享给大家供大家参考.具体实现方法如下: Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等. 如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢. 以前的处理方法: 如Form代码如下: 复制代码代码如下: <form id="Form1" action="action.aspx" method="pos

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

相关推荐

随机推荐