jQuery.form开发手记
一般情况下其实提交表单我们将数据$("form").serialize()序列化之后用$.ajax,$.post就可以实现,但是jQuery自带的方法仅支持异步提交数据,但不支持文件上传,除非我们自己用XMLHttpRequest写一个方法。
好在jquery.form.js自己实现了一套ajax的方法,支持异步文件上传并获取响应结果,这才是我使用jQuery.form的主要原因。
当然,小文件你也可以将其base64序列化,以字符串方式回传服务器,而不使用这个插件
介绍
jQuery Form插件能够让我们非常方便的实现form表单的AJAX异步提交,并且可以完全自定义提交的数据!
官网:http://plugins.jquery.com/form/
github:https://github.com/malsup/form
文档:http://jquery.malsup.com/form/
使用
1、引用JS
<script src="./jquery.js"></script><script src="./jquery.form.js"></script>
2、声明表单
<formid="myForm"action="comment.php"method="post">Name: <inputtype="text"name="name"/>Comment: <textareaname="comment"></textarea><inputtype="submit"value="Submit Comment"/></form>
3、ajax提交
$(document).ready(function(){// bind 'myForm' and provide a simple callback function$('#myForm').ajaxForm(function(){alert("Thank you for your comment!");});});
API说明
ajaxForm
并不会提交Form,在document的ready函数中通过给指定form添加事件监听使其成为AJAX异步表单。
$('#myFormId').ajaxForm();
ajaxSubmit
立即通过AJAX提交表单,一般是用来替换绑定表单的提交事件
//绑定submit事件$('#myFormId').submit(function(){//异步提交$(this).ajaxSubmit();// return false 用来阻止浏览器的提交与跳转returnfalse;});
fieldSerialize
和$.serialize大同小异,序列化表单数据
var queryString = $('#myFormId .specialFields').fieldSerialize();
resetForm
将表单恢复到初始状态。
$('#myFormId').resetForm();
clearForm
清除表单元素。该方法将所有的text、password、textarea置空,清除select元素中的选定,以及所有radio按钮和checkbox按钮重置为非选定状态。
$('#myFormId').resetForm();
clearFields
清除字段元素。只有部分表单元素需要清除时方便使用。
$('#myFormId .specialFields').clearFields();
参数示例
var options = {
data: { key1: 'value1', key2: 'value2' }, //连同表单一起提交的额外数据
target: '#output1', // 把服务器返回的内容放入id为output的元素中
beforeSerialize: function($form, options) {
// return false to cancel submit
},
beforeSubmit: showRequest, // pre-submit callback
success: showResponse, // post-submit callback
error: function(){},//在错误中调用的回调函数。
//other available options:
url: url //默认是form的action,如果申明,则会覆盖
type: type // 默认值是form的method("GET" or "POST"),如果声明,则会覆盖
dataType: null // null(默认)、xml、script、json接受服务器端返回的类型
clearForm: true // 成功提交后,清除所有表单元素的值
resetForm: true // 成功提交后,重置所有表单元素的值
//超时时间
timeout: 3000
};
// pre-submit callback
function showRequest(formData, jqForm, options) {
// The array of form data takes the following form:
// [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
// formData is an array; here we use $.param to convert it to a string to display it
// but the form plugin does this for you automatically when it submits the data
var queryString = $.param(formData);
// jqForm is a jQuery object encapsulating the form element. To access the
// DOM element for the form do this:
// var formElement = jqForm[0];
alert('About to submit: \n\n' + queryString);
// here we could return false to prevent the form from being submitted;
// returning anything other than false will allow the form submit to continue
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
// for normal html responses, the first argument to the success callback
// is the XMLHttpRequest object's responseText property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'xml' then the first argument to the success callback
// is the XMLHttpRequest object's responseXML property
// if the ajaxForm method was passed an Options Object with the dataType
// property set to 'json' then the first argument to the success callback
// is the json data object returned by the server
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText +
'\n\nThe output div should have already been updated with the responseText.');
}
jQuery.form开发手记的更多相关文章
- jquery ajax 开发手记
1.json解析的格式要求更严格了,必须全部加引号,否则无法识别 {"result":"false"} 2.ashx如果要使用Session需要继承接口IReq ...
- jQuery.Flot开发手记
目录 介绍 使用 自定义参数 自定义图例 自定义坐标 自定义数据序列 自定义网格 其他 鼠标停留在图表节点时显示tooltip 介绍 项目地址:http://www.flotcharts.org/ A ...
- jQuery MiniUI 开发指南+API组件参考手册
jQuery MiniUI 开发指南 本文档将逐步的讲解jQuery MiniUI的方方面面,从此您将踏上jQuery MiniUI的深入探索之旅. 1.Hello M ...
- 使用Ajax以及Jquery.form异步上传图片
一.前言 之前做图片上传一直用的第三方插件,Uploadify 这个应该是用的比較多的,相同也用过别的,在方便了自己的同一时候也非常赞叹人家的功能. 思来想去,仅仅会用别的人东西,始终自己学到的少, ...
- 使用jQuery.form库中ajaxSubmit提交表单时遇到的一些问题
初入前端,网上找的很多资料都不够详细,导致遇到很多问题,现记录如下: 1.首先引入 <script src="~/Scripts/jquery-1.10.2.js">& ...
- 关于jQuery Form Plugin使用心得
吐槽一下先 好久没开发了,今天遇到一个客户form提交的问题,想把form提交从同步变成ajax的异步方式,在网页接受返回来的数据,使用的是jquery from插件,于是网上搜了一圈,博客园,csd ...
- 怎么利用jquery.form 提交form
说明:开发环境 vs2012 asp.net mvc c# 利用jQuery.form.js提交form 1.HTML前端代码 <%@ Page Language="C#" ...
- [转]Nodejs开发框架Express4.x开发手记
Express: ?web application framework for?Node.js? Express 是一个简洁.灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性,帮 ...
- jQuery为开发插件提拱了两个方法:jQuery.fn.extend(); jQuery.extend();
jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(); jQuery.extend(); jQuery.fn jQuery.fn = jQuery.prototype ...
随机推荐
- 三羊献瑞——第六届蓝桥杯C语言B组(省赛)第三题
原创 三羊献瑞 观察下面的加法算式: 祥 瑞 生 辉 + 三 羊 献 瑞 ------------------- 三 羊 生 瑞 气 (如果有对齐问题,可以参看[图1.jpg]) 其中,相同的汉字代表 ...
- OkHttp3的简单使用(一)
一.导入 1)gradle方式: compile 'com.squareup.okhttp3:okhttp:3.8.0'(okhttp 最新版) compile 'com.squareup.okio: ...
- 用firebug 进行表单自定义提交
在一些限制网页功能的场合,例如,防止复制内容,防止重复提交,限制操作的时间段/用户等,网页上一些按钮是灰化的(禁用的),这通常是通过设置元素的 disable属性来实现的.但在后台并没有做相应的功能限 ...
- Xamarin.Forms之UserDialogs 重制版本
在 forms 里面,目前使用比较多的弹出组件是 Acr.UserDialogs ,但是这个组件有些小问题,比如 loading .hide 会同时把 toast 给一起关掉,android 下的 t ...
- openvpn的搭建与应用
一.VPN概述: VPN(Virtual Private NetWork,虚拟专用网络)架设在公共共享的基础设施互联网上,在非信任的网络上建立私有的安全的连接,把分布在不同地域的办公场所.用户或者商业 ...
- 第十一篇 logging模块
logging模块是Python中内置的很强大的一个日志模块,它可以帮我们记录程序运行的情况,对于后续排错有很好的帮助. logging模块定义了下表所示的日志级别,按照严重程度由低到高排列: 级别 ...
- Liunx常用的100条命令汇存
1.关机 shutdown -h now 立刻关机 poweroff shutdown -r now 立刻重启 reboot logout 注销 2.进入图形界面 startx 3.vi编辑器 [vi ...
- LoadRunner11_MySQL数据库脚本
记录一次压测过程中,通过LoadRunner向MySQL数据库插入大量数据的过程. [1]需要使用到MySQL的libmysql.dll动态链接库,因此需要安装MySQL:注:本地安装的MySQL最好 ...
- shell-脚本-作用是发现前10个最占用磁盘空间的文件
#!/bin/bash## 这个脚本的作用是发现前10个最占用磁盘空间的文件################定义这个脚本的全区变量##################################C ...
- TFS解锁命令
tf undo /server:http://193.100.100.29:8080/tfs/EGSS /workspace:HY-PC;hy $/CTCS/TSAGS_TEAM/TestHY ...