详解javascript表单的Ajax提交插件的使用

Ajax 提交插件

form.js 表单的下载地址：官方网站：http://malsup.com/jquery/form/

form.js 插件有两个核心方法：ajaxForm()和ajaxSubmit()，它们集合了从控制表单元素到决定如何管理提交进行的功能。

//ajaxForm 提交方式
$('#reg').ajaxForm(function () {
　　alert('提交成功！');
});

使用ajaxForm()方法，会直接实现ajax 提交。自动阻止了默认行为，而它提交的

默认页面是form 控件的action 属性的值。提交的方式是method 属性的值。

//ajaxSubmit()提交方式
$('#reg').submit(function () {
　　　　$(this).ajaxSubmit(function () {
　　　　alert('提交成功！');
　　});
　　return false;
});

注意：ajaxForm()方法，是针对form 直接提交的，所以阻止了默认行为。而ajaxSubmit()方法，由于是针对submit()方法的，所以需要手动阻止默认行为。

option 参数

option 参数是一个以键值对传递的对象，可以通过这个对象，设置各种Ajax 提交的功能。

$('#reg').submit(function () {
　　$(this).ajaxSubmit({
　　　　url : 'test.php', //设置提交的url，可覆盖action 属性
　　　　target : '#box', //服务器返回的内容存放在#box 里
　　　　type : 'POST', //GET,POST
　　　　dataType : null, //xml,json,script，默认为null
　　　　clearForm : true, //成功提交后，清空表单
　　　　resetForm : true, //成功提交后，重置表单
　　　　data : { //增加额外的数据提交
　　　　aaa : 'bbb',
　　　　ccc : 'ddd'.
　　},
　　beforeSubmit : function (formData, jqForm, options) {
　　　　alert(formData[0].name); //得到传递表单元素的name
　　　　alert(formData[0].value); //得到传递表单元素的value
　　　　alert(jqForm); //得到form 的jquery 对象
　　　　alert(options); //得到目前options 设置的属性
　　　　alert('正在提交中！！！');
　　　　return true;
　　},
　　success : function (responseText, statusText) {
　　　　alert(responseText + statusText); //成功后回调
　　},
　　error : function (event, errorText, errorType) { //错误时调用
　　　　　alert(errorText + errorType);
　　　　},
　　});
　　return false;
});

工具方法

