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 交通频道 作文范文 小议浪漫 小学预防食物中毒应急预案_应急预案 万般皆是命,半点不由人 爱不停歇 麦迪语录 初 春 晨 曲 这个开心果是谁? 电子厂工作心得 一个木偶的故事550字 水务局三项建设学习教育活动心得体会一 小学六年级作文900字:太阳休假 当一回家乡的小导游作文900字 小学五年级作文500字:肩负责任,共创辉煌 无翼飞翔 分团委副书记述职报告 药店营业员工作总结经验 2016年幼儿园教师的个人述职报告 废材娘子笑倾城 2 记忆 生命中的可能作文100字 高中高三作文800字:纯白 新型多功能笔 竞争上岗演讲稿竞职演讲 感恩的优美句子 营销人员求职面试的自我介绍 孤寂是我的朋友作文300字 只是爱上那抹微笑? 跆拳道协会2011年上半年工作总结与下半年工作计划 2017年班队工作计划 公司圣诞节活动方案 2016有经验工作人员辞职报告感想 不可错过的搞笑祝福语 不要对我们的相识这件事耿耿于怀 小学三年级作文250字:Grass 两个朋友和两个苹果 为你变傻 雨夜听蝉 一声吆喝 我最关注的日全食作文500字 勇气作文250字 烛光赞作文600字 在人民钟表店门前(钱塘刘军) 灵山大佛游记作文900字 野深动物园作文200字 小学六年级作文700字:足球大战 比萨斜塔下"真实的谎言" 读了《简爱》前十章之后作文1600字 身边的太阳花 静静的行走在小路上 我们班的黑人高天作文450字 Adela°日志:前度。发现你的网名和另外一个女孩子成了情侣网名。

Copyright © 2016 phpStudy |