博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ajax提交form
阅读量:5903 次
发布时间:2019-06-19

本文共 1475 字,大约阅读时间需要 4 分钟。

hot3.png

Jquery的$.ajax方法可以实现ajax调用,要设置url,post,参数等。

如果要提交现有Form需要写很多代码,何不直接将Form的提交直接转移到ajax中呢。

以前的处理方法

如Form代码如下:

名称:
密码:
手机:
说明:

当提交后,会跳转到action.aspx页面。并可以通过Request.Params["name"]可以取到值。

思考

如果不想刷新页面使用ajax,就又要在$.ajax中指定url,等信息,不好维护。

在网上查了一下,老早以前老外就有解决方案了。使用ajax直接按照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真实提交。

转载于:https://my.oschina.net/u/867090/blog/140183

你可能感兴趣的文章
简练软考知识点整理-边际效用递减法则
查看>>
Signal处理中的函数可重入问题
查看>>
BD-WAF-M5000规则设置方法
查看>>
磁盘管理体系续2
查看>>
以太坊开发DApp实战教程——用区块链、星际文件系统(IPFS)、Node.js和MongoDB来构...
查看>>
2018-05-14笔记
查看>>
Linux环境下MariaDB数据库四种安装方式
查看>>
openstack neutron网络主机节点网口配置 liberty版本之前的
查看>>
Java课程 困扰Java程序员的编程问题有哪些?
查看>>
Java并发编程:4种线程池和缓冲队列BlockingQueue
查看>>
种太阳五联益生菌教你如何正确给孩子吃益生菌
查看>>
ceph rpm foor rhel6
查看>>
PDA手持终端有哪些应用?
查看>>
HTTPS加密访问Web站点的实现和虚拟站点的实现例析(二)
查看>>
我的友情链接
查看>>
×××协议
查看>>
java数组拷贝的方法
查看>>
输出字符串中所有最长的无重复字符的子字符串
查看>>
安装VirtualBox,系统找不到指定的路径
查看>>
Windows 2008 R2 域服务器web方式修改域用户密码
查看>>