html调用后端接口（ajax）

加蓓努力我先飞

已于 2022-07-08 16:34:14 修改

阅读量7.1k

点赞数 2

分类专栏：前端开发文章标签： ajax html javascript

于 2022-06-29 16:53:10 首次发布

本文链接：https://blog.csdn.net/ingenuou_/article/details/125525134

版权

前端开发专栏收录该内容

92 篇文章 4 订阅

订阅专栏

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数据需要改一下

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