演示

Question

我想知道这段代码我做错了什么？我试图通过API将PC播放器的响应设置为html中的

标签，但这并不起作用。代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Battlefield 4 Tracker</title>

    <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="js/bootstrap/bootstrap.min.js"></script>
    <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>

<div id="fullscreen">
    <div class="fullscreen-content">
        <div id="centered">
            <h1>Battlefield 4 Stats Tracker</h1>
            <input id="username" name="username" placeholder="PSN Username">
            <button id="submit">Submit</button>
            <p id="response">
                Response goes here.
            </p>
        </div>
    </div>
</div>

<script>
    var request = new XMLHttpRequest();

    var jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)

    var obj = JSON.parse(jsonResponse);

    document.getElementById("response").innerHTML = obj.pc[1].count + "";
</script>

</body>
</html>

Answer 1

由于您使用的是您提供的html建议的JQuery，因此您可以使用它的$ .get方法。此方法是一个使用xmlHTTP异步调用的简单包装器。成功回调此方法是应该使用响应填充obj的位置。

obj.pc也是一个对象，所以你应该像obj.pc.count一样访问它

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Battlefield 4 Tracker</title>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>

</head>
<body>

<div id="fullscreen">
    <div class="fullscreen-content">
        <div id="centered">
            <h1>Battlefield 4 Stats Tracker</h1>
            <input id="username" name="username" placeholder="PSN Username">
            <button id="submit">Submit</button>
            <p id="response">
                Response goes here.
            </p>
        </div>
    </div>
</div>

<script>
    var request = new XMLHttpRequest();
    var obj = null;
     var jsonResponse = $.get("http://api.bf4stats.com/api/onlinePlayers", function(response){   
      obj = response;       
      document.getElementById("response").innerHTML = obj.pc.count + "";
    })



</script>

</body>
</html>

Answer 2

你忘了发送XMLHttpRequest，你得到的是对象的对象，所以你可以直接调用obj.pc.count。试试这个：

var json = new XMLHttpRequest();

json.open("GET", "http://api.bf4stats.com/api/onlinePlayers", false)
json.send(null)

var obj = JSON.parse(json.responseText);

document.getElementById("response").innerHTML = obj.pc.count;

Answer 3

请求永远不会发送send();
执行此操作的正确方法是在onreadystatechange事件中处理它。

试试这个（连同正确的检查）：

var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
        var obj = JSON.parse(this.responseText);
        myFunction(obj);
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();


function myFunction(obj) {        
    document.getElementById("response").innerHTML = obj.pc.count;
}

或直接没有额外功能：

var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
        var obj = JSON.parse(this.responseText);
        document.getElementById("response").innerHTML = obj.pc.count;
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

演示

var xmlhttp = new XMLHttpRequest();
var url = "http://api.bf4stats.com/api/onlinePlayers";

xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
        var obj = JSON.parse(this.responseText);
        document.getElementById("response").innerHTML = obj.pc.count;
    }
};

xmlhttp.open("GET", url, true);
xmlhttp.send();

<div id="response"></div>

Answer 4

您从未发送过请求。你缺少request.send（）。然后，当您收到回复时，您会收听加载事件。

这是您的代码的编辑版本。我假设你想要遍历所有类型的设备并计算它们。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="fullscreen">
    <div class="fullscreen-content">
        <div id="centered">
            <h1>Battlefield 4 Stats Tracker</h1>
            <input id="username" name="username" placeholder="PSN Username">
            <button id="submit">Submit</button>
            <p id="response">
                Response goes here.
            </p>
        </div>
    </div>
</div>

<script>
function reqListener () {
  //THIS HAPPENS AFTER THE REQUEST HAS BEEN LOADED.
  var obj = JSON.parse(this.responseText);
  var counter = 0; 
  for(var k in obj) {
    var o = obj[k];
    counter += o.count;
  }
  document.getElementById("response").innerHTML = counter;
}

var request = new XMLHttpRequest();
request.addEventListener("load", reqListener);
request.open("GET", "http://api.bf4stats.com/api/onlinePlayers");
request.send();
  
</script>

</body>
</html>

您可能需要考虑其他事件，例如尝试加载请求失败等。以下是更多信息：https://developer.mozilla.org/en/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest

Answer 5

试试这个： -



    var request = new XMLHttpRequest();

     request.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
         var obj = JSON.parse(this.responseText);
        document.getElementById("response").innerHTML = obj.pc.count + "";

    }
  };
     jsonResponse = request.open("GET", "http://api.bf4stats.com/api/onlinePlayers", true);
     request.send();

无法使用JSON API获得响应

5 个答案:

演示