如何解决Ajax(JSONP)请求无法获取并弹窗展示JSON数据的问题？

嘿，我来帮你搞定这个问题！你现在的核心问题是没有正确访问返回JSON数据的层级结构，另外JSONP的回调参数设置也有点混淆，咱们一步步来修正：

问题分析 #

首先看你提供的JSON输出示例，数据结构是这样的：

{"user_info":{"username":"Tara","password":"Tara","message":"","auth":1,"status":"Active",...}}

也就是说，username、password这些字段都嵌套在根对象的user_info属性里，但你当前的代码直接尝试从data根对象取这些字段，自然拿不到值。另外你设置了jsonp: "user_info"，同时又定义了同名的全局函数，这会造成回调逻辑的混淆。

修正后的代码 #

<button id="jsonp2" type="button" class="btn btn-info">Send JSONP Request</button>
<script>
$(document).ready(function() {
  $("#jsonp2").click(function() {
    $.ajax({
      url: "http://linux-app.tv:8080/player_api.php?username=azmir&password=azmir&type=m3u",
      dataType: "jsonp",
      // 这里如果接口要求回调参数名为user_info就保留，否则改成默认的"callback"
      jsonp: "user_info",
      success: function(data) {
        // 注意：数据嵌套在user_info属性里，要先访问这个层级
        const userData = data.user_info;
        alert(
          "Username:" + userData.username + "\n" +
          "Password:" + userData.password + "\n" +
          "Status:" + userData.status
        );
      },
      error: function(xhr, status, error) {
        // 加上错误处理，方便排查问题
        alert("请求出错：" + status + " - " + error);
      }
    });
  });
});
</script>

关键修改点说明 #

• 数据层级访问：把data.username改成data.user_info.username，因为所有用户信息都在user_info这个嵌套对象里。
• 移除冗余全局函数：jQuery的JSONP请求会自动生成回调函数，你不需要手动定义user_info全局函数，反而会和设置的jsonp参数冲突，所以直接删掉这个函数即可。
• 新增错误处理：加上error回调，能帮你快速排查请求失败的原因（比如跨域限制、接口返回错误等）。

如果接口实际要求的回调参数名不是user_info，记得把jsonp: "user_info"改成接口要求的参数名（大部分JSONP接口默认用callback）。

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