1.此处需要注意this指向
//查询列表
queryData: function() {
console.log("查询")
let that = this
$.ajax({
type: "POST",
url: '/maturity/getByOfficeId?year=' + this.ruleForm.year + '&officeId=' + comId,
dataType: "json",
async: false,
success: function(res) {
console.log("result111111", res)
let getData = res.data
that.addForm = getData
},
error: function (xhr, status, error, result, response) {
var tip = xhr.responseJSON ? xhr.responseJSON.message : (val == 'save' ? (that.dialogTitle == "创建" ? '创建失败' : '修改失败') : '提交失败')
that.$message.error(tip);
}
});
},
2.application/json
contentType一般为默认的application/x-www-form-urlencoded，这次post请求后台改成了为application/json
data: JSON.stringify(this.addForm),
data数据需要改一下文章来源地址https://www.toymoban.com/news/detail-616349.html
$.ajax({
type: "POST",
url: '/maturity/submit',
dataType: "json",
data: JSON.stringify(this.addForm),
contentType: 'application/json;charset=UTF-8',
// contentType:'application/x-www-form-urlencoded',
async: false,
success: function(res) {
console.log("保存提交", res)
}
});
文章来源：https://www.toymoban.com/news/detail-616349.html
到了这里，关于html调用后端接口（ajax）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术12（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/793019-1.png)
![[HTML]Web前端开发技术9（HTML5、CSS3、JavaScript ）——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/777294-1.png)
![前端调用后端接口，导出excel文件打开显示[object object]](https://imgs.yssmx.com/Uploads/2024/04/852401-1.png)
![[HTML]Web前端开发技术7（HTML5、CSS3、JavaScript ）CSS的定位机制——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/755631-1.png)
![[HTML]Web前端开发技术6（HTML5、CSS3、JavaScript ）DIV与SPAN，盒模型，Overflow——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/756611-1.png)
