jQuery/JSON 内容数据加载

Question

我是JS的初学者，所以... 我一直在寻找答案，但根本没有结果。

我有这个

$(document).ready( function() {
$("#load_p1").on("click", function() {
$("#content").load("p1.html");
});
});
$(document).ready( function() {
$("#load_p2").on("click", function() {
$("#content").load("p2.html");
});
});
$(document).ready( function() {
$("#load_p3").on("click", function() {
$("#content").load("p3.html");
});
});
$(document).ready( function() {
$("#load_p4").on("click", function() {
$("#content").load("p4.html");
});
});

我想知道是否有办法将所有这些数据保存在一个 JSON 或另一个文件中，而不是 4 个.html文件中。

问题 #2

这是控制视图的正确方法吗？或者对于严肃的网站管理员来说，这是不可接受的。

对不起，我的英语不好：|

Answer 1

OP 希望将存储在JSON文件中的一些数据异步加载到他的页面中。为此，您需要将load方法替换为html，并将JSON的相应部分作为参数传递。

$("#load_p1").on("click", function() {
$("#content").html(json[0]);
});

样本JSON结构

json = '[{"p1":"<h1>Test</h1>"},{"p2":"<h1>Test2</h1>"}]'

使用 jQuery 加载test.json文件：

$.getJSON("test.json", function(json) {
$("#load_p1").on("click", function() {
$("#content").html(json[0]);
});
});

Answer 2

实际上，你的问题不是很清楚。但是，您可以将所有javascript内容放在一个文件中，例如：script.js并将脚本注入HTML文件中(您需要使用它(。

$(document).ready( function() {
$("#load_p1").on("click", function() {
$("#content").load("p1.html");
});
$("#load_p2").on("click", function() {
$("#content").load("p2.html");
});
$("#load_p3").on("click", function() {
$("#content").load("p3.html");
});
$("#load_p4").on("click", function() {
$("#content").load("p4.html");
});
});

Answer 3

jQuery的load((方法允许加载html片段。您可以通过在要加载的 url 后指定 css 选择器来执行此操作。当jQuery遇到该选择器时，它将在检索到的html中查找匹配的元素，并且仅将该部分加载到元素中。

例如，如果在 html 文件中你有

<div id="content1">
content 1
</div>
<div id="content2">
content 2
</div>
<div id="content3">
content 3
</div>

并使用

jQuery("div").load("all.html #content2")

它只会加载内容2div。

作为旁注，您不需要将每个click()调用放入单独的jQuery(document).ready()调用中，您可以将它们放入单个回调中。