Question

我有以下json文件

{
    "subject":"CSE",
    "semester":"Fall",
    "number":"219",
    "year":"2017",
    "title":"Title",
    "instructor_name":"Instructor Name",
    "instructor_home":"Instructor Home",
    "export_dir":"",
    "template_dir":"",
    "home_page_boolean":true,
    "syllabus_page_boolean":true,
    "schedule_page_boolean":true,
    "hws_page_boolean":true,
    "project_page_boolean":true,
    "banner_school_image_file":"test.jpeg",
    "left_footer_image_file":"test.jpeg",
    "right_footer_image_file":"test.jpeg"
}

我还有以下html文件

/*109923473*/

<html>
    <head>
        <title>CSE 380 Home Page - Spring 2017</title> 
        <link rel="stylesheet" type="text/css" href="./css/course_homepage_layout.css">
        <link rel="stylesheet" type="text/css" href="./css/sea_wolf.css">

    <!-- LINK TO OUR JQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    </head>

    <body>

        <div id="content">

            <div id="navbar">
                <a href="http://www.stonybrook.edu/"><img class="sbu_navbar" alt="Name" src="./images/ImageLogo.png"></a>

                <a id="home_link" class="open_nav" href="index.html">Home</a>
                <a id="syllabus_link" class="nav" href="syllabus.html">Syllabus</a>
                <a id="schedule_link" class="nav" href="schedule.html">Schedule</a>
                <a id="hws_link" class="nav" href="hws.html">HWs</a>
                <a id="projects_link" class="nav" href="projects.html">Projects</a>
            </div>

            <div id="banner">
                CSE 380 - Spring 2017<br>
                Computer Game Programming
            </div>

            <div id="desc">

                <h4> ANNOUNCEMENTS:</h4>

                <p>Welcome to the CSE 380 Web site. </p>
                <br><br><br><br><br>
                <hr>

json数据不在html文件中。它是一个名为CourseDetails.json的单独文本文件

我需要改变两件事。

替换各种课程详情。例如，在标题和公告中的html中，CSE 380 2017春季部分是硬编码的。我想用我的json文件中的所有细节替换所有这些细节。

有没有办法在html文件中设置变量，将它们设置为json文件中的值，然后只使用变量而不是硬编码数据？

因此，我的html包含一个类似courseName的变量，然后用CSE替换courseName的每个实例所以如果是

欢迎使用courseName。研究很多

然后它会成为

欢迎来到CSE。研究很多

我还有5个布尔json数据变量。那些应该控制导航栏中的哪些网站页面出现。例如，如果json文件包含

＆＃34; syllabus_page_boolean＆＃34;：假＆＃34; schedule_page_boolean＆＃34;：假

然后html文件的导航栏部分应该只是

<div id="navbar">
    <a href="http://www.stonybrook.edu/"><img class="sbu_navbar" alt="Name" src="./images/ImageLogo.png"></a>

    <a id="home_link" class="open_nav" href="index.html">Home</a>
    <a id="hws_link" class="nav" href="hws.html">HWs</a>
    <a id="projects_link" class="nav" href="projects.html">Projects</a>
</div>

谢谢！

Answer 1

我可以帮助你。我一直这样做。

您可以使用ajax填充数据。（我为此使用jQuery）。你做一个jQuery ajax调用，它加载JSON文件并解析它。然后使用jQuery替换所需的各种元素中的HTML。

在您的示例中，一旦解析了数据，您只需将其放入：

$("#banner").html(<your content here>);
$("#desc").html(<your content here>);

有一些关于jQuery / AJax / JSON的优秀文档。查看https://www.sitepoint.com/demos/ajax/并查看.getJSON（）调用，我认为它将完全按照您的意愿执行。

Answer 2

看起来您正在学习JavaScript和/或您是HTML / JS技术的新手。我建议您参加W3Schools的入门课程（免费）direct link

我不会为你编写代码，因为我认为如果你自己尝试实现这一点，你会学到很多东西，但我会给你一些提示：

要更改HTML元素，您需要先访问它。常见的方法是设置ID或类，阅读更多here
如果需要连接多个值，可以通过简单地在变量之间加上
您需要做的事情：将您的JSON文件加载到JavaScript变量中，然后更改所需的HTML元素，您需要访问它们，以便设置一些ID和/或类。

玩得开心，祝你好运。

PS：我认为最好先学习Vanilla JavaScript而不是JQuery或任何其他JS Framework，但这当然取决于你。

如何使用json文件中的数据编辑html文件？

2 个答案: