如何用jQuery Ajax展示JSON数据？我的代码无法正常运行求排查

嘿，我帮你排查了AJAX调用失败的问题，主要有几个关键问题需要修正，咱们一步步来看：

1. 错误回调的参数误用 #

你的error函数里写了console.log(data)，但这里的data根本没定义哦！jQuery的AJAX错误回调接收的是xhr、status、error三个参数，改成下面这样才能看到具体的错误信息，方便排查问题：

error: function(xhr, status, error) {
    console.log("请求失败啦：", status, error);
}

2. JSON数据结构处理错误 #

我查看了目标JSON文件，它的根结构是一个包含items数组的对象，不是直接的数组。你之前直接用$.each(data, ...)遍历，其实是在遍历根对象的属性，根本碰不到实际的车辆数据。得改成遍历data.items数组：

$.each(response.items, function(i, item) {
    // 拼接HTML的逻辑放在这里
});

3. HTML拼接的语法错误 #

你拼接的HTML里有好几处语法问题，会导致渲染失败：

• 重复嵌套了<div class="col-3 mb-3">标签，破坏了布局结构；
• 第一个<p>标签没有闭合；
• 把text-uppercase拼成了ext-uppercase，样式会失效。

我用模板字符串重构了HTML拼接部分，可读性更强也不容易出错：

html_to_append += `
    <div class="col-3 mb-3">
        <div class="text-uppercase">
            <p>${item.Name}</p>
            <p>${item.Price}</p>
        </div>
        <img class="image img-fluid" src="${item.photo}" />
        <p class="company">${item.Retailer}</p>
    </div>
`;

4. 明确指定数据类型 #

最好在AJAX配置里加上dataType: 'json'，明确告诉jQuery要把返回的内容解析成JSON对象，避免因为响应头的问题导致数据没被正确解析：

$.ajax({
    url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
    method: "GET",
    dataType: 'json', // 新增这一行
    // ... 其他配置
});

修正后的完整JS代码 #

$(function() {
    ajaxJS();
    function ajaxJS(e) {
        if (e) {
            e.preventDefault();
        }
        $.ajax({
            url: "https://raw.githubusercontent.com/RichmondDay/public/master/test_vehicle_inventory_data.json",
            method: "GET",
            dataType: 'json',
            success: function(response) {
                console.log(response);
                var html_to_append = '';
                $.each(response.items, function(i, item) {
                    html_to_append += `
                        <div class="col-3 mb-3">
                            <div class="text-uppercase">
                                <p>${item.Name}</p>
                                <p>${item.Price}</p>
                            </div>
                            <img class="image img-fluid" src="${item.photo}" />
                            <p class="company">${item.Retailer}</p>
                        </div>
                    `;
                });
                $("#items-container").html(html_to_append);
            },
            error: function(xhr, status, error) {
                console.log("请求失败：", status, error);
            }
        });
    }
});

你的HTML代码部分没有问题，保持原样就可以啦。

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