当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的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传递给后台的更多相关文章

  1. koa 基础(十一)koa 中 koa-bodyparser 中间件获取表单提交的数据

    1.app.js /** * koa 中 koa-bodyparser 中间件获取表单提交的数据 * 1.npm install --save koa-bodyparser * 2.引入 const ...

  2. koa 基础(十)原生node.js 在 koa 中获取表单提交的数据

    1.app.js // 引入模块 const Koa = require('koa'); const router = require('koa-router')(); /*引入是实例化路由 推荐*/ ...

  3. 在Express 中获取表单请求体数据

    在Express 中获取表单请求体数据 获取 GET 请求参数 获取 POST 请求体数据 安装 配置 获取 GET 请求参数 Express 内置了一个 API , 可以直接通过 req.query ...

  4. 获取表单提交的数据getParameter()方法

    请求对象:request public String getParameter(String name); 通过request的getParameter(String name)方法获取 表单里面的n ...

  5. springmvc后台获取表单提交的数据——@ModelAttribute等方式

    1.通过注解ModelAttribute直接映射表单中的参数到POJO.在from中的action写提交的路径,在input的name写参数的名称. package com.demo.model; p ...

  6. jQuery—获取表单标签的数据值

    获取设置input标签的值 <input class="form-control" type="text" id="username" ...

  7. (五)springmvc之获取表单提交的数据

    8.1:使用Request <form method="post" id="form1" action="<%=request.getCo ...

  8. 在html中如何获取表单提交的数据

    a.html: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www ...

  9. springmvc接受表单多条数据的值

    点击下面链接查看具体内容: http://blog.csdn.net/lutinghuan/article/details/46820023

随机推荐

  1. UML 中extend和include的区别

    在UML用例图中有两种关系——包含和扩展,容易混淆,下面通过一张表来区别一下这两种关系.

  2. 正则表达式入门+实战(c#实现)

    如果有人和你说,如果不将字符串转换为数字,你要如何判断字符串是否由全数字组成?把字符串拆成char数组,然后放入一个循环,来判断每个char是否为数字?那你要如何判断手机号是否合法?IP是否合法呢?把 ...

  3. yum安装puppet

    yum安装puppet author:headsen chen     2017-10-31  17:09:35 个人原创,转载请注明作者和出处,否则依法追究法律责任: 环境:centos 6.5 [ ...

  4. 基于I2C总线的MPU6050学习笔记

    MPU6050学习笔记 1. 简述 一直想自己做个四轴飞行器,却无从下手,终于狠下决心,拿出尘封已久的MPU6050模块,开始摸索着数据手册分析,一步一步地实现了MPU6050模块的功能,从MPU60 ...

  5. 微信小程序开发之--”emplate模板“的应用

    第一步:定义模板 ①:新建一个template文件夹用来管理项目中所有的模板(本文案例定义文件夹名为:temp): ②.新建一个wxml文件来定义模板(本文案例定义文件夹名为:temp.wxml): ...

  6. C语言第二次博客作业---分支结构

    一,PTA实验作业 题目1.计算分段函数 本题目要求计算下列分段函数f(x)的值: 1.实验代码 double x,result; scanf("%lf",&x); if( ...

  7. 面试题中遇到的算法与js技巧

    近一周在忙着面试,本月第一次更博,甚是想念. 基本上大公司都会要求一些算法或者数据结构类的东西,这方面自己还不是很精通,只能一步一个脚印来积累了. 1.查询字符串获取对象数据,可自行根据需求选择格式, ...

  8. JAVA 新手注意事项

    1.  System.exit(0);  强行关闭虚拟机         2.   System.out.println("*")     输出一个*并换行    (没后面的ln表 ...

  9. 笔记:Spring Cloud Hystrix 异常处理、缓存和请求合并

    异常处理 在 HystrixCommand 实现的run方法中抛出异常,除了 HystrixBadRequestException之外,其他异常均会被Hystrix 认为命令执行失败并触发服务降级处理 ...

  10. WinSock 异步I/O模型

    如果你想在Windows平台上构建服务器应用,那么I/O模型是你必须考虑的. Windows操作系统提供了五种I/O模型,分别是选择(select)模型,异步选择(WSAAsyncSelect)模型, ...