Jquery基于Ajax方法自定义无刷新提交表单Form实例


本文实例讲述了Jquery基于Ajax方法自定义无刷新提交表单Form的方法。分享给大家供大家参考。具体实现方法如下:

Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。

如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢。

以前的处理方法:

如Form代码如下:

复制代码 代码如下:
<form id="Form1" action="action.aspx" method="post" >
名称:<input name="name" type="text" /><br />
密码:<input name="password" type="password" /><br />
手机:<input name="mobile" type="text" /><br />
说明:<input name="memo" type="text" /><br />
<input type="submit" value="提 交" />
</form>

当提交后,会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。

思考:

如果不想刷新页面使用ajax,就又要在$.ajax中指定url,等信息,不好维护。

在网上查了一下,老早以前老外就有解决方案了。使用ajax直接按照Form信息直接提交。不刷新页面。

参考资料:http://jquery.malsup.com/form/

很好用,但我还是愿意自己写个自己用的。

核心JS代码:

复制代码 代码如下:
//将form转为AJAX提交
function ajaxSubmit(frm, fn) {
var dataPara = getFormJson(frm);
$.ajax({
url: frm.action,
type: frm.method,
data: dataPara,
success: fn
});
}

//将form中的值转换为键值对。
function getFormJson(frm) {
var o = {};
var a = $(frm).serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});

return o;
}

ajaxSubmit方法第一个参数,是要提交的form,第二个参数是ajax调用成功后的处理函数。

将form的action传递给ajax的url,form的method传递给ajax的type,再将格式化后的表单内容传递给data。

getFormJson方法将form的元素转化为json格式键值对。形如:{name:'aaa',password:'tttt'},注意将同名的放在一个数组里。

调用:

复制代码 代码如下:
$(document).ready(function(){
$('#Form1').bind('submit', function(){
ajaxSubmit(this, function(data){
alert(data);
});
return false;
});
});

在ajaxSubmit方法调用前,可验证数据是否正确,在alert(data)处可加入自己调用返回后处理代码。

在调用ajaxSubmit方法后,必须添加return false;语句防止Form真实提交。

希望本文所述对大家的Ajax程序设计有所帮助。



相关阅读:
C# WinForm打开PDF文件并在窗体中显示
MYSQL索引无效和索引有效的详细介绍
深入剖析Java中的各种异常处理方式
Oracle 数据库优化实战心得总结
yii权限控制的方法(三种方法)
JavaScript作用域链示例分享
win10 10074怎么开启暗黑主题模式?
非常经典的PHP文件上传类分享
android使用PopupWindow实现页面点击顶部弹出下拉菜单
JSP bean获取各种参数
Android五大布局与实际应用详解
Win8系统如何查看mac地址?Win8系统查看mac地址的两种方法
Windows出现BOOT\BCD错误的解决办法
js动态添加的DIV中的onclick事件简单实例
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 安全防范行政值班制度 一场精彩而又刺激的足球赛作文800字 我心中的2010广州亚运会作文650字 你不必害怕,岁月有的是时间让你遇见更好的人 酒足饭饱(白水先生) 高中高三作文2900字:议论文论据大全——读 书 2015小学校本教研计划 眼泪的独白 【精品】法制教育心得体会600字 杂记作文450字 读有的人有感400字 十八岁的回忆作文800字 毫不妥协的居里夫人作文800字 五一活动方案 《背起爸爸上学》读后感 风流女皇叶卡特琳娜二世 你对我很重要,所以我想为你改变 描写雪的作文500字 关于爱国的演讲稿1000字 凌箜物语 散文:藍顏知已26-云淡风轻,细水长流! 小学生植树节演讲稿1500字 狼医作文600字 28条经典的说说语录 若非那缕阳光,请将我忽略 吃年糕作文 小学生清明节作文:清明踏青 《鲁滨孙飘流记》名著读后感500字 思念的宣泄 物业服务工作年终汇报小结 背影,引起情思 小学五年级作文900字:琉璃与城墙 幼儿园工作总结(44) 老舍先生的名言:北京的春风能把春天吹跑 为何这般感伤 小学四年级作文350字:阅兵式观感 陈生铠群诗词选--之--【英雄何时归】 作文参赛宣言 守财奴老爸和爱花钱老妈(转载)作文1200字 梦想奔跑 小学三年级作文450字:游虞山 九九重阳节发言稿 最温馨的生日贺卡祝福语 我愿化作一片雪花150字作文 多变的爸爸作文450字 莎士比亚《麦克白》读后感范文精选 2015个人年度工作小结 温哥华冬天不下雪 爱情就象鬼,相信的人多,见到的人少 河——流

Copyright © 2016 phpStudy |