ajax的完整写法——success/error/complete+then/catch/done+设置请求头两种方法——基础积累

1.完整写法——success/error/complete

1.1 GET/DELETE——query传参

$.ajax({url: "/bigscreen/home/getDeptRiskInfoById",async: false,//是否异步，如果开启，则接口同步进行type: "GET",//大写的GET等同于小写的getdata: {deptId: id,},headers: { "token": token },//设置请求头success: function (data) {//}
});

下面介绍设置请求头的第二种方法：

$.ajax({url: "/api/SchemeMain?id=" + row.id,type: "delete",beforeSend: (request) => {request.setRequestHeader("operator", encodeURIComponent(this.userName));request.setRequestHeader("operatorId", this.userId);},xhrFields: {withCredentials: true},success: res => {if (res.success) {this.$message.success('删除成功');} else {this.$message.error(res.message);}},complete: () => {}
})

1.2 GET/DELETE——JSON对象传参

$.ajax({type: "get",url: '/ReportForm/ReportForm/ReceiptDataExport',contentType: 'application/json',dataType: 'json',async: false,data: { start: this.input.StartTime, end: this.input.EndTime },success: function (data) {if (data.Status) {//}},error: function (xhr) {console.log(xhr.responseText);}});

1.3 PUT/POST——JSON对象传参

下面代码用到了layui中的部分代码，可忽略。

$.ajax({type: "PUT",//PUT一般是修改数据，POST一般是添加数据url: url,data: JSON.stringify(obj), //格式化数据contentType: "application/json", //指定格式为json,对应postman中的rawdataType: "json",//这个也是success: function (res) {console.log(res);if (res.success) {layer.msg('修改成功');parent.layer.close(1);window.parent.location.reload();} else {layer.msg(res.message)}},complete: function () {var index = parent.layer.getFrameIndex(window.name); //关闭弹层parent.layer.close(index);}
});

2.简化写法——then/catch/done

2.1 GET/DELETE——query传参

$.get("/ReportForm/ReportForm/PeopleOutSku?StartTime=" + startTime + "&EndTime=" + endTime).then(res => {this.dataLoading = false;if (res.Status) {this.buttominfo = res.Data;}
})

2.2 PUT/POST——JSON对象传参

$.post("CreateMixOnShelfMap", { input: ids, createType: val }).then(function (data) {this.mixLoading = false;if (data.Success) {that.$message({message: "已经为选中的物料分配好对应的库位,请使用PDA上架操作.",type: "success"});} else {that.$message({message: data.Message,type: "warning"});that.mixin.visible = false;}that.allLoading = false;that.partLoading = false;that.getMixinList();});
}).catch(() => {this.$message({type: 'info',message: '操作已取消'});this.allLoading = false;this.partLoading = false;this.getMixinList();
}).done(()=>{//
});