广告
返回顶部
首页 > 资讯 > 精选 >使用AjaxSubmit()方法怎么实现Form提交表单后回调功能
  • 898
分享到

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

2023-06-08 07:06:18 898人浏览 薄情痞子
摘要

今天就跟大家聊聊有关使用ajaxSubmit()方法怎么实现FORM提交表单后回调功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。2.    

今天就跟大家聊聊有关使用ajaxSubmit()方法怎么实现FORM提交表单后回调功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

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) {          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(); }  function showResponse(responseText, statusText, xhr, $form){     if(responseText.status == "0"){          alert(responseText.msg);   } else {     alert(responseText.msg);   }   }

看完上述内容,你们对使用AjaxSubmit()方法怎么实现Form提交表单后回调功能有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网精选频道,感谢大家的支持。

--结束END--

本文标题: 使用AjaxSubmit()方法怎么实现Form提交表单后回调功能

本文链接: https://www.lsjlt.com/news/252380.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 使用AjaxSubmit()方法怎么实现Form提交表单后回调功能
    今天就跟大家聊聊有关使用AjaxSubmit()方法怎么实现Form提交表单后回调功能,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。2.    ...
    99+
    2023-06-08
  • 如何使用Ajax方法实现Form表单的提交
    这篇文章主要介绍了如何使用Ajax方法实现Form表单的提交,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。常见的form表单提交方式<...
    99+
    2022-10-19
  • 使用Servlet怎么实现一个表单提交功能
    使用Servlet怎么实现一个表单提交功能?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。用servlet实现一个注册的小功能 ,后台获取数据。注册页面:  注册页面代码 :&l...
    99+
    2023-05-31
    servlet 一个表
  • JavaScript在form表单中如何使用button按钮实现submit提交方法
    这篇文章将为大家详细讲解有关JavaScript在form表单中如何使用button按钮实现submit提交方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。submit...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作