美文网首页
让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的一致

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