• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > Jquery基于Ajax方法自定义无刷新提交表单Form实例

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

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了Jquery基于Ajax方法自定义无刷新提交表单Form实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

以前的处理方法:

如Form代码如下:
名称:<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></div>

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

思考:

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

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

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

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

核心JS代码:
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;
}</div>

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

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

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

调用:
$('#Form1').bind('submit', function(){
ajaxSubmit(this, function(data){
alert(data);
});
return false;
});
});</div>

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

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2017-05-11关于IE下AJAX的问题探讨
  • 2017-05-11AJAX实现图片预览与上传及生成缩略图的方法
  • 2017-05-11ajax jquery校验用户是否已经注册演示代码
  • 2017-05-11Ajax 用户名验证是否存在
  • 2017-05-11Ajax+smarty技术实现无刷新分页
  • 2017-05-11Ajax使用杂谈 也许也是乱弹
  • 2017-05-11利用iframe实现ajax跨域通信的实现原理(图解)
  • 2017-05-11ajax 登录功能简单实现(未连接数据库)
  • 2017-05-11Ajax提交参数的值中带有html标签不能提交成功的解决办法(ASP.NET)
  • 2017-05-11AJAXRequest v0.2

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • SpringMVC+Ajax+拼接html字符串实例代码
    • ajax返回的json内容进行排序使用sort()方法实现
    • 解决微信返回上一页,页面中的AJAX的请求,对Get请求无效的问题
    • Ajax jsonp跨域请求实现方法
    • Ajax 提交表单数据到入库的全盘操作流程分享
    • HTML5 Ajax文件上传进度条如何显示
    • Ajax实现城市二级联动(三)
    • 变量冲突处理
    • 用Ajax读取xml文件的简单例子
    • 在(ASP/PHP/JSP/html/js)中禁止ajax缓存的方法集锦

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有