文档章节

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
博文 125
码字总数 29897
作品 0
浦东
私信 提问
dwz ajax表单return false不能阻止表单提交

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

小石头哥
2012/08/24
2.4K
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

没有更多内容

加载失败,请刷新页面

加载更多

nuc970 uboot nand-boot,kernel, filesystem 烧录位置

一 烧写到Nand Flash **1.1 **相关文件说明 l BSP版本:nuc970bsp-release-20150519.zip l NuWriter版本:2015/04/28-V01,nuvoTon Nu-Writer V1.0 l 烧写文件: u-boot-spl.bin:负责将u-b......

CookieDemo
41分钟前
1
0
python中sort和sorted函数小结

L.sort(cmp=None, key=None, reverse=False) sorted(iterable, cmp=None, key=None, reverse=False) 这样看,sorted函数只比sort函数多一个iterable参数,其余没什么不同,iterable是一个迭代......

上官夏洛特
今天
3
0
thinkphp 常用SQL执行语句总结

第一条:Db::tablera('vr_panomas')->where(['delete_time'=>0,'id'=>['in',$pids]])->field(['id'=>'id','post_thumb'=>'thumb','post_title'=>'title','post_tags'=>'tags','post_price'=>......

koothon
今天
3
0
支付宝返回状态resultStatus意思

上一篇集成支付宝的时候,会有一些支付宝返回的resultStatus,具体意思是: 9000 订单支付成功 8000 正在处理中 4000 订单支付失败 6001 用户中途取消 6002 网络连接出错 还有memo,意思就是...

RainOrz
今天
3
0
electron webview 页面加载事件顺序

1.did-start-loading 页面开始加载 2.load-commit 主页面文档加载 3.page-title-updated title 4.dom-ready 主页面 dom 加载完成 5.load-commit frame文档加载 6.did-frame-finish-load fram......

dubox
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部