美文网首页
让axiox发送给服务器的数据与JQ的一致

让axiox发送给服务器的数据与JQ的一致

作者: 银票大王 | 来源:发表于2018-06-12 20:46 被阅读0次

早期用JQ写前端时,使用$.ajax方法发送数据给服务端,假设数据格式为一个javascript对象:

{ user:'abc',phone:'13000000000' }

发送代码为:

$.ajax({
   type: "GET",
   url: "some.php",
   data:{ user:'abc',phone:'13000000000' },
   success: function(msg){}
});

如果发送类型为GET,则传送到服务器的数据为如下格式并会附在url上:
user=abc&phone=13000000000
JQ会将数据进行序列化处理
如果发送类型为post,默认情况下contentType的类型为 (application/x-www-form-urlencoded),数据同样会被序列化处理但不会被附在url上:

$.ajax({
   type: "POST",
   url: "some.php",
   data: { user:'abc',phone:'13000000000' },
   success: function(msg){}
});

这时候打开控制台查看request的header,可以看到GET请求的数据出现在
Query String Parameters属性中,而POST请求的数据出现在Form Data属性中


后来使用axiox时,GET请求发送的数据放在params属性里,默认params会进行序列化处理因此不用修改什么。

axios({
  method: 'get',
  url: 'some.php',
  params:{ user:'abc',phone:'13000000000' }
});

主要是post请求,axiox的POST请求发送的数据放在data属性里,默认情况下contentType的类型为(application/json;charset=UTF-8),打开控制台查看request的header可以看到数据体现在Request Payload中,一般后台不能直接获取到所需数据,因此若想要使axiox跟JQ一致的话,就需要对传送的数据进行序列化,做法非常简单,因为axios已经内置了序列化模块,首先引入

import qs from 'qs'

然后将数据用qs处理后再赋值:

axios({
  method: 'post',
  url: 'some.php',
  data:qs.stringify({ user:'abc',phone:'13000000000' })
});

这时候再打开控制台查看header,就会发现数据已经出现在Form Data属性中,并且contentType的类型变成了(application/x-www-form-urlencoded)
,注意如果仅仅将contentType修改为(application/x-www-form-urlencoded)而不对数据进行序列化的话,数据就会整个字符串被当成Form Data的键值。

注1:如果是发送图片文件等二进制数据,则不需要这样进行序列化
注2:如果js对象中存在镶套的数组或对象,序列化的结果十有八九不是我们想要的,此问题待续

相关文章

  • 让axiox发送给服务器的数据与JQ的一致

    早期用JQ写前端时,使用$.ajax方法发送数据给服务端,假设数据格式为一个javascript对象: 发送代码为...

  • MySQL 主从数据库设置

    主从数据库设置 1.让主服务器数据库与副服务器数据库一致 2.配置主服务器 3.配置副服务器 问题

  • Servlet和Http响应

    Http协议 请求消息:客户端发送给服务器端的数据数据格式:请求行请求头请求空行请求体 响应消息:服务器端发送给客...

  • iOS 同步下载&异步下载

    一、数据的网络请求 1.请求Request:客户端将数据发送给服务器,根据服务器协议通知服务器,要求服务器做出数据...

  • PHP

    php操作数据库web服务器:1,静态服务器:html css js jq 图...

  • 2019-07-03

    web服务器基础知识 http协议 浏览器发送给服务器的数据 (这些数据是有格式的,这就是http协议)浏...

  • jquery ajax contentType

    contentType 设置发送给服务器的格式 dataType 设置收到服务器返回的数据格式 默认值为appli...

  • PHP知识点

    注意:拼接不能用 1.数据库服务器 2.web服务器:静态web服务器:html 、css、 js、 jq 、图片...

  • 7.8 keep copies fresh 保持缓存内容新鲜

    客户端缓存的副本可能会与服务器上的文档不一致,因为这些文档可能会随时间发生变化。所以缓存的数据与服务器数据保持一致...

  • Cookie 和 Session

    Cookie 解释 当客户端首次访问服务器时,由服务器发送给客户端的一份小数据。当客户端再次访问服务器时,将此数据...

网友评论

      本文标题:让axiox发送给服务器的数据与JQ的一致

      本文链接:https://www.haomeiwen.com/subject/mveaxftx.html