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提交Form的更多相关文章
- ajax提交form表单
1. ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单. 2. from视图部分 <form id="loginF ...
- ajax提交form表单资料详细汇总
一.ajax提交form表单和不同的form表单的提交主要区别在于,ajax提交表单是异步提交的,而普通的是同步提交的表单.通过在后台与服务器进行少量数据交换,ajax 可以使网页实现异步更新.这意味 ...
- 今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式
今天在研究jquery用ajax提交form表单中得数据时,学习到了一种新的提交方式 jquery中的serialize() 方法 该方法通过序列化表单值,创建 URL 编码文本字符串 序列化的值可在 ...
- jquery实现ajax提交form表单的方法总结
本篇文章主要是对jquery实现ajax提交form表单的方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 方法一: function AddHandlingFeeToRefund( ...
- jquery的ajax提交form表单方式总结
方法一: function AddHandlingFeeToRefund() { var AjaxURL= "../OrderManagement/AjaxModifyOrderServic ...
- Ajax提交Form表单的一种方法
待提交的表单 <form id="updatePublicKey" enctype="multipart/form-data"> <div c ...
- django ajax提交form表单数据
后台: from django.shortcuts import render from django.shortcuts import redirect from django.shortcuts ...
- ajax提交form表单问题
form表单提交数据可以省下大量大量获取元素的代码,局部刷新时也可以用ajax提交form表单,但是要先把表单序列化,再把后台javaBean对象序列化,但是你有可能前后台都执行了系列化,但是后台还是 ...
- Ajax提交form表单内容和文件(jQuery.form.js)
jQuery官网是这样介绍form.js A simple way to AJAX-ify any form on your page; with file upload and progress s ...
- 使用ajax提交form表单,包括ajax文件上传【转载】
[使用ajax提交form表单,包括ajax文件上传] 前言 转载:作者:https://www.cnblogs.com/zhuxiaojie/p/4783939.html 使用ajax请求数据,很多 ...
随机推荐
- MATLAB cell & struct
CELL cell的每个单元都可以存储任何数据,比如传递函数等.当然,存储矩阵更是没有问题的了.但是用cell数据类型之前,要先初始化. a=cell(n,m) 那么就把a初始化为一个n行m列的空ce ...
- POJ - Til the Cows Come Home(Dijkstra)
题意: 有N个点,给出从a点到b点的距离,当然a和b是互相可以抵达的,问从1到n的最短距离 分析: 典型的模板题,但是一定要注意有重边,因此需要对输入数据加以判断,保存较短的边,这样才能正确使用模板. ...
- android toast几种使用方法
toast经常会用到,今天做个总结,特别是自定义toast的布局,值得一看. 一.默认展示 // 第一个参数:当前的上下文环境.可用getApplicationContext()或this // 第二 ...
- Android 使用 DownloadManager 管理系统下载任务的方法,android管理系统
从Android 2.3(API level 9)开始Android用系统服务(Service)的方式提供了Download Manager来优化处理长时间的下载操作.Download Manager ...
- java语言:Linux与JVM的内存关系分
在一些物理内存为8g的服务器上,主要运行一个Java服务,系统内存分配如下:Java服务的JVM堆大小设置为6g,一个监控进程占用大约 600m,Linux自身使用大约800m.从表面上,物理内存应该 ...
- Mobius 反演
上次看莫比乌斯繁衍反演是一个月前,讲道理没怎么看懂.. 然后出去跪了二十天, 然后今天又开始看发现其实并不难理解 开个这个仅记录一下写过的题. HAOI 2011 B 这应该是莫比乌斯反演的模 ...
- 高可用与负载均衡(6)之聊聊LVS的三种模式
LVS的赘述 IPVS,ipvs ,ip_vs是负载均衡器中的内核代码 LVS是完整的负载均衡器+后端服务器.这些组件组成了虚拟服务器. LVS是一个4层负载均衡方案,标准的客户端-服务器网络语义也被 ...
- 修改nginx的访问目录以及遇到的403错误修改总结
对于这个问题困扰了我好几天,前篇文章介绍了图片服务器的使用,但是两个服务器如何进行通话访问呢,即如何通过nginx来访问ftp服务器上的资源文件呢,这里面需要修改nginx的配置文件(vi /usr/ ...
- WinForm------GridControl显示每行的Indicator中的行号
1.修改Indicator的行宽 2.添加CustomDrawRowIndicator事件 private void AdminCardView_CustomDrawRowIndicator(obje ...
- js 实现动态key value(JSON字符串注意事项:key和value都要用双引号,官网指定用双引号)
1.JSON字符串注意事项:key和value都要用双引号,官网指定用双引号,如下: var mapStr='{"a":"a","b":&q ...