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

注意：

警报（buildName）用于我自己的测试。
下一行（即innerHTML）应该清除当前的主体内容。 **注意：如果我将$ .getJSON方法注释掉，这是有效的！否则，我和alert（）都会被完全忽略。
因为每个商店都有自己的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)进行解析，其中value将是通过$.getJSON请求的文件名，因此您可以通过单个文件处理多个条目。

Answer 4

有一些语法错误 - 括号和curley括号乱序，错误的分号，类似的东西。逻辑是正确的。

感谢大家的回复！

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

4 个答案: