Ajax динамическая подгрузка данных html на страницу

@19dmitry · Регистрация: 18.01.2014

Студворк — интернет-сервис помощи студентам

Добрый день, уважаемые пользователи!

Тема довольно избитая, видел много решений данного вопроса, но все-равно, боюсь, что без Вашей помощи я не справлюсь.

Есть активное меню в файле index.html, при нажатии на которое блок div в этом файле должен подгружать содержимое отдельных страниц. Страницы с контентом также в html-формате.

Выбор решения пал на Ajax.

В наличии файлы с контентом:

main.html
directions.html
services.html
about.html

Файл index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
<head>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
    <script type="text/javascript" src='ajax.js'></script>
 
   <style>
      #menu {relative; top:0.5cm; padding-top:1cm; padding-left:13.5cm; font-size:16pt; word-spacing:1.5cm; font-family:Tahoma;}  
      #nav_links {}
      .main {}
      .directions {}
      .services {}
      .about {}
    </style>
 
</head>
 
<body>
   <div id="nav_links">
     <div id="menu">
       <a   class="main"   href="/main.html">  Главная  </a>
       <a   class="directions"   href="/directions.html">  Направления  </a>
       <a   class="services"   href="/services.html">  Продукция  </a>
       <a   class="about"   href="/about.html">  О&nbsp;Предприятии  </a>
     </div>
  </div>
  <!--Подгружаемый контент-->
  <div id="content"></div>
</body>

Файл ajax.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$('.nav_links a').click(function() {
    var pageName = $(this).attr('class') + '.html';
    
    $.ajax({
        url: pageName,
        cache: false,
        success: function(html){
            $(".content").html(html);
        }
    });
});

@Lazy_Den · 05.03.2018, 03:50

19dmitry, вопросик или описание проблемы забыли добавить.
Пока могу сделать два замечания:
1. $('.nav_links a') - селектор указывает на дочерние ссылки родительского элемента с классом "nav_links". В то время, как по коду видим, что это должен быть или элемент с ID = "nav_links" или ID = "menu". Это же замечание относится и к элементу, в который вы собираетесь выводить контент - id="content"
2. var pageName = $(this).attr('class') + '.html'; - не имеет особого смысла, т.к. в атрибуте href у вас уже сформированный путь к файлу.

JavaScript
1
2
3
4
5
6
7
8
9
$('#nav_links a').click(function() {
    $.ajax({
        url: $(this).attr('href'),
        cache: false,
        success: function(html){
            $("#content").html(html);
        }
    });
});

@Корд · 05.03.2018, 11:00

Инкрементирую предыдущего комментатора.
Кст возможно стоит использовать не

JavaScript
1
$('#nav_links a')

,а (Ну для экономии на спичках=) Однако отработают одинаково)

JavaScript
1
$('#nav_links').find('a')

@19dmitry · 05.03.2018, 11:28 **[ТС]**

Суть вопроса в том, что НЕ РАБОТАЕТ! )

Пробовал, просто подгружать в блок div контент другой html страницы через load, всё получилось, сработало.

А вот смена контента при помощи меню, не выходит.

Учитывая Ваши рекомендации, подкорректировал код, class изменил на id, удалил #nav_links как избыточный, одного "#menu" должно быть достаточно.

Выкладываю исправленный код:

ajax.js

JavaScript
1
2
3
4
5
6
7
8
9
$('#menu a').click(function() {
    $.ajax({
        url: $(this).attr('href'),
        cache: false,
        success: function(html){
            $("#content").html(html);
        }
    });
});

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<head>
 
  <style>
      #menu {relative; top:0.5cm; padding-top:1cm; padding-left:13.5cm; font-size:16pt; word-spacing:1.5cm; font-family:Tahoma; font-style:italic;}
      #menu a:link {color:#000000}
      #menu a:visited {font-weight:lighter; color:#000000}
      #menu a:hover {font-weight:bolder; color:#000000}
      #menu a:active {font-weight:bold; color:#000000;}
      #menu a{text-decoration:none;}
      #content {}
  </style>
</head>
 
<body>
  
    <div id="menu">
         <a href="/main.html">Главная</a>
         <a href="/directions.html">Направления</a>
         <a href="/services.html">Продукция</a>
         <a href="/about.html" style="word-spacing:0cm">О&nbsp;Предприятии</a>
    </div>
 
    <div id="content"></div>
</body>

@Корд · 05.03.2018, 11:52

Когда вы указываете

HTML5
1
<a href="/main.html">Главная</a>

Вы по сути реализуете переход с текущей страницы на указанную в href.
Возможно стоит использовать другой атрибут

HTML5
1
<a data_target="/main.html">Главная</a>

и тут

JavaScript
1
2
3
4
5
6
7
8
9
$('#menu a').click(function() {
    $.ajax({
        url: $(this).attr('data_target'),
        cache: false,
        success: function(html){
            $("#content").html(html);
        }
    });
});

@Lazy_Den · 05.03.2018, 11:59

Сообщение от 19dmitry

смена контента при помощи меню, не выходит

Что наблюдаете в консоли? Ошибок, связанных с данным кодом, скорее всего нет, но интересует закладка Network (Сеть). Какой код ответа (статус), приходит ли что-то вообще в ответе на запрос?

Добавлено через 1 минуту

Сообщение от Корд

Вы по сути реализуете переход с текущей страницы на указанную в href.

Во!)) Абсолютно верно. Нужно отменять обычное поведение при событии клика на ссылку: event.preventDefault() или return false;

Добавлено через 2 минуты

JavaScript
1
2
3
4
5
6
7
8
9
$('#menu a').click(function(e) {
    e.preventDefault();
    $.ajax( /* ... */ );
});
// или 
$('#menu a').click(function() {
    $.ajax( /* ... */ );
    return false;
});

@19dmitry · 05.03.2018, 12:54 **[ТС]**

Пробую уже разные варианты:
1) локально, через openserver
2) через хост Hostiman

Результат один и тот же.

Прикрепляю скрины вкладок Network.

Судя по чистому окну консоли, ответа от сервера нет.

@Lazy_Den · 05.03.2018, 13:17

Сообщение от 19dmitry

Прикрепляю скрины вкладок Network.

Смотреть нужно XHR-запрос. Т.е. когда выполнили клик на ссылке.

@19dmitry · 05.03.2018, 13:24 **[ТС]**

При data_target ссылка не работает, курсор-стрелка меняется на прямую черту. При href отображается следующая ошибка:

@19dmitry · 05.03.2018, 13:26 **[ТС]**

Хотя не понятно, ведь файл jquery находится там же где и остальные страницы сайта, в папке js. Почему он его ищет по прежнему адресу?

@Корд · 05.03.2018, 13:32

Сообщение от 19dmitry

При data_target ссылка не работает

Код пожалуйста, только что не поленился запустить код - все отработало как надо

@Lazy_Den · 05.03.2018, 13:36

Сообщение от 19dmitry

следующая ошибка

Вы свой html-файл запускайте не двойным кликом по нему, а на локальном сервере, через адресную строку. Или же, если локального сервера нет, то путь нужно указывать относительный.

Добавлено через 1 минуту
P.S. Попробуйте убрать слеш в начале. Не /directions.html, а просто directions.html

@19dmitry · 05.03.2018, 13:38 **[ТС]**

Высылаю код целиком, всё что есть.

ajax.js

JavaScript
1
2
3
4
5
6
7
8
9
10
$('#menu a').click(function() {
    $.ajax({
        url: $(this).attr('data_target'),
        cache: false,
        success: function(html){
            $("#content").html(html);
        }
    });
    return false;
});

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 
<html lang="ru-RU">
  <head>
    <meta charset="UTF-8">
    <title>Наименование сайта</title>
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=1.6.4"></script>
    <script type="text/javascript" src='ajax.js'></script>
 
    <style>
      #menu {relative; top:0.5cm; padding-top:1cm; padding-left:13.5cm; font-size:16pt; word-spacing:1.5cm; font-family:Tahoma; font-style:italic;}
      #menu a:link {color:#000000}
      #menu a:visited {font-weight:lighter; color:#000000}
      #menu a:hover {font-weight:bolder; color:#000000}
      #menu a:active {font-weight:bold; color:#000000;}
      #menu a{text-decoration:none;}
 
      #logo {position:absolute; padding-left:5cm; top: 0px; padding-top:1cm;}
      #header {position:relative; top: 0.5cm; padding-left:18cm; font-size:11pt; font-family:Microsoft Sans Serif; color:#8e8e8e;}
 
      #footer {position:relative; top:3cm; margin-left:5cm; text-align:left; max-width: 982px; background-color:#fff; font-size:11pt; font-family:Microsoft Sans Serif; color:#8e8e8e;}
      #author {position:absolute; text-align:left; padding-left:17cm; padding-bottom:0.5cm;}
      #contacts {position:absolute; text-align:left; padding-left:0cm; padding-bottom:0.5cm;}
      hr {margin:0; border:none; height: 3px;}
      
      #content {}
 
    </style>
  
 
  </head>
 
  <body>
 
   <p id="header"><i>Разработка, производство, поставка специальных машин и устройств</i></p>
 
 
    <div id="menu">
      <a data_target="/main.html">Главная</a>
      <a href="/directions.html">Направления</a>
      <a href="/services.html">Продукция</a>
      <a href="/about.html" style="word-spacing:0cm">О&nbsp;Предприятии</a>
    </div>
  
    <img id="logo" src="/pictures/logo.jpg" alt="logo"/> 
 
    <div id="content"></div>
 
  </body>
