Блог

Главная - Вопросы по программированию - Как добавить содержимое из файла с помощью jQuery?

Как добавить содержимое из файла с помощью jQuery?

#jquery #html

#jquery #HTML

Вопрос:

У меня есть основной HTML-документ:

 <html><head></head>
<body>
    <div id="content">
    </div>
</body>
</html>

Также у меня есть файл содержимого (не HTML-документ, просто HTML-код):

 <div class="CodeRay">
<div class="code"><pre><span class="no">   1</span> require
....
</pre></div>

Я хочу добавить файл содержимого в HTML-документ, как здесь:

 <html><head></head>
    <body>
        <div id="content">
            <div class="CodeRay">
            <div class="code"><pre><span class="no">   1</span> require
            ....
            </pre></div>
        </div>
    </body>
</html>

Как использовать jQuery для выполнения этой задачи? Также мне нужно запустить этот сайт локально. Спасибо.

РЕДАКТИРОВАТЬ: Локально означает примерно так «file:///E:/Work/ReadTheCode/main.html «

Ответ №1:

Используйте .load() функцию jQuery. Код, вероятно, будет выглядеть примерно так: 

 $(document).ready(function(){
  $('#content').load('contentFile.html');
});

Если вам нужна дополнительная информация, вот ссылка на документацию по загрузке jquery.

Комментарии:

1. Chrome сообщает «XMLHttpRequest не удается загрузить file:///E:/Work/ReadTheCode/content/base.html . Исходное значение null не разрешено Access-Control-Allow-Origin.» Я думаю, это из-за XMLHttpRequest crossdomain

2. Поскольку вы хотите использовать его локально, пути должны быть относительно документа.

3. Да, не указывайте на file:///E:/Work … скажем, если ваш текущий HTML-файл находится в папке ReadTheCode, ваша загрузка должна выглядеть следующим образом: $('#content').load('content/base.html');

4. Я не указывал полный путь, это проблема Chrome, в Firefox это работает.

Ответ №2:

вы можете использовать что-то вроде этого:

 $('#result').load('ajax/test.html');

Смотрите: http://api.jquery.com/load