目录
application/x-www-form-urlencoded和application/json
application/x-www-form-urlencoded
一、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请求,发生第一次握手,第二次才是真正的发送的请求
- 将JSON对象序列化传递参 axios({ method: 'post', url: url, data: JSON.stringify(data) }
axios({ method: 'post', url: url, data: JSON.stringify(data) })
- 将数据转为 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); }, });