</html>

@Lazy_Den · 05.03.2018, 13:40

Сообщение от 19dmitry

В наличии файлы с контентом

Кстати, эти все файлы файлы лежат рядом с index.html?

Добавлено через 1 минуту

Сообщение от 19dmitry

всё что есть

Это не всё, что есть. Во-вторых, прочитайте дополнение к моему ответу в предыдущем комментарии.

@Balanaar · 05.03.2018, 13:43

У вас там кстати jQuery дублируется. Вы подключаете сразу две версии библиотеки. Оставьте только одно следующее объявление:

HTML5
1
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Добавлено через 1 минуту

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
  $('#menu a').click(function() {
    $.ajax({
      url: $(this).attr('data_target'),
      cache: false,
      success: function(html){
          $("#content").html(html);
      }
    });
    return false;
  });
});

Так должно работать

@Lazy_Den · 05.03.2018, 13:45

Код JS выполнять после загрузки DOM

JavaScript
1
2
3
$(function(){
    // ваш код
});

Убрать подключение "1.6.4/jquery.min.js"

@Корд · 05.03.2018, 13:53

Все отлично работает. Следите только за путями файлов, которые указываете в data_target.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<!DOCTYPE html>
 
<html lang="ru-RU">
  <head>
    <meta charset="UTF-8">
    <title>Наименование сайта</title>
    <script src="/js/jquery.js"></script>
 
    <style>
      #menu {relative; top:0.5cm; padding-top:1cm; padding-left:13.5cm; font-size:16pt; word-spacing:1.5cm; font-family:Tahoma; font-style:italic;}
      #menu a:link {color:#000000}
      #menu a:visited {font-weight:lighter; color:#000000}
      #menu a:hover {font-weight:bolder; color:#000000}
      #menu a:active {font-weight:bold; color:#000000;}
      #menu a{text-decoration:none;}
 
      #logo {position:absolute; padding-left:5cm; top: 0px; padding-top:1cm;}
      #header {position:relative; top: 0.5cm; padding-left:18cm; font-size:11pt; font-family:Microsoft Sans Serif; color:#8e8e8e;}
 
      #footer {position:relative; top:3cm; margin-left:5cm; text-align:left; max-width: 982px; background-color:#fff; font-size:11pt; font-family:Microsoft Sans Serif; color:#8e8e8e;}
      #author {position:absolute; text-align:left; padding-left:17cm; padding-bottom:0.5cm;}
      #contacts {position:absolute; text-align:left; padding-left:0cm; padding-bottom:0.5cm;}
      hr {margin:0; border:none; height: 3px;}
      
      #content {}
 
    </style>
  
    <script>
    $(document).ready(function(){
        $('#menu a').click(function() {
            $.ajax({
                url: $(this).attr('data_target'),
                cache: false,
                success: function(html){
                    $('#content').html(html);
                }
            });
            return false;
        });
    })
    </script>
  </head>
 
  <body>
 
   <p id="header"><i>Разработка, производство, поставка специальных машин и устройств</i></p>
 
 
    <div id="menu">
      <a data_target="main.php">Главная</a>
      <a data_target="directions.html">Направления</a>
      <a data_target="services.html">Продукция</a>
      <a data_target="about.html" style="word-spacing:0cm">О&nbsp;Предприятии</a>
    </div>
  
    <img id="logo" src="/pictures/logo.jpg" alt="logo"/> 
 
    <div id="content"></div>
 
  </body>
