欢迎来到编程资源网!

Html

当前位置:主页 > 前端教程 > Html >

web实战项目遇到问题总结探索

时间:2019-02-02|栏目:Html|点击:

最近在写一个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转成对象

程序员资源社区

公众号回复:面试,领取Python,Java面试题和简历

上一篇:网站制作系列教程(三)--如何提高网站搜索排名?

栏    目:Html

下一篇:没有了

本文标题:web实战项目遇到问题总结探索

本文地址:http://www.python66.cn/qianduan/html/257.html

您可能感兴趣的文章

广告投放 | 文章投稿 | 版权申明

重要申明:本站所有的文章、图片、软件等仅用作学习交流

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:476430956 | 邮箱:476430956@qq.com

Copyright © 2019-2029 编程教程网 版权所有 Power by DeDe58