使用jQuery,实现完美的表单异步提交
jQuery异步提交表单
<form id="form1" method="post">
<table border="1">
<tr>
<td>用户名:</td>
<td>
<input type="text" name="loginName" /></td>
</tr>
<tr>
<td>爱 好:</td>
<td>
<input type="checkbox" name="cbLoveYy" value="1" />游泳
<input type="checkbox" name="cbLoveYx" value="1" />游戏
<input type="checkbox" name="cbLovePs" value="1" />爬山
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input id="btnAjaxSubmit" type="submit" value="jQuery.ajax提交" />
</td>
</tr>
</table>
</form>
<script type="text/javascript">
$(document).ready(function () {
$("#btnAjaxSubmit").click(function () {
var options = {
url: 'async_submit_test1.aspx?action=SaveUserInfo',
type: 'post',
dataType: 'text',
data: $("#form1").serialize(),
success: function (data) {
if (data.length > 0)
$("#responseText").text(data);
}
};
$.ajax(options);
return false;
});
});
</script>
我们通过$("#form1").serialize()将表单元素的数据转化为字符串,然后通过$.ajax()执行异步请求资源。
方案:jQuery.ajax() + .aspx请求
此方案优势:
1) 我们不会感觉页面的“闪一闪”效果
2) 我们不会因为服务器耗时响应而导致出现“百页”的糟糕用户体验。
此方案劣势:
1) 此方案中我还是使用了aspx页面去响应请求,只是在后台通过action参数去做相应处理,尽管是异步操作但却完完整整的跑了一遍ASP.NET页面生命周期(这也是在Response.Write()输出完自己的东西后必须调用Response.End();来提前终止生命周期,否则页面信息也会一起返回)
2) jQuery库提供的序列化表单字符串方法不能收集文件上传的表单元素,如,$("#form1").serialize()。所以对于包含文件上传的表单我们还需通过<iframe>模拟异步表单提交。(<iframe>模拟异步表单提交的过程我将在分析jQuery.form插件的源码小节进行说明)
(jQuery库提供的序列化字符串的数据来源时表单的elements属性,而<input type=”file” />的表单元素不包含在elements中)
当然jQuery.ajax()也可以结合.ashx文件(一般处理文件)或其他方式实现高效异步请求,这边只是为了说明:异步请求aspx页面也会跑一边aspx页面生命周期的事实。
jQuery.form插件轻松实现表单提交
现在我们使用jQuery的表单插件Jquery.form.js(官网)来实现异步表单提交。
1) 该插件需要Jquery最低版本为v1.5
2) 该插件提供了ajaxSubmit和ajaxForm两种表单提交方式,但不要对同一个表单同时使用两种方式。
现在我将通过“jQuery+jQuery.form插件+ashx(一般处理文件)”来实现一个高效的异步表单提交。
<form id="form1" action="ajaxOperation.ashx" method="post">
<table border="1">
<caption>jQuery.form.js异步提交方式</caption>
<tr>
<td>用户名:</td>
<td>
<input type="text" name="loginName" /></td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<button id="btnAjaxSubmit">ajaxSubmit提交</button>
<input id="btnAjaxForm" type="submit" value="ajaxForm提交" />
</td>
</tr>
</table>
</form>
1) 为<form>标签指定action值,指定使用ajaxOperation.ashx处理该表单请求。
2) 使用两个提交按钮btnAjaxSubmit和btnAjaxForm分别对应jQuery.form插件提供的两种表单提交API。
jQuery表单插件提交代码如下:
<script type="text/javascript">
$(document).ready(function () {
var options = {
success: function (data) {
$("#responseText").text(data);
}
}; // ajaxForm
$("#form1").ajaxForm(options); // ajaxSubmit
$("#btnAjaxSubmit").click(function () {
$("#form1").ajaxSubmit(options);
});
});
</script>
方案:jQuery.form.js插件 + .ashx请求
此方案优势:
1) 简简单单几句代码,我们就可以实现表单的提交,并且可灵活通过ajaxSubmit()函数基于任何事件的触发实现表单异步提交。
2) 支持文件上传功能,并在新浏览器中支持进度条更新。(在jQuery.form插件源码分析中会进行说明)
3) 与jQuery库完美结合,支持jQuery.ajax()函数触发的各种事件,支持jQuery.ajax()中所传递的参数。(在jQuery.form插件源码分析中会进行说明)
好了,这样短而易读的代码,这样的偷懒方式不正是我们追求的吗?那jQuery.form插件提供的表单提交API是否高效呢?内部又做了些什么?接下来跟着我看看jQuery.form插件内部实现吧。。。
使用jQuery,实现完美的表单异步提交的更多相关文章
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 使用jQuery.form插件,实现完美的表单异步提交
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs ...
- jQuery动态创建form表单并提交到后台(携带一定的数据进行页面跳转)
今天遇到这么一个需求,携带一个编号一个名字跳转到另一个JSP页面,直接页面跳转(get携带数据)的话不太安全,于是想到到后台转发一下. 第一种:直接以表单提交方式的进行 JS代码: var form ...
- jquery.form.js 使用以及问题(表单异步提交)
标注:我引用的js后报错 原因:是引用的js有冲突 我引用了两便jQuery: 转载:https://blog.csdn.net/cplvfx/article/details/80455485 使用方 ...
- jQuery——表单异步提交
如果不做任何处理,表单提交时会刷新页面,为了改善体验,可以使用jQuery做到异步提交表单:通过$("#form").serialize()将表单元素的数据转化为字符串,然后通过$ ...
- jquery让form表单异步提交
1.监听表单提交事件,并阻止表单提交 $("form").submit(function(e) { return false;//阻止表单提交 }) 2.拿到表单内容 let da ...
- jquery.form.js+jquery.validation.js实现表单校验和提交
一.jquery引用 主要用到3个js: jquery.js jquery.form.js jquery.validation.js 另外,为了校验结果提示本地化,还需要引入jquery.vali ...
- .net mvc中的表单异步提交
// // 摘要: // 将 <form> 开始标记写入响应. // // 参数: // ajaxHelper: // AJAX 帮助器. // // actionName: // 将处理 ...
- 表单 - Form - EasyUI提供的表单异步提交
方案一 被提交的表单 <form id="loginForm" method="post"> <table align="cente ...
随机推荐
- git备份sublime插件及配置
github备份sublime配置 sublime使用的时间长了,渐渐的就积累了一些有用甚至离不开的插件.但是有时候系统会出点问题,或者换电脑什么的,这时候要想在找回那个曾经的sublime就不那么容 ...
- c++程序判断系统是Linux还是Windows
用C++来实现,本来想了很多,后来越写越烂,而且结果总是不尽人意,干脆这样子好了: int main() { int judge = system("cls"); ) cout & ...
- javascript高级编程3第二章:在html中使用javascript
2.1 <script>元素 向html页面中插入javascript的主要方法,就是使用<script>元素.这个元素被加入到正式的html规范中.html4.01为< ...
- centos 开机启动服务
一.启动脚本 /etc/rc.local 启动 最简单的一种方式,在启动脚本 /etc/rc.local (其实 /etc/rc.local 是/etc/rc.d/rc.local 的软链接文件,实际 ...
- mysql操作查询结果case when then else end用法举例
Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN ...
- Linux 虚拟机重新生成配置文件无法启动
ifconfig...没有看到eth0..然后重启网卡又报下面错误. 故障现象: service network restartShutting down loopback insterface: ...
- java.lang.Comparable<T> 接口
package java.lang; import java.util.*; public interface Comparable<T> { public int compareTo(T ...
- JS学习之事件流
本文是原创文章,如需转载,请注明文章出处 JS和AS师出同源,所以事件流的3个阶段也跟AS一样,分别是捕获阶段,目标阶段,冒泡阶段. 下面写了个例子可以清晰的看出事件流的顺序: eventTest.h ...
- [sqoop1.99.6] 基于1.99.6版本的一个小例子
1.创建mysql数据库.表.以及测试数据mysql> desc test;+-------+-------------+------+-----+---------+------------- ...
- windows 服务实例
参考来源:http://blog.csdn.net/morewindows/article/details/6858216 参考来源: http://hi.baidu.com/tfantasy/ite ...