gpt4 book ai didi

javascript - 从 JSON 生成带有 JS 的 HTML 页面

转载 作者:太空狗 更新时间:2023-10-29 13:33:16 31 4
gpt4 key购买 nike

我正在寻找使用 Javascript 解析 JSON 文件并输出 html 文件或填充 html 文件的非常基本的示例。到目前为止,我找到的所有示例都有代码片段,我没有背景来填补它们之间的空白。

感谢您提供任何 fiddle (这会很棒)、链接和聪明的 a*s 评论。

最佳答案

模板示例

我建议使用模板工具,例如 PURE ...

这种工具的目的是分离逻辑和表示。

例如,使用上述工具从 JSON 数据生成列表如下所示:

JSON数据文件

{'who':'BeeBole!'}

HTML 文件

<html>

<head>
<title>PURE Unobtrusive Rendering Engine</title>

<script src="../libs/jquery.js"></script>
<script src="../libs/pure.js"></script>
</head>

<body>
<!-- the HTML template -->
Hello <a class="who" href="#"></a>

<script>
// the JSON data we want to render
$.getJSON('yourJSONdataFile.json', function(data) {
// run the rendering
$('a').autoRender(data);
// PURE tries to match class with the JSON property and replace the node value with the value of the JSON property
});
</script>
</body>
</html>

如果你有简单的 JSON 数据,这是最基本的方法(参见工作 JSFiddle 示例 there).. Get Started如果基本方法不合适,指南将引导您完成另一个示例。有关更多高级功能,请查看 documentation .

备选方案

没有特别的理由在上面的例子中使用了 PURE。还有许多其他选择:

...或者您可以按照说明手动完成 there .

关于javascript - 从 JSON 生成带有 JS 的 HTML 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9625366/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com