如何通过jQuery AJAX获取JSON数据并读取product_price字段值？

核心错误点 #

• dataType配置错误：接口返回JSON格式数据，却配置为html，jQuery会将响应当作普通文本/HTML处理，若后端响应夹带多余空白、BOM头、注释或HTML片段，直接调用JSON.parse()会直接抛出解析错误，导致代码中断。
• 数据层级读取错误：接口返回的data字段是数组类型，结构为[{"product_price":"3000"}]，直接读取data_json.data拿到的是整个数组对象，不是你需要的3000这个价格值。

修复后代码 #

将dataType修改为json，jQuery会自动完成响应内容的JSON解析，不需要手动调用JSON.parse()，同时修正数据读取的层级即可：

$.ajax({
    type: "POST",
    dataType: 'json',
    url: '<?php echo base_url() . "index.php/product/getdataJson/" ?>' + product_id,
    data: {
        'product_id': product_id
    },
    success: function(data) {
        // 读取数组第一个元素的product_price属性
        const productPrice = data.data[0].product_price;
        document.getElementById("demo").innerHTML = productPrice;
    },
    error: function() {
        alert("请求失败");
    }
});

页面中的渲染标签不需要修改：

<p id="demo"></p>

排查提示 #

如果修改后仍然触发error回调，优先检查后端接口逻辑：

• 确保接口响应头的Content-Type为application/json
• 确保接口最终输出的是纯JSON字符串，没有夹带PHP报错、多余的HTML片段、前置/后置的空白输出等无关内容

内容的提问来源于stack exchange，提问作者kotakkecil