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 ...
随机推荐
- MySQL性能调优与架构设计——第5章 备份与恢复
第5章 备份与恢复 前言 数据库的备份与恢复一直都是 DBA 工作中最为重要的部分之一,也是基本工作之一.任何正式环境的数据库都必须有完整的备份计划和恢复测试,本章内容将主要介绍 MySQL数据库的备 ...
- C++语法知识小结(持续更新中)
1)在适用构造函数创建对象时,有时会创建临时对象.如 Stock::Stock(const std::string & co,long n,double pr); 在使用时,下面两条语句有根本 ...
- tornado+nginx上传视频文件
[http://arloz.me/tornado/2014/06/27/uploadvideotornado.html] [NGINX REFRER:Nginx upload module] 由于to ...
- [vscode] github travis 集成问题
问题log $ npm install -npm ERR! 404 Not Found npm ERR! 404 npm ERR! 404 'types/mocha' is not in the np ...
- 比特币技术之迷-Transaction 交换
Transaction 交换每个客户端都会广播本地生成的Transaction,并转给来自其它节点的Transaction,本文主要描述Transaction之间的交换与流转过程. 大家也可以阅读以下 ...
- 干掉MessageBox,自定义弹出框JMessbox (WindowsPhone)
先上效果图 QQ退出效果 ...
- Day 3 Python 基础数据类型二
1. INT 型 #1. 数字int #bit_length() 当十进制用二进制表示时,最少使用的位数. v =11 data = v.bit_length() print(data) 2. 布尔值 ...
- Java以邮件附件的方式发送excel文件
String to = "xxx@qq.com"; // 收件人的QQ邮箱 String from = "xxx@qq.com"; // 发件人的QQ邮箱 St ...
- 题解 CF520E 【Pluses everywhere】
题目链接 ps:可能组合数一不小心打错了,请发现的大佬提出,谢谢. 我们来讨论每一位数$a_{i}$被算了多少次. 总共有$n-1$个空位可以放$'+'$所以,$a_{i}$左边有$i-1$个空位,右 ...
- Java FileInputStream与FileReader的区别
在解释Java中FileInputStream和FileReader的具体区别之前,我想讲述一下Java中InputStream和Reader的根本差异,以及分别什么时候使用InputStream和R ...