文档章节

ajax提交Form

 阿K1225
发布于 2015/12/15 10:38
字数 481
阅读 70
收藏 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

共有 人打赏支持
粉丝 3
博文 117
码字总数 28095
作品 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

没有更多内容

加载失败,请刷新页面

加载更多

下一页

java并发备忘

不安全的“先检查后执行”,代码形式如下: if(条件满足){ //这里容易出现线程安全问题//doSomething}else{//doOther} 读取-修改-写入 原子操作:使用CAS技术,即首先从V中读取...

Funcy1122
今天
0
0
SpringBoot2.0 停机

最近新建了个SpringBoot2.0的项目,因为原来一直使用的是传统的Tomcat部署war包的形式,所以这次SpringBoot内置Tomcat部署jar包的时候遇到了很多问题。其中一个就是因为没有外置的Tomcat容器...

Canaan_
昨天
0
1
Confluence 6 外部参考

一个外部参考的意思是任何站点链接到你 Confluence 的实例。任何时候当 Confluence 的用户单击这个外部链接的时候,Confluence 可以记录这次单击为参考。 在默认的情况下,外部链接的参考链接...

honeymose
昨天
0
0
Android中的设计模式之抽象工厂模式

参考 《设计模式解析》 第十一章 Abstract Factory模式 《设计模式:可复用面向对象软件的基础 》3.1 Abstract Factory 抽象工厂 对象创建型模式 《Android源码设计模式解析与实战》第6章 创...

newtrek
昨天
0
0
Redis | 地理空间(GEO)的一个坑

Redis的地理空间(Geo)是个好东西,轻轻松松的就可以把地图描点的问题处理了, 最近却遇到一个坑...Redis采用的Msater-Slave模式, 运用GEORADIUS在salve读取对应的数据,新增了从节点但是从不返...

云迹
昨天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部