全国旗舰校区

不同学习城市 同样授课品质

北京

深圳

上海

广州

郑州

大连

武汉

成都

西安

杭州

青岛

重庆

长沙

哈尔滨

南京

太原

沈阳

合肥

贵阳

济南

下一个校区
就在你家门口
+
当前位置:首页  >  技术干货

web前端技巧|前端请求后端数据的三种方式

发布时间:2021-05-31 09:01:00
发布人:小千

      在前后端分离的开发项目中,前后端联调的时候会出现这样那样的问题,尤其是在调取数据的程序上面,有时候前端给的前端给到后端的明明是正确的但就是无法拿到正确的数据,下面小千就来给大家详解一下常见的三种数据传输方式。

      1、地址栏传输数据

      1)、query string Parameters:

      当请求方式是get时,浏览器会使用查询字符串的方式进行传递数据,即:query string Parameters

      查询字符串的规则:请求参数使用 URL地址和“问号传参“ 的方式进行传递----用问号把url和请求参数分开。

      请求参数的格式:以键值对的方式体现,多个键值对之间用&隔开。

      假设:请求地址为 newsList.php。请求参数是pageIndex和pageCount。那么,请求的格式为:newsList.php?pageIndex=1&pageCount=10;如下图,请求方式为get,在chrome浏览器的network里看到的是:query string Parameters

1

      2、 请求体中传输数据

      当请求方式不是get(大部分情况是post或put)时,那么请求的数据不是在url上,而是在请求体里。请求体的英文就是:request payload。但是chrome浏览器针对不同的content-type有做了区分,分别是formData和request payload。

      1)、formData

      content-type的值是" application/x-www-form-urlencoded"或者 multipart/form-data; boundary=----WebKitFormBoundaryBoMA1XQDUpwpxKQg 时,那么,就是用的是formData的格式传递数据

2

3

      2)、request payload

      content-type的值是" text/plain"或者"application/json" 时,那么,就是用的是request payload的格式传递数据

4

5

      附:默认的数据格式

      1、传统的ajax请求时候,Content-Type默认为"文本"类型。

      2、传统的form提交的时候,Content-Type默认为"Form"类型( application/x-www-form-urlencoded )

      3、axios传递字符串的时候,Content-Type默认为"Form"类型( application/x-www-form-urlencoded )

      4、axios传递对象的时候,Content-Type默认为"JSON"类型(( application/json)

      以上就是前端三种传输数据的方式了,最后欢迎大家来到千锋web前端培训班参加我们的前端培训课程,全程名师面授,现在咨询还有全套前端学习视频教程免费领取,赶紧来找在线老师咨询一下吧。

相关文章

小软件公司如何做好版本管控和缺陷管理?

小软件公司如何做好版本管控和缺陷管理?

2023-10-14
MySQL的自增ID用完了应该怎么办?

MySQL的自增ID用完了应该怎么办?

2023-10-14
数据库规定主键值不能重用的目的是什么?

数据库规定主键值不能重用的目的是什么?

2023-10-14
oracle怎么样实现数据库跨机房同步?

oracle怎么样实现数据库跨机房同步?

2023-10-14

最新文章

常见网络安全面试题:Windows常用的命令有哪些?

常见网络安全面试题:Windows常用的命令有哪些?

2023-10-09
常见网络安全面试题:根据设备告警如何展开排查?

常见网络安全面试题:根据设备告警如何展开排查?

2023-10-09
常见网络安全面试题:mysql加固呢?(数据库加固)

常见网络安全面试题:mysql加固呢?(数据库加固)

2023-10-09
常见网络安全面试题:windows和linux加固?(操作系统加固)

常见网络安全面试题:windows和linux加固?(操作系统加固)

2023-10-09
在线咨询 免费试学 教程领取