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;阻断原有跳转。

时间: 2025-01-10 16:35:12

form表单中的带有name的标签直接转JSON的相关文章

form表单中method的get和post区别

一.问题的提出   <form action="getPostServlet/getPost.do?param4=param4" method="get">     <input type="hidden" name="param1" value="param1">     <input type="hidden" name="param2&quo

springmvc如何将form表单中的对象类型绑定

原文:springmvc如何将form表单中的对象类型绑定 代码下载地址:http://www.zuidaima.com/share/1550463256054784.htm 比如用户编辑视频,该视频输入某个分类,编辑视频的表单如下: <form> <select name="category"> <option value="yule">娱乐</option> <option value="keji&

如何在一个form表单中实现多个submit

As we all know,通过设置input type=“submit”,我们可以把form表单中的值通过post方式传递给action所指向的页面.下图中,我们可以把userName,userAge,userSex这三个值传递到xxx.jsp <form action="xxx.jsp" method="post">            <input type="text" name="userName&quo

form表单中的button自动刷新页面问题

form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击就会触发表单的提交事件. <button></button> <!-- 两者是相当的 --> <button type="sumbit"></button> 解决的办法有三个. 1.在<button>标签中添加属性ty

关于form表单中method里get和post的区别

在html里form可谓不得不用的一条代码,而form里的method选项里只有get和post两种. 因为我们大多数情况下只有post,所以get和post的区别很容易被遗忘. 简单区别来讲: get提交:提交的数据会在ul上进行提交,明文不加密,不安全,提交的数据有限. Post提交:以form表单封装的方式提交,适合提交大量的数据,相对安全. 虽然我们很少用get,但是我们一定常见到这种方式,只是我们很少注意到罢了. 比如,百度的搜索内容就是用的get方式,我们可以在url上看到我们都提交

dwz的form表单中url的变量替换

form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变量替换: 删除.编辑.修改密码使用了变量{sid_user},特别需要注意的是变量命名的格式,必须以"sid_"开头,这样后台可以直接以变量"sid"接收. <tbody>中<tr target="sid_user" rel=&qu

Form表单中的action路径问题

今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题: (1)<form name="login" action="①?" method="②?"> //表单内容 username:<input type = "text" name = "username"

Form表单中的action路径问题,form表单action路径《jsp---&gt;Servlet路劲问题》这个和上一个《jsp---&gt;Servlet》文章有关

Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 Form表单中的action路径问题,form表单action路径 今天刚接触web,在用jsp和servlet做一个简单的登陆的时候在Form表单action属性和method属性的一些问题: 我遇到的是Form表单提交到servelet处理时遇到的问题: (1)<form name="l

angularjs解决方案之 Form表单中按钮提交

在form表单中如果有子表时,子表中的按钮默认的提交方式是submit,如果不这是btn的类型为button的话,点击子表按钮操作时,主表单也是会提交的. <button class="'+ n.btnClass +'" type="button" ng-click="operationRow(\''+meta.row+'\')">'  +<i class="'+ n.iClass +'"></i