form表单中的带有name的标签直接转JSON
1. 将如下内容引入页面:
比如说新建一个 a.js,然后在页面中引入a.js
//将form表单序列化成json格式
$.fn.serializeObject = function () {
var o = {};
var a = this.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;
};
2. 如果form如下所示:
<form id="myform">
<input type="text" id="loginName" name="loginName" class="form-control" placeholder="用户名" required="">
<input type="password" id="empPwd" name="empPwd" class="form-control" placeholder="密码" required="">
<button type="submit" class="btn btn-primary block full-width m-b" onclick="login();return false;">登 录</button>
</div>
</form>
此时我们想通过ajax的形式交此form中的带有name的input到后台,则可以如下使用:
<script>
function login() {
//ajax的形式提交表单
var url = "<%=basePath%>/emp/login";
var data=$("#myform").serializeObject(); //此处调用的就是我们写好的引入的方法,会将带有name的input,全部转为JSON。
$.post(url, data, function (data) {
if (data.result == "false") {
alert(data.reason);
} else {
alert("OK");
}
});
}
</script>
3.相比其他解决方法的优点:
a. 当然可以利用jquery获取每一个input的值,然后手动组装成json字符串提交,此操作费时费力,如果是如上结构可以直接使用。
b. 缺点,外层必须是form才行,注意事件需要return false;阻断原有跳转。
form表单中的带有name的标签直接转JSON的更多相关文章
- Form表单中method为get和post的区别
序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...
- jQuery中设置form表单中action值的方法
jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈 html代码: <form id="myFormId&quo ...
- form表单中button按钮返回上一页解决办法
解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...
- form表单中的button自动刷新页面问题
form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...
- jQuery中设置form表单中action的值的方法
下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...
- jQuery中设置form表单中action值与js有什么不同。。。。
jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...
- jsp中的form表单中的 id和name有什么区别了
<form action="./system/WebServer_webServerLogin" method="post" id="login ...
- Form表单中的action路径问题,form表单action路径《jsp--->Servlet路劲问题》这个和上一个《jsp--->Servlet》文章有关
Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com 网友分享于: 2014-08-14 08:08:01 浏览数44525次 ...
- dwz的form表单中url的变量替换
form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...
随机推荐
- React学习笔记-03 state
每一个组件都有状态,比如一个开关,开 和 关,都是一种state.那么react是怎么管理它的state的? React 把用户界面当做状态机,可以轻松的让用户界面和数据保持一致.用户只需要更新组件的 ...
- JavaScript DOM编程艺术-学习笔记(第十章、第十一章)
第十章 1.动画中,因为js的效率高,所以看不见过渡效果 2.题外话:①国外人写书,总是先感谢一遍亲朋好友,最后感谢自己的家人. 3."除非允许用户'冻结'移动的内容,否则应该避免让内容在页 ...
- 使用mybatis多表联查的时候结果异常及springmvc的理解
今天使用mybatis多表联查的时候,在dos窗口查询时可以出结果集,但是使用mybatis查询的时候最后返回的结果只有最后一个结果 然后研究了半天没弄出来,后来无意中发现添加了最外层从表的ID字段后 ...
- 没事抽空学——c语言指针操作基础概念
指针基础 理解指针的最佳方法是画图,学习使用基本指针,不要产生空指针. 存储控件分配 存储控件分配是指在内存预留空间的过程.就像一个虚拟菜谱一样,指针对应菜名,其所指的内存空间中的数据对应实际的菜. ...
- Java继承多态中的方法访问权限控制
java中的方法天生具有继承多态特性,这点与C++有很大不同(需要在父类方发上加virtual关键字),但用起来确实方便了许多. 最简单的继承多态 声明一个接口BaseIF,只包含一个方法声明 pub ...
- SuperSocket源码解析之开篇 (转)
一 简介 官方介绍:SuperSocket 是一个轻量级, 跨平台而且可扩展的 .Net/Mono Socket 服务器程序框架.你无须了解如何使用 Socket, 如何维护 Socket 连接和 S ...
- 郑州尚学堂:如何看待ARM的各种模式?
嵌入式设备已经越来越与我们的日常生活密切相关了,由此带来了ARM的高速发展.就拿我们的手机来说吧,几乎所有的手机都是ARM体系的.这里大致介绍下ARM 的7种执行模式. ARMv4以上版本的CPU任何 ...
- hdfs格式化hadoop namenode -format错误
在对HDFS格式化,执行hadoop namenode -format命令时,出现未知的主机名的问题,异常信息如下所示: [shirdrn@localhost bin]$ hadoop namenod ...
- hancher57公众号突破3000人
- HDU 1596 find the safest road(SPFA)
Problem Description XX星球有很多城市,每个城市之间有一条或多条飞行通道,但是并不是所有的路都是很安全的,每一条路有一个安全系数s,s是在 0 和 1 间的实数(包括0,1),一条 ...