javascript - 将 JSON 值加载到各自的 HTML 元素中

标签 javascript jquery html json

我有一个包含多个对象的 JSON 文件。我还有一个 HTML 文件,大约有 7 个 div。我正在尝试创建一个脚本,它将对象和值加载到每个单独的 div 中,第一个对象进入第一个 div,第二个对象进入第二个 div,等等。我知道我需要一个 for 循环或一个 for -in 循环来完成此任务,但我不知道从哪里开始设置它。我对 JSON 的经验极其有限(我知道我需要设置 AJAX 调用来从文件中获取数据,并且我知道如何设置 JSON 文件,但仅此而已。任何人都可以帮助我解决这个问题或向我解释一下吗?我该怎么做?

JSON 文件

var Responsive = {
    "header": "Responsive Web Design & Mobile Design",
    "image": "../images/responsive.png",
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var Javascript = {
    "header": "JavaScript Development",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var PHP = {
    "header": "PHP Development",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var SEO = {
    "header": "Search Engine Optimization",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var Database = {
    "header": "Database Development",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var Maintenance = {
    "header": "Website Maintenance & Performance Optimization",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

var Consultation = {
    "header": "Consultation",
    "image": ,
    "preview": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
    "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
}

就目前情况而言,我已将所有内容硬编码到 HTML 文档中,如我笔中所见。要查看我正在尝试执行的操作,请单击标题中的“服务”链接。这是我的Pen

最佳答案

首先,您提供的文档不是正确的 JSON 文档。它是 Javascript 对象的集合。你的服务器将返回 JSON,这是一种纯文本格式,必须由 Javascript 解析。解析 JSON 字符串后,您可以访问其中的对象。幸运的是,Mickey 已经为您提供了一个合适的 JSON 文件供您使用。

要解析 JSON 文件,请将文件加载到字符串中并将其传递到 JSON.parse 函数中:

var json = JSON.parse(string_from_server);

您现在可以像访问任何其他 Javascript 对象一样访问 json 变量。

在加载内容方面,我建议您将 AJAX 调用的 json 响应格式化为数组(这必须在生成 json 时在服务器上完成)。然后,您可以调用 for 循环来处理 array 中的每一项。

for (var i = 0; i < json.length; i++) {
    // access your variables here like json[i].header etc.
}

让 JavaScript 使用 for 循环为您创建一个 html 字符串,然后使用

document.getElementByID("id_of_container_on_page").innerHTML = string_of_html

这会将生成的 html 放入网页上的容器中。

如果您想让自己的生活变得更简单,请查看JQuery

关于javascript - 将 JSON 值加载到各自的 HTML 元素中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28383746/

相关文章:

javascript - 显示垫子离场 Angular 9 的组件误差

javascript - 验证优惠券代码并更新价格的 Controller 方法/Javascript

php - 将变量放置在 div id 中

JavaScript onClick,通过函数和按钮从表(使用 PHP 从数据库填充)获取数据(id)

html - CSS 网格,一些媒体查询不适用

asp.net - SimpleLightbox jQuery 插件提供重新调整图像大小?

JavaScript for 循环添加对象到对象

javascript - 在 For 循环中乘以整数

javascript - jsp中的动态依赖选择框 HELP pls

javascript - 如何创建一个仅用于程序输出的文本区域框?