将PHP变量传递给外部JavaScript文件时出现undefined问题求助

我来帮你排查这个问题——你遇到的undefined问题其实是DOM查找的范围错了，咱们一步步分析解决：

问题根源 #

你的AJAX请求成功后，返回的data是服务器输出的完整HTML字符串，但你直接用$("#Error")去查找当前页面的DOM元素——而当前页面里根本不存在这个id="Error"的隐藏域，自然会返回undefined。

解决方案 #

这里给你两种常用的处理方式，按需选择：

方案1：使用JSON格式返回数据（推荐，更规范的前后端交互方式） #

这种方式不需要返回HTML，直接把需要传递的数据打包成JSON，前端解析后直接使用：

• 修改bin/A.php的代码：

  <?php
  $fname = $_POST["fname"];
  $TestGrab = 'MEHOY MENOY!';
  // 组装要返回的响应数据
  $response = [
      'greeting' => "Hi ".$fname."!",
      'test_grab' => $TestGrab
  ];
  // 设置响应头为JSON格式，让前端正确识别
  header('Content-Type: application/json');
  // 输出JSON字符串
  echo json_encode($response);
  ?>
  

• 修改B.js的代码：

  $.ajax({
      type:'POST',
      url: 'location/bin/A.php',
      data:{fname:fname},
      dataType: 'json', // 指定接收JSON格式数据
      success: function(data){
          console.log(data.greeting); // 输出Hi 传入的fname值!
          console.log("Error: " + data.test_grab); // 这里会输出Error: MEHOY MENOY!
      }
  });
  

方案2：从AJAX返回的HTML字符串中查找元素 #

如果你坚持要返回HTML内容，那需要把返回的字符串转换成jQuery对象，再从中查找目标元素：

• 保持bin/A.php的代码不变，修改B.js：

  $.ajax({
      type:'POST',
      url: 'location/bin/A.php',
      data:{fname:fname},
      success: function(data){
          console.log(data);
          // 将返回的HTML字符串转为jQuery对象，再查找其中的#Error元素
          var grabbing = $(data).find("#Error").val();
          console.log("Error: " + grabbing); // 现在就能正确获取到值了
      }
  });
  

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