• 我们在使用ajax发送请求时一定要注意contentType设置是否正确
  • 发布于 1周前
  • 72 热度
    0 评论
  • 阳光
  • 1 粉丝 34 篇博客
  •   
在前后端开发中,接口请求的成功与否往往取决于请求参数和配置是否正确。在使用layui时,如果发送后端请求失败,排查过程中首先要确认接口路径、请求方法、参数格式等都正确。然而,有时候即便这些方面都没有问题,请求依然可能无法正确发送或响应,原因可能在于contentType设置不匹配。

例如,layui的table.render方法默认情况下不设置contentType属性。默认的contentType值会视情况发送表单格式数据,类似application/x-www-form-urlencoded。但是,如果后端期望接收JSON格式数据,这种默认配置就会导致请求不被正确处理,甚至可能被拒绝。为解决这个问题,可以显式指定contentType为application/json,从而告诉后端数据是以JSON格式发送的。
    // 以下是未配置`contentType`前的layui表格代码:
    var Monthly = table.render({
        elem: '#table', // 堆代码 duidaima.com
        url: "../url", //数据接口
        method: "post",
        where: {pageSize: 10, pageIndex: 0},
        height: "full-100",
        even: true, //开启隔行背景
        cols: [[ //表头
            { field: 'time', title: '时间'}
        ]],
    });
    // 在这段代码中,没有设置`contentType`,所以如果后端要求JSON格式的数据,这个请求会失败。为了确保后端能正确处理请求,可以设置`contentType`为`application/json`,如下所示:
    var tableReturn = table.render({
        elem: '#table',
        url: "../url", //数据接口
        method: "post",
        where: {pageSize: 10, pageIndex: 0},
        contentType: 'application/json', // 请求数据类型
        height: "full-100",
        even: true, //开启隔行背景
        cols: [[ //表头
            { field: 'time', title: '时间'}
        ]],
    });

类似的情况在使用$.ajax进行请求时也常见。通常,jQuery的$.ajax默认的contentType是application/x-www-form-urlencoded,但在发送JSON数据时,需要显式将参数对象用JSON.stringify序列化,并设置contentType为application/json。


在开始时还不相信ajax发送请求时要使用 JSON.stringify(params) 将参数序列化,在查阅chatGpt 后通过多次尝试才发现这是必需的。
   // 以下是未经修改的`$.ajax`请求代码:
    $.ajax({
        url: "../url",
        type: "post",
        data: {
            PageIndex: 0,
            PageSize: 10
        },
        success: function (res) {
        }
    })
    // 在这种配置下,参数以表单格式发送,如果后端期待JSON格式的数据,可能会导致解析错误。因此,使用`JSON.stringify`序列化参数,并配置正确的`contentType`:
    $.ajax({
        url: "../url",
        type: "post",
        data: JSON.stringify({
            PageIndex: 0,
            PageSize: 10
        }),
        contentType: 'application/json', // 请求数据类型
        dataType: 'json', // 响应数据类型
        success: function (res) {
        }
    })

总结

在ajax 请求时 contentType 类型 默认为 application/x-www-form-urlencoded 即是 表单的格式,可以通过以上方式配置contentType 设置 数据格式方便前后端联调数据,以完成各种功能集合,即应用。此修改后,前端发送的请求数据将符合后端期望的JSON格式,使得请求能够顺利到达并被正确解析。

用户评论