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

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

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

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

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

Есть активное меню в файле 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

Новые блоги и статьи Все статьи Все блоги /
На любовном киберфронте Alexander-7 01.04.2025 Недавно на одном малоизвестном сайте знакомств мною заинтересовалась девушка: «Текст немного странный. Но, судя по адресу почты, иностранка», – подумал я. Поколебавшись пару суток, я ответил ей:. . .	Как работает Node.js изнутри run.dev 29.03.2025 Node. js изменил подход к разработке веб-приложений, позволив использовать JavaScript не только на стороне клиента, но и на сервере. Созданный в 2009 году Райаном Далем, этот открытый,. . .	Моки в Python: Mock Object Library py-thonny 29.03.2025 Тестирование кода требует особого подхода, когда речь идёт о компонентах, взаимодействующих с внешним миром. Мы часто сталкиваемся с непредсказуемостью HTTP-запросов, чтением данных из базы или. . .	JavaScript: Управление памятью и улучшение производительности run.dev 29.03.2025 В отличие от низкоуровневых языков программирования, JavaScript не требует ручного выделения и освобождения памяти. Здесь работает автоматический сборщик мусора, который определяет, какие объекты. . .	Мультитенантная архитектура со SpringBoot и PostgreSQL ArchitectMsa 29.03.2025 SaaS-приложения редко обслуживают одного клиента и обычно они должны поддерживать множество организаций, каждая из которых работает в своём изолированном пространстве. Мультитенантная архитектура. . .
std::span в C++: Производительность и лучшие практики NullReferenced 28.03.2025 std::span — одно из самых недооценённых нововведений стандарта C++20, которое радикально меняет подход к работе с непрерывными последовательностями данных. По сути, это невладеющее представление. . .	Многопоточность в C#: Threadpool UnmanagedCoder 28.03.2025 Пул потоков в C# — это коллекция заранее созданных и готовых к использованию потоков, которые находятся в распоряжении приложения. Вместо того чтобы создавать и уничтожать потоки для каждой небольшой. . .	Вопросы на собеседованиях по микросервисам ArchitectMsa 27.03.2025 Работодатели ищут не просто разработчиков, знающих базовые концепции, а специалистов, разбирающихся в тонкостях масштабирования, отказоустойчивости и производительности. Сейчас на первый план выходят. . .	Взаимодействие Python с REST API py-thonny 27.03.2025 REST API - это архитектурный стиль взаимодействия компонентов распределённого приложения в сети. Python располагает функциональным набором инструментов для работы с REST API и основная библиотека для. . .	sshd restrictions, ssh access limitations jigi33 26.03.2025 sshd restrictions \| ssh access limitations рестрикции доступа на сервер sshd статья: https:/ / www. golinuxcloud. com/ restrict-allow-ssh-certain-users-groups-rhel подробные расшифровки по. . .

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

Решение

Решение

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

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	05.03.2018, 13:17
	Сообщение от 19dmitry Прикрепляю скрины вкладок Network. Смотреть нужно XHR-запрос. Т.е. когда выполнили клик на ссылке. 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

@Корд 41 / 37 / 15 Регистрация: 22.03.2013 Сообщений: 293
	05.03.2018, 13:32
	Сообщение от 19dmitry При data_target ссылка не работает Код пожалуйста, только что не поленился запустить код - все отработало как надо 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	05.03.2018, 13:36
	Сообщение от 19dmitry следующая ошибка Вы свой html-файл запускайте не двойным кликом по нему, а на локальном сервере, через адресную строку. Или же, если локального сервера нет, то путь нужно указывать относительный. Добавлено через 1 минуту P.S. Попробуйте убрать слеш в начале. Не `/directions.html`, а просто `directions.html` 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	05.03.2018, 13:40
	Сообщение от 19dmitry В наличии файлы с контентом Кстати, эти все файлы файлы лежат рядом с index.html? Добавлено через 1 минуту Сообщение от 19dmitry всё что есть Это не всё, что есть. Во-вторых, прочитайте дополнение к моему ответу в предыдущем комментарии. 0