20151223jquery学习笔记--Ajax表单提交
传统的表单提交, 需要多次跳转页面, 极大的消耗资源也缺乏良好的用户体验。 而这款
form.js 表单的 Ajax 提交插件将解决这个问题。
一. 核心方法
官方网站: 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()方法的,所以需要手动阻止默认行为。而使用了 validate.js 验证
插件,那么 ajaxSubmit()比较适合我们。
二. 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;
});
三. 工具方法
form.js 除了提供两个核心方法之外,还提供了一些常用的工具方法。这些方法主要是
在提交前或后对数据或表单进行处理的。
//表单序列化
alert($('#reg').formSerialize());
//序列化某一个字段
alert($('#reg #user').fieldSerialize());
//得到某个字段的 value 值
alert($('#reg #user').fieldValue());
//重置表单
$('#reg').resetForm()
//清空某个字段
$('#reg #user').clearFields();
20151223jquery学习笔记--Ajax表单提交的更多相关文章
- [学习笔记]--Jfinal 表单提交附件
近期.项目里面用到了Jfinal 里面的上传附件. Jfinal 的Controller 里面提供了一个 getFile系列方法提供文件上传. 我这里呢,是文件上传和表单參数一起提交. 页面类似下图: ...
- SpringMVC学习笔记:表单提交 参数的接收
SpringMVC可以接收原生form表单和json格式数据 有一个名为Book的model,其中的属性如下: 字符串类型的name,数字类型的price,数组类型的cover,集合类型的author ...
- Ajax表单提交插件jquery form
jQuery Form插件是一个优秀的Ajax表单插件,我们可以非常容易的使用它处理表单控件的值,清空和复位表单控件,附件上传,以及完成Ajax表单提交. jQuery Form有两个核心方法ajax ...
- 使用Jquery.form.js ajax表单提交插件弹出下载提示框
现象: 使用jquery的from做ajax表单提交的时候,后台处理完毕返回json字符串,此时浏览器提示下载一个json文件而不是在success里面继续解析该json对象. 具体的原因: 浏览器兼 ...
- form表单提交和ajax表单提交,关于移动端如何通过软键盘上的【搜索】和【前进】进行提交操作
[文章来源]由于自己对于form研究甚少,所以一直用的都是AJAX进行提交,这次后台提出要用form提交,顺便深入研究一下:之前在做表单的时候,发现input可以通过设置不同的type属性,调用不同的 ...
- AngularJS 1.2.x 学习笔记(表单校验篇)
https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...
- Bootstrap学习笔记(二) 表单
在Bootstrap学习笔记(一) 排版的基础上继续学习Bootstrap的表单,编辑器及head内代码不变. 3-1 基础表单 单中常见的元素主要包括:文本输入框.下拉选择框.单选按钮.复选按钮.文 ...
- Symfony2学习笔记之表单
对于一个Web开发者来说,处理HTML表单是一个最为普通又具挑战的任务.Symfony2集成了一个Form组件,让处理表单变的容易起来.在这一节里,我们将从基础开始创建一个复杂的表单,学习表单类库中最 ...
- Ajax表单提交及后台处理简单应用
首先先说下表单提交吧,要提交表单那么就得先收集表单数据(至于验证这个我就不说了,要说留下下次吧),有了jquery取个html的值还是简单$("xxid").val()等就完了,但 ...
随机推荐
- WPF学习小记
WPF通用控制事件 Click:当控件被单击时发生.某些情况下,当用户按下Enter键时也会发生这样的事件. Drop:当拖曳操作完成时发生,也就是说,当用户将某个对象拖曳dao该控件上,然后松开鼠标 ...
- Warning: Function created with compilation errors!
解决方案: sqlplus / as sysdba grant execute on UTL_I18N to scott; grant execute on DBMS_CRYPTO to scott;
- 关于SQL\SQL Server的三值逻辑简析
在SQL刚入门的时候,我们筛选为某列值为NULL的行,一般会采用如下的方式: SELECT * FROM Table AS T WHERE T.Col=NULL www.2cto.com 而实际 ...
- [codevs2152]滑雪
题目来源 http://www.tyvj.cn/p/1004 http://www.luogu.org/problem/show?pid=1434# http://codevs.cn/problem/ ...
- 【HTML】Advanced3:Tables: Columns, Headers, and Footers
1. <table> <colgroup> <col> <col class="alternative"> <col> ...
- Esper系列(十一)NamedWindow语法Merge、Queries、Indexing、Dropping
On-Merge With Named Windows 功能:对window中的insert.update.delete操作进行组合运用. 格式: 1 "; 14 15 Sys ...
- hdoj 3861 The King’s Problem【强连通缩点建图&&最小路径覆盖】
The King’s Problem Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Other ...
- URAL 1992 CVS 链表
不更改链表结构,只是添加节点,没有删除节点.通过记录和更改标记来模拟题意的插入和删除,复制 指针模拟链表: 预开指针,存在M[]中,可以提高效率 #include<functional> ...
- GridControl 选择列、复选框全选(下)
功能: 删除选中行 前台调用: string str=""; GridDelete(gv, "chk", out str); MessageBox ...
- 使用freemarker生成html
http://herryhaixiao.iteye.com/blog/677524 由于freemarker这个技术很久很久就有了,注释我就没写得很详细了,相信大家都看得懂.下面就直接上代码以及一些代 ...