我的网站：

Python爬虫人工智能学习教程​www.python88.cn

最近在写一个django的web项目，后端代码基本都已经写好了，主要是前端，以前学过一段前端，只是对一些基本的方法知道，但还有很多东西不熟练，问题是在遇到表单数据时候，如何对参数整体打包发送后端接口，查阅相关资料发现一些知识点和方法，分享给大家，虽然我发现技术类文章阅读量比标题党文章低的多，但是还是要坚持分享原创技术文章，能多一个粉丝学到知识，对我文章肯定，我也觉得比几千的阅读量感觉心里更有成就感

我们今天要的效果是点击按钮，可以显示输入框中键值对，显示在页面，以此来说明参数较多的情况下如何整体打包和进行循环遍历

比如以下是我简单写的前端代码，代码结构是form表单，嵌套多个input输入框，username、password、city、age、sex是键，张三、123456、上海、100、男分别是键对应的值

下图是对应到浏览器显示的样式，我们实际开发中需要做的就是传参数到后端，我们需要将该参数打包成以下数据结构，类似python中的列表和字典，在本例子中，打包方式有两种，分别对应以下两种数据结构

数据结构一：数组嵌套对象[{},{},{},{},{}]

[{name: "username", value: "张三"} , {name: "password", value: "123456"}, {name: "city", value: "上海"} , {name: "age", value: "100"}, {name: "sex", value: "男"} ]

数据结构二：直接构造成对象{k:v,k:v,k:v,k:v,k:v}

{username: "张三", password: "123456", city: "上海", age: "100", sex: "男"}

下面会分别将构造成这两种数据结构的区别和用法

方式一：

当然我不排除你自己一个个手敲，写进去作为参数传递，但是如果我有很多个输入框，你在一个个去手写，构造参数显然是很不现实的，那该怎么办？jqury给我们提供的有方法

serializeArray()：将表单数据整体打包成一个数组（类似python中的列表）

接下来开始看前端代码：

1、直接选择form表单，serializeArray()，进行打包，console.log为在空台输出，类似python中print

2、在控制台console中查看我们打包的数据，发现是一个数组包含了5个对象，（当然python中说法是列表里面包含5个字典）

3、接下来，因为我们要在网页输出内容，所以正常的思路就是遍历数组，得到每一个对象，再通过对象的键获取对象的值，就能拿到数据，接下来我们就这么做，代码如下

jQuery给我们封装了$.each()方法可以进行遍历，传入的参数是遍历的数组params,function中的参数i是遍历时候的下标，obj是遍历的每一个对象，最后我们在输出的时候，通过obj.name获取键，obj.value获取值，即可拿到数据，正确输出

方式二：

大家可以思考下，我们需要做的一步是将[{name: "username", value: "张三"} , {name: "password", value: "123456"}, {name: "city", value: "上海"} , {name: "age", value: "100"}, {name: "sex", value: "男"} ] 转换成 {username: "张三", password: "123456", city: "上海", age: "100", sex: "男"}，该怎么做？

我们也可以在python中想下用什么方法？可以用字典推导式一步完成

那么在js中怎么做呢？我们用map方法

map方法：接受的x为数组中遍历的对象，通过给对象设置键值对，获取我们想要的数据结构

然后在遍历的时候，这次我们的param就不是数组，而是对象{username: "张三", password: "123456", city: "上海", age: "100", sex: "男"}，function的两个参数也不是下标和对象了，而是键和值，代码中可以直接写key和value

最后同样能成功输出

总结：

一般在向后端传输的时候，我们需要传json数据，那么我们就会用方式二的写法，将序列化得到的数组再用map转成对象