Question

我目前正在某种“主页”上工作，一切都按计划进行。但是，在即时消息试图添加书签的时候，我将它们嵌入到html中，但是如果我想添加一个书签，就必须编辑html文件。

我有一个工作脚本，当我将JSON保存在同一JS文件中时，它将使用JSON并显示它们correctly 这是该代码

const bookmarksData = [ 
{
        "name": "Echo",
        "URL": "https://sevenvnta.echo-ntn.org"
    },
    {
        "name": "Youtube",
        "URL": "https://youtube.com"
    },
    {
        "name": "Drive",
        "URL": "https://drive.google.com"
    },
    {
        "name": "Mail",
        "URL": "https://mail.google.com"
    },
    {
        "name": "Media",
        "URL": "http://server3.unethicalimages.us:8096"
    },
    {
        "name": "EMathInstructions",
        "URL": "https://www.emathinstruction.com/"
    }
];

function bookmarkTemplate(bookmarks) {
  return `
<li><a href="${bookmarks.URL}">${bookmarks.name}</a></li>
  `;
}


document.getElementById("app").innerHTML = `
  ${bookmarksData.map(bookmarkTemplate).join("")}
`;

但是，然后，我无法让JS在JS文件中编辑json！我必须将json存储在服务器上的json文件中，并对其进行主页调用。

所以我从js文件中删除了json并添加了

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'http://unethicalimages.us/Database/**ID**/bookmarks.json', true); 
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });

所以现在看起来像

The current state of it looks like this
 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'http://unethicalimages.us/Database/**ID**/bookmarks.json', true); 
    xobj.onreadystatechange = function () {
          if (xobj.readyState == 4 && xobj.status == "200") {
            callback(xobj.responseText);
          }
    };
    xobj.send(null);  
 }

 loadJSON(function(response) {
    // Parse JSON string into object
    var actual_JSON = JSON.parse(response);
 });
  
function bookmarkTemplate(bookmarks) {
  return `
<li><a href="${bookmarks.URL}">${bookmarks.name}</a></li>
  `;
}


document.getElementById("app").innerHTML = `
  ${bookmarksData.map(bookmarkTemplate).join("")}
`;

想法是，它将获取json文件，并显示json，就像json与js一起显示时一样。 But now this is all i get.

任何帮助将不胜感激！谢谢！

Answer 1

好吧，数据到来时您什么也不做。您在这里收到json文件

loadJSON(function(response) {
// Parse JSON string into object
  var actual_JSON = JSON.parse(response);
});

您正在将数据分配给变量，而对其不执行任何操作。例如，创建一个函数UpdateUI并在数据到达时传递数据。

loadJSON(function(response) {
// Parse JSON string into object
  var json = JSON.parse(response);
  UpdateUI(json);
});

然后将其渲染

function UpdateUI(data) {
  document.getElementById("app").innerHTML = `
    ${data.map(bookmarkTemplate).join("")}
  `;
}

尝试使用JavaScript从服务器读取json文件

1 个答案: