ajax提交Form

2019独角兽企业重金招聘Python工程师标准>>>

如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真实提交。

实例下载：http://files.cnblogs.com/zjfree/ajaxForm.rar

转载于:https://my.oschina.net/u/2436852/blog/544415

ajax提交Form相关推荐

通过php jq ajax 提交form表单
参考http://www.php100.com/html/webkaifa/PHP/PHPyingyong/2013/0619/13568.html html <div id="con ...
使用ajax提交form表单，包括ajax文件上传转http://www.cnblogs.com/zhuxiaojie/p/4783939.html...
使用ajax提交form表单,包括ajax文件上传前言使用ajax请求数据,很多人都会,比如说: $.post(path,{data:data},function(data){... },&quo ...
学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
SpringMVC 用对象接收 ajax提交form表单
SpringMVC 用对象接收 ajax提交form表单转载于:http://www.cnblogs.com/klwyrn/p/5955152.html 第一种方法(简单易用,防蚊虫): 1.1 ...
ajax 表单提交传文件,Ajax提交Form表单及文件上传
刚刚申请下来的博客,写得第一篇.有点小激动,本人以前是一名工业3D设计师突然有些变故做上了JavaWeb开发: 前几天,发现了一些小问题.我在写后台管理页面时,需要上传一张图片.于是我就用很普通的Fo ...
利用ajax提交form表单数据
利用thymeleaf引擎创建的html中,使用了adminLTE模板,ajax提交form表单数据,本以为很容易实现,却遇到了很多问题,这里进行总结. 1.get方式提交通过serialize() ...
ajax提交form表单后台@RequestBody接收json字符串
好久没搞ajax提交form表单了. 在修改过程中遇到报错: 1.Content type 'application/x-www-form-urlencoded;charset=UTF-8' not ...
ajax提交form表单
ajax和form表单有很多有趣的互动,ajax提交form表单就是其中一种,这种方法主要是用来提交带图数据的. html页面,我把图片单独放到form表单内,其他数据放到form外即可 <fo ...
ajax提交form表单到php,ajax如何提交form表单数据？ajax提交form表单数据的方法介绍...
对于form表单数据的提交,我们一般都会想到使用ajax提交,那么,ajax如何来提交form表单数据呢?接下来的这篇文章就来给大家来介绍关于ajax提交form表单数据方法,有需要的伙伴可以参考一下 ...
用ajax提交表单给数据库,如何利用ajax提交form表单到数据库
如何利用ajax提交form表单到数据库发布时间:2021-06-17 14:52:49 来源:亿速云阅读:75 作者:小新这篇文章主要介绍如何利用ajax提交form表单到数据库,文中介绍的非 ...

ajax提交Form

ajax提交Form相关推荐

最新文章

热门文章