//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • 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 validate和jquery form 插件组合实现验证表单后AJAX提交

    要实现表单验证和无刷新提交表单我们可以使用jQuery的两个很好用的插件--jquery validate.js 和 jquery form.js.具体详细说明情况下文. 1.jQuery validate.js,它说白了就是一个很高尚的人为我们写好了各种表单的验证,不用我们这些童鞋去现写了,一天天的多累啊,呵呵. 2.jQuery form.js,"这个插件能够让你简洁的将以HTML形式提交的表单升级成采用AJAX技术提交的表单. 插件里面主要的方法, ajaxForm 和 ajaxSubmi

  • Jquery插件easyUi表单验证提交(示例代码)

    复制代码 代码如下: <form id="myForm" method="post">  <table align="center" style="width:400px;height:auto;margin-top: 20px">           <tr>                                           <td align="righ

  • 修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交

    但唯一遗憾的是,在对中文输入法打开时,firefox3.0中是对中文拼音的自动匹配,而对输入后的中文无法及时触发匹配:而在我的IE6.0下,则无此问题. 原因分析: Autocomplete插件对用户输入字符的触发自动匹配是通过"keydown"事件进行的(可分析jquery.autocomplete.js第 92行),在IE6中,当输入法打开时,输入的字符是不会触发"keydown"的,只有中文输入完毕才触发之,所以中文输入和latin文没有区别的:但在firef

  • jquery form表单提交插件asp.net后台中文解码

    在asp.net 后台页面提取时需要解码.解码的方式为:HttpUtility.UrlDecode(context.Request["infostr"].ToString());

  • jquery插件EasyUI中form表单提交实例分享

    jquery插件EasyUI中form表单提交实例分享

    之前用AJax给Controller传递参数,然后再调用服务端的方法对数据库进行更改,今天碰到一个新的方法,就是表单的提交,这样可以省去AJax传参. 当表单提交后,我们可以获取表单上控件中的值,然后再调用服务端的方法对数据库进行更改.下面的一张截图是具体的业务需求. 一.要实现的功能:从上面这个表单中,获取控件中的值,然后传递给后台.下面是表单代码. 二.表单代码 <div id="Editwin" class="easyui-window" title=&

  • Jquery Validation插件防止重复提交表单的解决方法

    由于在项目中应用了Jquery Validation表单验证插件,所以要实现在Validation验证完毕后,提交form,然后禁止按钮.CodeProject上有一个DisableBtnPostBack项目,但不无法和Jquery Validation结合,代码先贴出来,给大家提示下,碰到这种情况不要使用该代码.代码如下: js: 代码 复制代码 代码如下: function disableBtn(btnID, newText) { Page_IsValid = null; if (typeo

  • 基于jQuery通过jQuery.form.js插件使用ajax提交form表单

    我们在提交表单的时候,如果没有使用ajax提交,页面都会自己刷新一下,显得非常的不友好,所以我们需要把我们的表单提交修改为ajax的模式,可以让用户清楚地知道他们在提交表单的时候处在哪一个阶段:正在提交?提交成功? 我简单使用了一下,jQuery Form插件有一下优点: 1.支持提交前验证. 2.支持提交后回调. 3.采用AJAX方式,有很好的用户体验 4.提交方式是灵活.只要指定要提交的form ID即可.想提交那个form.就可提交那个.同时提交参数可配置. 5.支持提交多种类型数据.如:

  • jquery中validate与form插件提交的方式小结

    jquery中validate与form插件提交的方式小结

    概述:本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案. 方式一:是通过jquery.validate的submitHandler选项,即当表单通过验证时执行回调函数.在这个回调函数中通过jquery.form来提交表单: 方式二:是通过jquery.form的beforeSubmit,即在提交表单前执行的回调函数,这个函数如果返回true,则提交表单,如果返回false,则终止提交表单.根据jquery.validate插件的valid()方法,就

  • 详解javascript表单的Ajax提交插件的使用

    Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. //ajaxForm 提交方式 $('#reg').ajaxForm(function () { alert('提交成功!'); }); 使用ajaxForm()方法,会直接实现ajax 提交.自动阻止了默认行为,而它提交的 默认页面是

  • 详解JavaScript表单验证（E-mail 验证）

    本文为大家分享了JavaScript表单验证,被 JavaScript 验证的这些典型的表单数据有: 用户是否已填写表单中的必填项目? 用户输入的邮件地址是否合法? 用户是否已输入合法的日期? 用户是否在数据域 (numeric field) 中输入了文本? 必填(或必选)项目 下面的函数用来检查用户是否已填写表单中的必填(或必选)项目.假如必填或必选项为空,那么警告框会弹出,并且函数的返回值为 false,否则函数的返回值则为 true(意味着数据没有问题): function validat

  • 详解vue表单——小白速看

    一.基本用法 你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定. 但 v-model 本质上不过是语法糖.它负责监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理. v-model 会忽略所有表单元素的 value.checked.selected 特性的初始值而总是将 Vue 实例的数据作为数据来源.你应该通过 JavaScript 在组件的 data 选项中声明初始值. 一组代码,看完text.textarea.

  • 详解vue 表单绑定与组件

    详解vue 表单绑定与组件

    一.什么是双向数据绑定 Vue.js是一个MV VM框架, 即数据双向绑定, 即当数据发生变化的时候, 视图也就发生变化, 当视图发生变化的时候,数据也会跟着同步变化.这也算是Vue.js的精髓之处了.   值得注意的是,我们所说的数据双向绑定,一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定.单向数据绑定是使用状态管理工具的前提.如果我们使用vue x那么数据流也是单项的,这时就会和双向数据绑定有冲突. 1.为什么要实现数据的双向绑定 在Vue.js中,如果使用vuex, 实际上数据还

  • bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能

    效果图: 如图,这是使用Validator插件,所完成的功能,效果很强大,也很方便,这边推荐使用这种方式,最后介绍一下原始js验证写法. 首先,导入插件: <link href="<%=basePath %>bootstrap/css/bootstrap-datetimepicker.min.css" rel="external nofollow" rel="stylesheet" media="screen"

  • 实例详解jQuery表单验证插件validate

    validate插件是一个基于jquery的表单验证插件了里面有许多的常用的一些验证方法我们可以直接调用,具体的我们一起来看看. 例子,html代码 <!DOCTYPE html> <html lang="en"> <head> <include file="Common/Header" /> <meta charset="utf-8"> <script src="/jq

  • 详解flask表单提交的两种方式

    一.通用方式 通用方式就是使用ajax或者$.post来提交. 前端html <form method="post" action="/mockservice" method = "post"> ... <div class="form-group"> <label>data <font style="color:#a94442" size="2"

  • 详解JavaScript中jQuery和Ajax以及JSONP的联合使用

    借助于 XMLHttpRequest,浏览器可以在整个页面不刷新的情况下与服务端进行交互,这就是所谓的 Ajax(Asynchronous JavaScript and XML).Ajax 可以为用户提供更为丰富的用户体验. Ajax 请求由 JavaScript 驱动,通过 JavaScript 代码向 URL 发送一个请求,待服务端有响应时会触发一个回调函数,可以在这里回调函数里面处理服务端返回的信息.由于整个发送请求和响应的过程是异步的,所以在此期间页面中其它 Javascript 代码仍

  • 详解正则表达式表单验证实例

    详解正则表达式表单验证实例

    先看看效果图: 首先给大家解释一些符号相关的意义 * 匹配前面的子表达式零次或多次: ^ 匹配输入字符串的开始位置:$匹配输入字符串的结束位置 1. /^$/ 这个是个通用的格式. 2. 里面输入需要实现的功能. \d 匹配一个数字字符,等价于[0-9] + 匹配前面的子表达式一次或多次: ?匹配前面的子表达式零次或一次: 下面通过一段代码给大家分析表单验证正则表达式,具体代码如下: <!DOCTYPE html> <html lang="en"> <he

随机推荐