通过单击按钮用 getJSON 动态替换 HTML

Question

我有一个网页，在正文中显示一个新闻故事，并有一个侧面导航栏，其中列出了其他四个故事。我正在尝试使用 json 文件来换出主体中的 html 文本。每个故事都有自己的 json 文件。这是我当前的 javascript 代码：

$(document).ready(function() {

$("#nav_list a").click(function(evt) {
    buildName = "../json_files/" + $(this).attr("title") + ".json";
    alert(buildName);
    document.getElementById("main").innerHTML = "";

    $.getJSON(buildName, function(data) {
        $.each(data, function() {
            $.each(this, function(key, value) {
                $("#main").append(
                    "<h1>" + value.title + "</h2>" +
                    "<img src='" + value.image + "'>" +
                    "<h2>" + value.month + "<br>" + value.speaker + "</h2>" +
                    "<p>" + value.text + "</p>";
                );
            }); // inner each       
        }); // outer each
    )}; // end of getJSON           

}); // end click    

}); // end ready

注意事项：

1. 警报（buildName）用于我自己的测试。

2. 下一行（w. innerHTML）应该清除当前的正文内容。 ** 注意：如果我注释掉了 $.getJSON 方法，这将有效！否则这个和我的 alert() 都会被完全忽略。

3. 因为每个商店都有自己的 json 文件，所以我质疑 getJSON 中多个 $.each 方法的必要性。它没有任何区别（我下面的格式来自我的教科书，并且已经处理了一个包含多个条目的 json 文件）。

我什至尝试不清除初始的 innerHTML 并覆盖，但我可能有一些语法错误。这是尝试：

        $.getJSON(buildName, function(data) {
            $.each(data, function(key, value) {
                $("#main").append(
                    ("#main h1").innerHTML.replace("<h1>" + value.title + "</h2>");
                    ("#main img").innerHTML.replace("<img src='" + value.image + "'>");
                    ("#main h2").innerHTML.replace("<h2>" + value.month + "<br>" + value.speaker + "</h2>");
                    ("#main p").innerHTML.replace("<p>" + value.text + "</p>");
                )
            }); // endeach
    )}; // end of getJSON  

你们怎么看？我完全被难住了。

Answer 1

删除 .append() 中末尾的分号。否则，我不确定。我想对此发表评论而不是回答，但我缺乏声誉。在您的第二次尝试中，不应在 .append() 中进行这些替换调用。祝你好运！

Answer 2

我认为问题可能出在您构建的 json 路径上。

尝试使用标准路径“../file.json”或“file.json”来检查是否有您想要的结果，或者$.getJSON() 是否仍然被忽略。

关于其他错误：你的开发是什么。环境？

我还注意到您在标题部分的附加函数中有一个不匹配的括号。所以， "<h1>" + value.title + "</h2>" + 必须改成..

"<h1>" + value.title + "</h1>" +

Answer 3

我重新创建了您网站的示例，使用您的代码和 .json 文件似乎一切正常。

我只需要修改如下所示的代码。在这种情况下，如果您有标题，它也会清除您网站中的标题。

<!--json  retrieve script starts here -->
<script>
$(document).ready(function(){
$(":button").click(function() {
buildName = "../json_files/" + $(this).attr("title") + ".json";
alert(buildName);
//$("#main").empty();
document.getElementById("main").innerHTML = "";

$.getJSON(buildName, function(data){
//$.each(data, function() {
  //  $.each(data, function(key, value){
     $("#main").append(
          "<h1>" + data.title + "</h2>" +
          "<img src='" + data.image + "'>" +
          "<h2>" + data.month + "<br>" + data.speaker + "</h2>" +
          "<p>" + data.text +"</p>"
   );
// });
//});
});
 });
});
</script>
<!--json script end here -->

注意：我已将链接与按钮交换以连接此示例的事件。

您还可以在单​​个 .json 文件中使用多个文件条目，格式如下：

{
"story1":"/jsonfile1.json",
"story2":"/jsonfile2.json",
"story3":"/jsonfile3.json"
}

然后您将使用$.each(data,function(key,value) 对其进行解析，其中值将是通过$.getJSON 请求的文件名，因此您可以让单个文件处理多个条目。

Answer 4

有一些语法错误 - 括号和花括号乱序，分号错位，诸如此类。逻辑是正确的。

感谢大家的回复！