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中的代码段：

    </nav>

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

    <footer class="footer">

感谢您的帮助！

Answer 1

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

实际发送请求
等待回复

您正在使用一串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

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

（function（）{

 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 3

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

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

此外，您忘记了对.send()的通话，并将响应数据添加到您的HTML中。

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

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 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);
});

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

5 个答案: