Question

经过艰苦的努力，我已经能够弄清楚如何使代码达到这一点，但是我为为什么不通过JavaScript将JSON数据发送到HTML感到困惑。我可以打开开发人员控制台并在onLoad之后手动键入零件，它可以工作...但是单独运行脚本，这样它会自动填充页面上的空div-绝对没有...我知道它可能有些愚蠢，很小，我无法看清-但是我想从站点的这个愚蠢的部分继续前进。任何帮助将非常感激。

/* General Info                          */
/* Data Routing Structure:               */
/* (JSON DATA)   (jsVariable)  (cssID)   */
/* title         rTitle        rTitle     */
/* quote         rQuote        rQuote     */
/* source        rSource       rSource    */
/* text          rText         rText      */
/*---------------------------------------*/
/* All JSON Data Files Are Located In    */
/* (Root)/dta, And Are Split Into 12     */
/* Files.

/* Define Global Variables To Help       */
/* Specify The Current Day And Month     */
var date = new Date();
var m = date.getMonth();
var d = date.getDate();  
var months = new Array()
    months[0] = "january";
    months[1] = "february";
    months[2] = "march";
    months[3] = "april";
    months[4] = "may";
    months[5] = "june";
    months[6] = "july";
    months[7] = "august";
    months[8] = "september";
    months[9] = "october";
    months[10] = "november";
    months[11] = "december";
var month = months[date.getMonth()];


/* Make The Connection To The JSON File  */
    var drOb
    var xhr = new XMLHttpRequest();
    xhr.open('GET', "./dta/" + month +".json");
    xhr.overrideMimeType("application/json");
    xhr.setRequestHeader("Content-type", "application/json", true);

/* Pull JSON Data For Todays Date        */
/* When The Page Loads, And Send To HTML */
    xhr.onLoad = function() 
    {
      if (this.readyState == 4 && this.status == 200)
      {
        var drOb = JSON.parse(this.response);
        var rDate = m + d;
        var rTitle = drOb[DAY][d].TITLE;
        var rQuote = drOb[DAY][d].QUOTE;
        var rSource = drOb[DAY][d].SOURCE;
        var rText = drOb[DAY][d].TEXT;
        document.getElementById("rDate").innerHTML = rDate;
        document.getElementById("rTitle").innerHTML = xhr[DAY][D].TITLE;
        document.getElementById("rQuote").innerHTML = rQuote;
        document.getElementById("rSource").innerHTML = rSource;
        document.getElementById("rText").innerHTML = rText;

      }else{
        alert("Daily Reflection is currently not available, please inform someone....");    
      }
    };

    xhr.send();

Answer 1

xhr.onLoad

我认为应该是onload而不是onLoad。

Answer 2

您应该查看XMLHttpRequests的文档。

有一些问题需要解决：

要监听的事件是onreadystatechange或onload（小写）
~~this不是您想的那样。如@Marisha所指出的，只要不使用箭头功能，this实际上就会反弹。~~

this.response应该是xhr.responseText

xhr[DAY][D].TITLE应该是drOb[DAY][D].TITLE

示例代码中未定义一些变量（例如DAY）。

这是固定的代码。我遗漏了一些部分供您填写我不理解您要完成的工作。

var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://example.com'); xhr.onreadystatechange = function() { // This function will be called multiple times. // If the status is anything other than 4 (complete) we don't want to continue. if (xhr.readyState !== 4) return; if (xhr.status !== 200) { // Something went wrong. Tell the user and then stop executing this function. return; } // If we got here without returning, the request was successful. var drOb = JSON.parse(xhr.responseText); // alternatively, you might be able to use `var drOb = xhr.response` // depending on how the server is set up. }; xhr.send();

注意：关于this.response与this.responseText，我建议进行此更改的原因是this.response依靠xhr.responseType来确定响应方式应该被解析，并且某些浏览器（IE）不支持JSON。通过使用this.responseText，可以确保它是字符串，并与JSON.parse结合使用，可以确保将其解析为JSON，并且可以尝试捕获。

JSON转换为HTML-我被正式绊倒了

2 个答案: