当表单中有多条数据需要向后台传递时,一个一个的获取显然是不可取的办法,可以借助表单的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. 基于 HTML5 WebGL 的 3D 机房

    前言 用 WebGL 渲染的 3D 机房现在也不是什么新鲜事儿了,这篇文章的主要目的是说明一下,3D 机房中的 eye 和 center 的问题,刚好在项目中用上了,好生思考了一番,最终觉得这个例子最 ...

  2. java 流详解

    流在Java中是指计算中流动的缓冲区. 从外部设备流向中央处理器的数据流成为“输入流”,反之成为“输出流”. 字符流和字节流的主要区别: 1.字节流读取的时候,读到一个字节就返回一个字节:字符流使用了 ...

  3. 从AngularJS2谈到前台开发工程化

    才刚刚对AngularJS有些了解,又听闻AngularJS2早就铺天盖地了,AngularJS3刚刚夭折,AngularJS4今年已经发布了,还是学习先下AngularJS2吧,据说更加适合以移动为 ...

  4. Django用户登录与注册系统

    一.创建项目 1.1.创建项目和app python manage.py startproject mysite_login python manage.py startapp login 1.2.设 ...

  5. Python爬虫获取异步加载站点pexels并下载图片(Python爬虫实战3)

    1. 异步加载爬虫 对于静态页面爬虫很容易获取到站点的数据内容,然而静态页面需要全量加载站点的所有数据,对于网站的访问和带宽是巨大的挑战,对于高并发和大访问访问量的站点来说,需要使用AJAX相关的技术 ...

  6. centos文件系统变为只读的解决处理

    简单粗暴:重启 Linux系统重启或无故变为只读造成网站无法正常访问的简单临时的做法: 一. 1.mount: 用于查看哪个模块输入只读,一般显示为: /dev/hda1 on / type ext3 ...

  7. Matlab绘图基础——绘制等高线图

    % 等高线矩阵的获取 C = contourc(peaks(20),3);              % 获取3个等级的等高线矩阵 % 等高线图形的绘制 contour(peaks(20),10);c ...

  8. 以太坊开发DApp入门教程——区块链投票系统(一)

    概述 对初学者,首先要了解以太坊开发相关的基本概念.   学习以太坊开发的一般前序知识要求,最好对以下技术已经有一些基本了解: 一种面向对象的开发语言,例如:Python,Ruby,Java... 前 ...

  9. ConcurrentHashMap、synchronized与线程安全

    明明用了ConcurrentHashMap,可是始终线程不安全, 下面我们来看代码: public class Test40 { public static void main(String[] ar ...

  10. Beta总结

    45°炸 031502601 蔡鸿杰 031502604 陈甘霖 031502632 伍晨薇 一.写在Beta项目前 Beta 凡 事 预 则 立 二.GitHub传送门 Beta冲刺重要版本 三.用 ...