Ajax无法获取PHP echo内容，如何在JavaScript中查看该内容？

嘿，我帮你揪出几个导致Ajax拿不到PHP响应的问题，咱们一步步来修正：

问题分析 #

1. 表单默认提交打断Ajax：你用的是<input type="submit">按钮，点击它会触发表单的默认提交行为，页面直接刷新，Ajax请求还没完成就被中断了，自然看不到控制台输出。
2. PHP返回格式不匹配：你直接echo $_POST;，但$_POST是数组，echo数组只会输出字符串Array；而你的Ajax指定了dataType: "json"，jQuery会期望拿到合法的JSON格式，不匹配的话会直接进入error回调，不会执行success里的代码。
3. 选择器错误：你用$(".sub01")绑定事件，但按钮的id是sub01，并没有sub01这个类，应该用$("#sub01")来选中按钮。

修正后的完整代码 #

HTML（test01.html）

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <form>
    <input type="text" value="var_01">
    <input type="text" value="var_02">
    <input id="sub01" type="submit" value="click me!">
  </form>
</div>
<script>
$("#sub01").on("click", function(e) {
  // 阻止表单默认提交，避免页面刷新
  e.preventDefault();
  
  $.ajax({
    type: "POST",
    url: "cms/test01.php?action=test01",
    dataType: "json",
    data: {
      "var_01": "var_01_value",
      "var_02": "var_02_value"
    },
    success: function(response) {
      console.log("PHP返回的响应：", response);
    },
    // 新增error回调，方便调试请求失败的情况
    error: function(xhr, status, err) {
      console.log("请求出错：", status, err);
      console.log("服务器返回内容：", xhr.responseText);
    }
  });
});
</script>

PHP（test01.php）

<?php
// 告诉浏览器返回的是JSON格式数据
header('Content-Type: application/json');

// 将POST数组转为合法的JSON字符串输出
echo json_encode($_POST);
?>

额外提示 #

• 加上error回调能帮你快速排查请求失败的原因，比如路径错误、PHP语法错误等；
• 如果想直接用表单里的输入值，记得给输入框加上name属性，然后用$(form).serialize()代替手动写data参数；
• jQuery的bind()方法已经被官方推荐用on()替代，后者更灵活支持动态元素绑定。

内容的提问来源于stack exchange，提问作者s-n-2