快速获取表单多条数据,使用ajax传递给后台
当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的serialize()方法获取。
HTML:
<form id="form">
<table>
<tr>
<td>姓名</td>
<td>
<input type="text" name="name" value="张三" />
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="male" checked />男
<input type="radio" name="sex" value="female" />女
</td>
</tr>
<tr>
<td>地区</td>
<td>
<select name="area">
<option value="heping" selected>和平区</option>
<option value="nankai">南开区</option>
<option value="xiqing">西青区</option>
<option value="hexi">河西区</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby[]" value="movie" checked />电影
<input type="checkbox" name="hobby[]" value="music" checked/>音乐
<input type="checkbox" name="hobby[]" value="basketball" />篮球
</td>
</tr>
<tr>
<td>个人介绍</td>
<td>
<textarea name="intro">个人介绍一下吧</textarea>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="提交" id="submit" />
</td>
</tr>
</table>
</form>
Javascript:
$(function(){
$("#submit").click(function(){
var form=$("#form");
var data=getFormData(form);
$.ajax({
//注意测试一下传输的data数据是js对象还是json对象格式
})
})
// 获取表单数据
function getFormData(form){
var data=form.serialize();
data=decodeURI(data);
//name=张三&sex=male&area=heping&hobby[]=movie&hobby[]=music&intro=个人介绍一下吧
var arr=data.split("&");
//["name=张三", "sex=male", "area=heping", "hobby[]=movie", "hobby[]=music", "intro=个人介绍一下吧"]
var item,key,value,newData={};
for(var i=0;i<arr.length;i++){
item=arr[i].split("=");
key=item[0];
value=item[1];
if(key.indexOf("[]")!=-1){
key=key.replace("[]","");
if(!newData[key]){
newData[key]=[];
}
newData[key].push(value);
}else{
newData[key]=value;
}
}
return newData;
//{name: "张三", sex: "male", area: "heping", hobby: (2) ["movie", "music"], intro: "个人介绍一下吧"}
}
})
快速获取表单多条数据,使用ajax传递给后台的更多相关文章
- koa 基础(十一)koa 中 koa-bodyparser 中间件获取表单提交的数据
1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...
- koa 基础(十)原生node.js 在 koa 中获取表单提交的数据
1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...
- 在Express 中获取表单请求体数据
在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...
- 获取表单提交的数据getParameter()方法
请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的n ...
- springmvc后台获取表单提交的数据——@ModelAttribute等方式
1.通过注解ModelAttribute直接映射表单中的参数到POJO.在from中的action写提交的路径,在input的name写参数的名称. package com.demo.model; p ...
- jQuery—获取表单标签的数据值
获取设置input标签的值 <input class="form-control" type="text" id="username" ...
- (五)springmvc之获取表单提交的数据
8.1:使用Request <form method="post" id="form1" action="<%=request.getCo ...
- 在html中如何获取表单提交的数据
a.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...
- springmvc接受表单多条数据的值
点击下面链接查看具体内容: http://blog.csdn.net/lutinghuan/article/details/46820023
随机推荐
- Linux-Centos7----安装Python的psutil模块插件
# wget https://pypi.python.org/packages/source/p/psutil/psutil-2.1.3.tar.gz # tar zxvf psutil-2.1.3. ...
- 负载均衡,会话保持,session同步(转)
转自:http://bbs.linuxtone.org/thread-18212-1-1.html 一,什么负载均衡一个新网站是不要做负载均衡的,因为访问量不大,流量也不大,所以没有必要搞这些东西.但 ...
- Symbol(第6种基本数据类型)
构造函数 不能使用构造函数,只能当成平常的方法使用 new Symbol()//VM372:1 Uncaught TypeError: Symbol is not a constructor 参数:不 ...
- Maven-09: 在线插件信息
仅仅理解如何配置使用插件是不够的.当遇到一个构建任务的时候,用户还需要知道去哪里寻找合适的插件,以帮助完成任务.找到正确的插件之后,还要详细了解该插件的配置点.由于Maven的插件非常多,而且这其中的 ...
- npm包使用语义化版本号
npm 采用语义版本管理软件包.所谓语义版本,就是指版本号为a.b.c的形式,其中a是大版本号,b是小版本号,c是补丁号. 一个软件发布的时候,默认就是1.0.0版.如果以后发布补丁,就增加最后一位数 ...
- 【Python】 迭代器&生成器
迭代器 任何一个类,只要其实现了__iter__方法,就算是一个可迭代对象.可迭代对象的__iter__方法返回的对象是迭代器,迭代器类需要实现next方法.一般来说,实现了__iter__方法的类肯 ...
- #Python3.6.2(32位) pip安装 和 pygame 环境配置
#首先确认电脑已经安装python ,可通过在命令行下 执行 python --version确认. 1. 到 https://pypi.python.org/pypi/setuptools/ 下载 ...
- RxJS -- Subscription
Subscription是什么? 当subscribe一个observable的时候, 返回的就是一个subscription. 它是一个一次性对象(disposable), 它有一个非常重要的方法 ...
- javaScript设计模式 -- 灵活的javaScript语言
因为好长时间的懒惰和懈怠,好久没有更新文章了,从现在开始我会按时更新一些自己总结的一些知识,和研究的东西,希望能让大家从我这里学到一点点的知识. 本文参考了张荣铭的javascript设计模式一书,算 ...
- java多线程的(一)-之java线程的使用
一.摘要 每天都和电脑打交道,也相信大家使用过资源管理器杀掉过进程.而windows本身就是多进程的操作系统 在这里我们理解两组基本概念: 1.进程和线程的区别???? 2.并行与并发的区别???? ...