jquery和axios使用传递参数的两种方式表现形式

目录

application/x-www-form-urlencoded和application/json

Jquery

application/x-www-form-urlencoded

application/json  

vue中axios


一、jquery:

application/x-www-form-urlencoded和application/json

Jquery

使用JQ的ajax需要设置Content-Type,Content-Type的设置有以下几种常用的

"Content-Type": "application/x-www-form-urlencoded" // 适用于大部分情况
"Content-Type": "application/json"      //适用于复杂JSON数据的提交
"Content-Type": "multipart/form-data"   // 适用于文件上传

application/x-www-form-urlencoded

application/x-www-form-urlencoded是jq ajax默认的提交方式,当不写contentType时即是此种方式,代表使用表单形式提交。

$.ajax({
   type: "POST",
   url: url,
   contentType: "application/x-www-form-urlencoded", 
   dataType: "json", //表示返回值类型,不必须
   data: {ids: '1'},  //提交的参数
   success: function (jsonResult) {
       console.log(jsonResult);
   }
});

提交数据的示例:

jquery和axios使用传递参数的两种方式表现形式

application/json  

vue中axios

问题描述

今天跟后台调试接口,使用jquery就可以访问后台的服务,但是使用axios就不行,说传递参数有误,并且返回400和跨域错误

Content-Type:application/json. 会发送两次请求第一次是options请求,发生第一次握手,第二次才是真正的发送的请求

  1. 将JSON对象序列化传递参 axios({ method: 'post', url: url, data: JSON.stringify(data) }
    axios({
        method: 'post',
        url: url,
        data: JSON.stringify(data)
    })
  2. 将数据转为 key=value 的形式
    //npm安装qs 借助node中qs序列化参数
    import qs from 'qs'
    
    //下面的写法还是会报错
    http({
        method: 'post',
        url: url,
        data: qs.stringify(data)
    })
    
    //正确的写法要设置请求头 'Content-Type': 'application/x-www-form-urlencoded'
    http({
        method: 'post',
        url: 'http://127.0.0.1:10111/heartbeat',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        data: qs.stringify(data)
    })
    

    项目中的示例:

    //import qs from "qs";     使用qs序列化参数   
    
    
    var that = this;
          let data = {};
          data["grant_type"] = "password";
          data["username"] = "admin";
          data["password"] = "admin";
          $.ajax({
            type: "POST",
            url: this.global.httpOauth + "accessToken",
            contentType: "application/x-www-form-urlencoded",
            data: qs.stringify(data),
            dataType: "json",
            beforeSend: function (xhr) {
              xhr.setRequestHeader(
                "Authorization",
                "xxxxxxxxxxxx"
              );
            },
            success: function (data) {
              if (data == null) {
                localStorage.removeItem("accessToken");
               
                });
              } else {
                if (data.status == "SUCCESS") {
               //成功后的操作
                } else if (data.status == "FAIL") {
                  localStorage.removeItem("accessToken");
                  console.log("token 失效");
                }
              }
            },
            error: function (error) {
              console.error(error);
            },
          });

     

 

上一篇:qs 与axios


下一篇:python urllib