如何在AJAX成功回调中获取PHP返回的JSON编码数组元素

嘿，你已经离成功只差一步啦！PHP已经正确返回了{"likes":2,"unlikes":0}这样的JSON数据，而且你在AJAX里设置了dataType:'json'——这很好，jQuery会自动把返回的JSON字符串解析成JavaScript对象，所以你可以直接通过对象属性访问likes和unlikes的值。

问题所在 #

你现在用alert(results)看到的是[object Object]，这是因为results已经是一个JS对象了，不是字符串，alert会把它转换成默认的对象描述文本，没法直接看到具体数值。

修改你的AJAX成功回调函数 #

直接修改success里的代码，提取属性并更新页面即可。这里我假设你页面上有两个元素用来显示点赞和踩的数量，比如先在HTML里加这些节点：

<!-- 示例：添加显示计数的元素，可根据你的页面结构调整 -->
<span id="like-count">0</span>
<span id="unlike-count">0</span>

然后修改你的user-likes.js中的success函数：

success: function (results) {
    // 先在控制台打印结果，方便调试（按F12打开开发者工具查看）
    console.log('投票返回的数据:', results);
    
    // 直接通过对象属性提取点赞和踩的数量
    const totalLikes = results.likes;
    const totalUnlikes = results.unlikes;
    
    // 更新页面上的计数显示
    $('#like-count').text(totalLikes);
    $('#unlike-count').text(totalUnlikes);
    
    // 保留你原来的图标样式修改代码
    clickedIcon.removeClass();
    clickedIcon.addClass('mdi-action-thumb-up teal-text');
},

额外注意事项 #

• 确保你的PHP文件vote.php没有输出任何多余内容（比如connection.php里不要有echo、空格或者HTML标签），否则JSON格式会被破坏，jQuery无法正确解析。
• 如果你的页面结构里没有显示计数的元素，记得先添加对应的HTML节点，不然$('#like-count')会找不到元素，也就无法更新内容。
• 用console.log(results)代替alert，能在开发者工具控制台里更清晰地看到整个对象结构，方便调试。

这样修改之后，当用户点击点赞按钮，AJAX请求成功后，页面上的点赞和踩的数量就会自动更新啦！

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