如何访问AJAX成功函数中接收的数据？附代码示例

嘿，我来帮你搞定这个问题！你已经成功接收到AJAX请求返回的数据了，只是不同的返回格式对应不同的访问方式，我给你分情况拆解：

情况1：返回的是纯文本或HTML内容 #

你当前的AJAX代码里设置了datatype:"text"，如果你的fetch.php输出的是纯文本（比如"搜索到5条结果"）或者HTML片段，那success回调里的data就是完整的返回内容：

• 你可以直接打印查看：console.log(data)，打开浏览器控制台（F12）就能看到具体内容
• 你现在写的$('#result').html(data)已经是把数据渲染到页面的正确方式，这其实就是在访问并使用数据啦

情况2：返回的是JSON格式数据（更常用的后端返回方式） #

如果你的fetch.php是用json_encode()输出的JSON数据（比如echo json_encode(['count' => 5, 'list' => ['苹果', '香蕉']]);），那需要调整一下AJAX配置，才能像访问对象一样操作数据：

1. 把AJAX里的datatype改成**dataType:"json"**（注意是驼峰写法，jQuery对大小写不敏感，但规范写法是驼峰）
2. 在success回调里，就可以通过对象属性访问具体字段了，示例代码：

$.ajax({
    url:"fetch.php",
    method:"POST",
    data:{search:txt},
    dataType:"json", // 改成json类型
    success:function(data){
        // 假设返回的是{count: 5, list: ['苹果', '香蕉']}
        console.log("找到" + data.count + "条结果"); // 输出：找到5条结果
        console.log(data.list[0]); // 输出：苹果
        // 把数据渲染到页面的示例
        let htmlStr = `<p>共找到${data.count}条结果</p><ul>`;
        data.list.forEach(item => {
            htmlStr += `<li>${item}</li>`;
        });
        htmlStr += "</ul>";
        $('#result').html(htmlStr);
    }
});

小技巧：先确认返回数据的类型 #

不确定fetch.php返回的是什么？打开浏览器开发者工具（按F12），切换到Network标签，输入关键词后找到fetch.php的请求，查看Response标签页的内容，就能清楚看到返回的是文本、HTML还是JSON了。

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