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的更多相关文章

  1. Form表单中method为get和post的区别

    序,form表单中的方法分为get和post,但你都知道他们之间的区别吗? Form表单中method为get和post的区别: 例子如下,有个Form表单. <form action=&quo ...

  2. jQuery中设置form表单中action值的方法

    jQuery中设置form表单中action值的方法 (2011-03-17 10:18:19) 转载▼ 标签: 杂谈   html代码: <form id="myFormId&quo ...

  3. form表单中button按钮返回上一页解决办法

    解决Form中button按钮不好用的问题解决办法. 方法一: 1.在Form表单标签中国增加一个属性,如下图,红框处 2.返回按钮样式 3.onclick方法需要跳转的页面,遮挡处为需要返回的页面 ...

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

    form表单中如果存在button的话,有可能会出现一个问题:点击button,触发了页面的自动刷新事件. 原因是因为<button>标签默认的类型是submit,即默认的button点击 ...

  5. jQuery中设置form表单中action的值的方法

    下面介绍在jQuery中设置form表单中action的值的方法. $("#myFormId").attr("action", "userinfo.s ...

  6. jQuery中设置form表单中action值与js有什么不同。。。。

    jQuery中设置form表单中action值与js有什么不同.... HTML代码如下: <form action="" method="post" i ...

  7. jsp中的form表单中的 id和name有什么区别了

    <form action="./system/WebServer_webServerLogin" method="post" id="login ...

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

    Form表单中的action路径问题,form表单action路径 热度5 评论 50 www.BkJia.Com  网友分享于:  2014-08-14 08:08:01     浏览数44525次 ...

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

    form表单中action的地址格式 “__URL__/edit/{xxx}”,大括号内的 “xxx” 就是变量名,主要功能是结合table组件一起使用. 下图中的删除.编辑.修改密码都是用了url变 ...

随机推荐

  1. js replace(a,b)之替换字符串中所有指定字符的方法

    var str = 'abcadeacf'; var str1 = str.replace('a', 'o'); alert(str1); // 打印结果: obcadeacf var str2 = ...

  2. JavaScript DOM编程艺术-学习笔记(第三章、第四章)

    第三章: 1.js的对象分为三种:①用户自定义对象 ② 内建对象(js提供的对象) ③宿主对象(js寄宿的环境-浏览器,提供的对象) 2.文档是由节点组成的集合,即dom树,html元素是根元素,是唯 ...

  3. jQuery(5)——动画

    jQuery中的动画 [show()方法和hide()方法] 在HTML文档中,为一个元素调用hide()方法,会将该元素的display样式改为“none”,show()方法将元素的display样 ...

  4. java 图形界面 邮件系统

    将后台的邮件系统使用javaGUI编程来实现,让我们可以在桌面端直接控制邮件的收发功能. 一.实现邮箱的登陆功能 邮件系统使用smtp协议发送邮件,使用POP3协议或者IMAP协议来收取邮件.SMTP ...

  5. hadoop 2.2.0 关于map和reduce的个数的设置

    关于hadoop中的map过程,我的理解是每一个map系统会开启一个JVM进程来处理,map之间相互并行,map函数内串行.这样的想法是否正确? 由于想在hadoop集群上算一个初始输入数据不多,但是 ...

  6. oracle 字段类型详解

    CHAR 固定长度字符串 最大长度2000 bytes VARCHAR2 可变长度的字符串 最大长度4000 bytes 可做索引的最大长度749 NCHAR 根据字符集而定的固定长度字符串 最大长度 ...

  7. JQ中的clone()方法与DOM中的cloneNode()方法

    JQ中的clone()方法与DOM中的cloneNode()方法 cloneNode()定义和用法 cloneNode()方法创建节点的拷贝,并返回该副本. 语法: node.cloneNode(de ...

  8. 超好:web app变革之rem

    感谢你的阅读,本文由 腾讯ISUX 版权所有,转载时请注明出处,违者必究,谢谢你的合作.注明出处格式:腾讯ISUX (https://isux.tencent.com/web-app-rem.html ...

  9. 为什么PHP(CLI)同一个错误信息会打印两次?

    第一个信息是display_errors输出的,在fpm环境下输出到浏览器那里,而在CLI环境下会打印到屏幕上. display_errors = On 第二个信息是log_errors输出的. lo ...

  10. 2016 SyScan360 国际前瞻信息安全会议 多角度探讨信息安全

    SyScan360国际前瞻信息安全会议由与中国第一大互联网安全公司-360公司与SyScan前瞻信息安全技术年会(TheSymposiumonSecurityforAsiaNetwork,以下简称Sy ...