为什么我的 onclick 事件不显示我的 JSON 文件？

Question

我是 JS 和 JSON 的新手，现在正在学习它。对于我们的项目，我们必须编写一个 JSON 文件并使用按钮和 JS 显示它。我已经盯着这个看了好几个小时，以为我会放弃并寻求帮助。

这是我的 JSON 文件：

{
  "id": "Pavlov's Dog",
  "dateOfExhibition": "2018-07-08T22:00:00.000Z",
  "address": [],
  "street": "Bergmannstrasse 29",
  "city": "Berlin",
  "country": "Deutschland",
  "zip": "10473"
}

这是我的 JS：

(function () {


var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
var request = new XMLHttpRequest();
button.onclick = function () {
request.open('GET', url);
    if (request.status == 200) {

        var json = JSON.parse(request.responseText);
        var data = '<ul>';

        data += '</ul>';

        $('#exhibitions').html(data);

    } else {
        alert('An error has occurred.');
    }
};

})();

还有一个来自我的 HTML 的 sn-p：

    </nav>

<!-- JSON TO UNORDERED LIST -->
<button id="button">Click Me</button>
<div id="exhibitions"></div>

    <footer class="footer">

感谢您的帮助！

Answer 1

您在打开请求后立即测试状态。您需要：

1. 实际发送请求
2. 等待回复

---

您正在获取一个 JSON 字符串，将其转换为 JavaScript 对象，然后忽略它

---

看起来您正试图在按钮存在之前将点击处理程序绑定到按钮（并且您正在使用假设按钮将生成与其 id 匹配的全局变量的可疑做法。

---

类似的东西应该可以工作：

addEventListener("load", set_up_click_handler);

function set_up_click_handler() {
  var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
  var button = document.getElementById("button");
  button.addEventListener("click", click_handler);

  function click_handler(event) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.addEventListener("load", response_handler);
    request.send();
  };

  function response_handler() {
    if (this.status == 200) {
      var json = this.responseText;
      var data = JSON.parse(json);
      var list = $('<ul />');
      for (var item in data) {
        list.append(
          $("<li />").text(item + ": " + data[item])
        );
      }
      $('#exhibitions').append(list);
    } else {
      alert('An error has occurred.');
    }
  }

}

Answer 2

您的问题是您没有考虑XMLHttpRequest 的异步方面。这段代码表明：

request.open('GET', url);
if (request.status == 200) {

另外，您忘记了对 .send() 的调用，并将响应数据添加到您的 html 中。

您需要等待请求完成，而不是立即检查request.status。这是通过向XMLHttpRequest（版本2）对象的onload 属性添加一个函数来完成的。

request.open('GET', url);
request.onload = function() {
    if (request.status == 200) {
        var json = JSON.parse(request.responseText);
        var data = '<ul>';
        data += /* some parts of the json object */;
        data += '</ul>';
    }
};
request.send();

Answer 3

您实际上并没有通过调用send 方法来发起请求。

(函数(){

 var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
 var request = new XMLHttpRequest();
 button.onclick = function () {
     request.open('GET', url);

     request.send(null);  //  << YOU FORGOT THIS
 }

此外，您不能在发出请求后立即跳入响应的处理。由于它是 AJAX 调用，因此您不知道何时会返回响应。你需要设置一个成功回调：

     request.addEventListener("readystatechange", function(){

        if (request.readyState === 4 && request.status == 200) {

            var json = JSON.parse(request.responseText);
            var data = '<ul>';

            data += json + '</ul>';

            $('#exhibitions').html(data);

            } else {
              alert('An error has occurred.');
            }
     });

Answer 4

您也可以使用 jquery 发出此请求，作为初学者，这可能比更冗长的 vanilla javascript 方法更容易。

(function () {    
    $("button").on("click", function(){
       $.getJSON('test.json', function(data) {
         var list = $('<ul />');
         for(prop in data){
           list.append($("<li />").text(data[prop]));
          }
          $('#exhibitions').append(list);
          }).fail(function() {
            alert( "failed" );
       })
     })
 })();

Answer 5

您的点击事件在哪里？您永远不会 request.send() 或对您的 json var 做任何事情。下面是正在工作的 get 和 post XMLHttpRequest 函数示例，它们可以将 Objects 作为它们的第一个参数。

var doc = docmuent, bod = doc.body;
function E(id){
  return doc.getElementById(id);
}
function phpize(obj, ignore){
  var r = [];
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      var p = ignore ? ignore+'['+i+']' : i;
      var v = obj[i];
      var s = typeof v === 'object' ? phpize(v, p) : encodeURIComponent(p)+'='+encodeURIComponent(v);
      r.push(s);
    }
  }
  return r.join('&');
}
function get(send, where, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('GET', where.replace(/(\\|\/)$/,'')+'?'+phpize(send));
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send();
}
function post(send, where, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send(phpize(send));
}
E('button').onclick = function(){
  get({sendProp1:'send value 1'}, 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json', function(){
    // do stuff now
  }, this);
});