</html>

@19dmitry · 05.03.2018, 14:01 **[ТС]**

Спасибо за помощь!

ВСЁ ЗАРАБОТАЛО!

Строка $(function(){ была потеряна, из-за этого и возникла проблема.

href заменена на data_target.

Выкладываю код. Страницы с контентом не привожу, они стандартные html-файлы.

ajax.js

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$(function() {
  $('#menu a').click(function() {
    $.ajax({
      url:$(this).attr('data_target'),
      cache: false,
      success: function(html) {
        $("#content").html(html);
      }
    });
    return false;
  });
});

index.html

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
 
<html lang="ru-RU">
  <head>
    <meta charset="UTF-8">
    <title>Наименование сайта</title>
    
    <script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src='ajax.js'></script>
 
    <style>
      #menu {relative; top:0.5cm; padding-top:1cm; padding-left:13.5cm; font-size:16pt; word-spacing:1.5cm; font-family:Tahoma; font-style:italic;}
      #menu a:link {color:#000000}
      #menu a:visited {font-weight:lighter; color:#000000}
      #menu a:hover {font-weight:bolder; color:#000000}
      #menu a:active {font-weight:bold; color:#000000;}
      #menu a{text-decoration:none;}
 
      #logo {position:absolute; padding-left:5cm; top: 0px; padding-top:1cm;}
      #header {position:relative; top: 0.5cm; padding-left:18cm; font-size:11pt; font-family:Microsoft Sans Serif; color:#8e8e8e;}
      
      #content {}
 
    </style>
  
 
  </head>
 
  <body>
 
   <p id="header"><i>Разработка, производство, поставка специальных машин и устройств</i></p>
 
 
    <div id="menu">
      <a data_target="main.html">Главная</a>
      <a data_target="directions.html">Направления</a>
      <a data_target="services.html">Продукция</a>
      <a data_target="about.html" style="word-spacing:0cm">О&nbsp;Предприятии</a>
    </div>
  
    <img id="logo" src="/pictures/logo.jpg" alt="logo"/> 
 
    <div id="content"></div>
  </body>
</html>

Отвечаю на предыдущие вопросы уже не актуальные (возможно кому-нибудь помогут)
1) Все файлы находятся в одной папке.
2) В локальном сервере запускал через значок openserver на панели задач.

Еще раз. ВСЕМ ОГРОМНОЕ СПАСИБО!!!

@Lazy_Den · 05.03.2018, 15:01

Сообщение от 19dmitry

href заменена на data_target

Не обязательно. Ссылка могла служить в качестве fallback. И еще, если даже атрибут, то я бы всё-таки использовал data-атрибут. В jQuery доступ к его значению даёт метод data().

HTML5
1
<a data-target="main.html">Главная</a>

JavaScript
1
$('a').data('target'); // main.html

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Программа принимает математическое выражение в виде строки и выдаёт его производную в виде строки и вычисляет значение производной при заданном х Логарифм записывается как: (x-2)log(x^2+2) -. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

Ajax динамическая подгрузка данных html на страницу

Решение

Решение

@19dmitry 37 / 37 / 22 Регистрация: 18.01.2014 Сообщений: 150
	05.03.2018, 12:54 [ТС]
	Пробую уже разные варианты: 1) локально, через openserver 2) через хост Hostiman Результат один и тот же. Прикрепляю скрины вкладок Network. Судя по чистому окну консоли, ответа от сервера нет. Миниатюры 0

@19dmitry 37 / 37 / 22 Регистрация: 18.01.2014 Сообщений: 150
	05.03.2018, 13:24 [ТС]
	При data_target ссылка не работает, курсор-стрелка меняется на прямую черту. При href отображается следующая ошибка: Миниатюры 0

@19dmitry 37 / 37 / 22 Регистрация: 18.01.2014 Сообщений: 150
	05.03.2018, 13:26 [ТС]
	Хотя не понятно, ведь файл jquery находится там же где и остальные страницы сайта, в папке js. Почему он его ищет по прежнему адресу? 0