我的网站: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转成对象