Загрузка данных контента 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

Метод jQuery load () позволяет загружать фрагменты HTML.Вы делаете это, определяя селектор css после URL для загрузки.Когда jQuery встречает этот селектор, он ищет соответствующий элемент в извлеченном html и загружает только эту часть в элемент.

Например, если в html-файле у вас было

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

Иused

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

Он просто загружает содержимое content2 div.

В качестве примечания вам не нужно помещать каждый вызов click() в отдельные вызовы jQuery(document).ready(), которые вы можете сделатьв один обратный вызов.

Answer 2

ОП хочет загрузить некоторые данные, хранящиеся в файле JSON, асинхронно на свою страницу.Для этого вам нужно заменить метод load на html и передать соответствующую часть JSON в качестве параметра.

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

Sample 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 3

На самом деле, ваш вопрос не очень понятен.Однако вы можете поместить все элементы 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");
    });
});