文档章节

ajax提交Form

 阿K1225
发布于 2015/12/15 10:38
字数 481
阅读 74
收藏 6

如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

本文转载自:http://www.cnblogs.com/zjfree/archive/2011/12/30/2307683.html

共有 人打赏支持
粉丝 4
博文 130
码字总数 31392
作品 0
浦东
私信 提问
dwz ajax表单return false不能阻止表单提交

用dwz的ajax表单的时候加上onsubmit="return validateCallbacks(this, navTabAjaxDone);"就可调用/** * 普通ajax表单提交 * @param {Object} form * @param {Object} callback */ function ......

小石头哥
2012/08/24
2.5K
4
Django - 如何处理前端的ajax form submit 请求?通过json返回处理结果,不要重定向(redirect)

问题背景 在web应用开发中,经常遇到需要诸如用户注册提交个人信息,或者录入商品信息的需求。在浏览器上一般以一个Form表单来包含用户所有需要输入的控件。那么浏览器需要在用户输入完所有信...

fall4u
01/09
0
0
通过Ajax方式上传文件

通过传统的form表单提交的方式上传文件: 不过传统的form表单提交会导致页面刷新,但是在有些情况下,我们不希望页面被刷新(即异步刷新),这种时候我们都是使用Ajax技术实现。 在js中添加$...

初雪之音
2016/08/03
61
0
ajaxFrom 与ajaxSubmit 区别

首先都需要安装form.js的插件 ajaxForm() : 1,不能提交表单(需要提供表单的action、id、 method,最好在表单中提供submit按钮)。2,在document的ready函数中,使用ajaxForm来为AJAX提交表...

BestDay
2016/10/12
97
0
Django之路——7 django与ajax

Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML,现在更...

袁勇i
07/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

关于ElasticSearch的使用过程遇到的问题

由于作者从官网下载了ES5.6.10的安装包,解压之后就开始运行ES,前面一切正常。 后面某个查询条件失效。 解决: 1.先试了把单个查询条件撤离出来,当成一个Test来跑,发现还是获取不到值,表...

DoLo-lty
7分钟前
0
0
sed 替换文本内得路径字符等等

1. 句子 sed -i 's%/opt/apache-maven-3.5.3/conf/settings.xml%/data/opt/apache-maven-3.5.3/conf/settings.xml%g' ./*/config.xml 2. 解释 sed linux 一个文件流式处理的工具 2.1 -i 在当......

Aruforce
8分钟前
0
0
mysql_索引

索引类型 哈希表 有序数组 搜索树 MySQL索引 B-树 B+树 innodb的索引 索引维护 关于自增主键的使用 参考 极客时间《mysql实战45讲》

grace_233
8分钟前
0
0
“入乡随俗,服务为主” 发明者量化兼容麦语言啦!

5年时光 我们裹挟前行。发明者量化从筚路蓝缕到步履蹒跚,从以“区块链资产交易”为阵地,再到以“内外盘商品期货”为依托。再到今天全面兼容“麦语言”。每一步,我们始终都在为建立一个优秀...

酒逢知己千杯少
9分钟前
0
0
session深入探讨

简介 session,会话,其实是一个容易让人误解的词。它总跟web系统的会话挂钩,利用session,javaweb项目实现了登录状态的控制。坊间流传,关闭浏览器,就是关闭了web系统的会话。其实浏览器对...

千里明月
11分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部