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);
   }
});

提交数据的示例：

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);
           },
         });