ajax загрузка страницы без перезагрузки

@sandrey.de · 09.06.2013, 22:43. **Показов** 48210. **Ответов** 8

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

ajax загрузка страницы без перезагрузки внутри контента
Пример у меня есть ссылка index.php?do=rules мне нужно что бы при нажатии на эту ссылку содержимое загружалось внутри контента как это реализовать.

не могу понять почему грузит всю страницу стиля внутри контента?

Делал так.

Мой шаблон

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="loading" style="display: none">
Идет загрузка страницы...
</div>
<div id="contentBody"><!-- div автозагрузки -->
<div class="conts"><div id="mycustomscroll" class="flexcroll">
<!-- Модули -->
<p>ТуТ Контент</p>
<!-- /Модули -->
</div></div></div>
 
<li><a href="javascript:;" onclick="showContent('index.php?do=rules')">КАБИНЕТ</a></li><!-- урл страницы -->

javascript функции

JavaScript
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
function showContent(link) {
 
        var cont = document.getElementById('contentBody');
        var loading = document.getElementById('loading');
 
        cont.innerHTML = loading.innerHTML;
 
        var http = createRequestObject();                   // создаем ajax-объект
        if( http ) {
            http.open('get', link);                         // инициируем загрузку страницы
            http.onreadystatechange = function () {         // назначаем асинхронный обработчик события
                if(http.readyState == 4) {
                    cont.innerHTML = http.responseText;     // присваиваем содержимое
                }
            }
            http.send(null);    
        } else {
            document.location = link;   // если ajax-объект не удается создать, просто перенаправляем на адрес
        }
    }
 
    // создание ajax объекта
    function createRequestObject() {
        try { return new XMLHttpRequest() }
        catch(e) {
            try { return new ActiveXObject('Msxml2.XMLHTTP') }
            catch(e) {
                try { return new ActiveXObject('Microsoft.XMLHTTP') }
                catch(e) { return null; }
            }
        }
    }

DrobyshevAlex · 09.06.2013, 23:24

Сообщение от sandrey.de

не могу понять почему грузит всю страницу стиля внутри контента?

грузит ровно то, что вы отдаёте.
отдавайте браузеру на ajax запрос только необходимую часть страницы.

@sandrey.de · 09.06.2013, 23:49 **[ТС]**

Пробовал

результат>>
грузит php модуль вместе со стилем внутри контента

PHP
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Description" content="CMS NNMWOW">
    <meta name="Keywords" content="CMS NNMWOW">
    <link rel="stylesheet" href="skins/sw/css/css.css" type="text/css" />
    <link rel="stylesheet" href="skins/sw/css/engine.css" type="text/css" />
    <link rel="stylesheet" href="skins/default/style/scroller.css" type="text/css" />
    <script type="text/javascript" src="skins/sw/js/jquery-1.4.2.min.js"></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script type="text/javascript" src="skins/sw/js/flexcroll.js"></script>
    <script type="text/javascript" src="skins/sw/js/example.js"></script>
    <script type="text/javascript" src="skins/sw/js/ex.js"></script>        
</head>
<!-- Skype: no4nnm -->
<body>
 
<!-- Начало Контента -->
<div class="cont">  
 
<!-- Начало Меню -->
<div id="m_menu">
        <ul class="group" id="example-one">
            <li class="current_page_item">
            <a href="index.html">ГЛАВНАЯ</a>
            </li>
            <li><a href="reg.html">РЕГИСТРАЦИЯ</a></li>
            <li><a href="rules.html">Правила</a></li>
            <li><a href="/">О СЕРВЕРЕ</a></li>
            <li><a href="/forum">ФОРУМ</a></li>
            <li><a href="/">СТАТИСТИКА</a></li>
            <li><a href="/">ПОЖЕРТВОВАНИЯ</a></li>
            <li><a href="javascript:;" onclick="showContent('rules.html')">КАБИНЕТ</a></li>
        </ul>        
    </div>
</div>
<!-- Конец Меню -->
 
<!-- Правый Блок -->
<? include ("skins/sw/right.php"); ?>
 
<!-- Начало Новостей -->
    <div id="loading" style="display: none">
    Идет загрузка...
    </div>
    
<div class="conts"><div id="mycustomscroll" class="flexcroll">
<!-- Модули -->
<?php 
echo '<div id="contentBody">';
if (file_exists ("module/" . $do . ".php")){
include('module/'.$do . '.php'); }
else
    {
        echo'<center><font color="#000000" size="5"><img src="./skins/sw/images/error_page.png" align="сутеук">Ошибка 404</font></center><br><p><font color="#000000">Запрашиваемая Вами страница не найдена. Возможно, Вы перешли по неверной или старой ссылке. Советуем Вам перейти на</font> <a href=../><b><font color="#000000">главную страницу</font></b></a><font color="#000000"> и поискать то, что Вам нужно.</p></center></font>'; 
    }
    echo '</div>';
?>   
<!-- /Модули -->
</div></div>
<!-- Конец Новостей -->
 
<!-- Начало Баннеры -->
<div class="ban"><a href="/"></a></div>
<div class="ban1"><a href="/"></a></div>
<div class="ban2"><a href="/"></a></div>
<div class="ban3"><a href="/"></a></div>
<!-- Конец Баннеры -->
 
<!-- Начало Копирайты-->
<div id="copr"><b>Услуги верстки и дизайна по контактам: Skype:no4nnm</b></div>
<!-- Конец Копирайты -->
 
<!-- Начало Копирайты студии-->
<div id="studio"><a href="skype:no4nnm?call" title"No4NaMe"></a></div>
<!-- Конец Копирайты студии -->
 
<!-- Конец Контента -->
</div>
 
</body>
<!-- Skype: no4nnm -->
</html>

DrobyshevAlex · 09.06.2013, 23:52

Что Вы пробовали? Я ещё раз повторю.
Всё что отдаёт web сервер по адресу к которому обращается ajax. Всё это и получает ajax.

Вам нужно отдавать только нужную часть! То есть сделать вывод с вэб сервера только контента необходимого, без стилей и прочей разметки.

@sandrey.de · 10.06.2013, 00:05 **[ТС]**

все понял подгружать нужно прямой ссылкой но когда подгружаю отдельно пропадает div flexcroll

DrobyshevAlex · 10.06.2013, 00:16

Ну так Вы куза зыгружаете?

Сообщение от sandrey.de

JavaScript
1
cont.innerHTML = http.responseText;

в contentBody, через innerHTML, следовательно всё что было внутри, Вы затираете новыми данными.
Грузите в элемнет p.
или передавайте тот див вместе с контентом
или добавляйте его в js скрипте

@sandrey.de · 10.06.2013, 00:50 **[ТС]**

я в этом полный ноль если можно поподробнее

DrobyshevAlex · 10.06.2013, 00:55

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div id="loading" style="display: none">
Идет загрузка страницы...
</div>
<div><!-- div автозагрузки -->
<div class="conts"><div id="mycustomscroll" class="flexcroll">
<!-- Модули -->
<p id="contentBody">ТуТ Контент</p>
<!-- /Модули -->
</div></div></div>
 
<li><a href="javascript:;" onclick="showContent('index.php?do=rules')">КАБИНЕТ</a></li><!-- урл страницы -->

@sandrey.de · 10.06.2013, 18:20 **[ТС]**

Не выходит у меня модули выводятся так

index.php

PHP
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
<body>
 
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<head>
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
</head>
<?php
include("inc/config.php");
echo"<title>$title</title>";
if (isset($_GET['k']) || isset($_POST['k'])) {
$k = trim(isset($_POST['k']) ? $_POST['k'] : $_GET['k']);
if (preg_match("/[1-9]/", $k)) {Header();exit;}}  
if (isset($_GET['do']) || isset($_POST['do'])) {
$do = trim(isset($_POST['do']) ? $_POST['do'] : $_GET['do']);
if (preg_match("/[1-9]/", $do)) {
exit;
    }
} else {
    $do = "start";
}
switch ($do):
 case 'change_skin':
  $skin_name = $_POST["skin"];
  setcookie("skin_name", $skin_name, time()+2592000);
  quickrefresh('inc/news.php');
  break;
 case 'logout':
  resetcookies();
  quickrefresh('inc/news.php');
  break;
endswitch;
$skin_name = $_COOKIE['skin_name'];
if ($skin_name == '') $skin_name = $skins[1][1];
$skin_name="skins/".$skin_name."/".$skin_name.".php";
if (file_exists($skin_name))
{
include($skin_name);
}
else
{
include ('skins/'.$skin.'/'.$skin.'.php');
}
if (!file_exists('skins/'.$skin.'/'.$skin.'.php')) 
 
?>
 
</html>
 
</body>

при создании php файл в папке module модуль вызывается адресом index.php?do=имя модуля
в стиле сделано так

PHP
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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>{TITLE}</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Description" content="CMS NNMWOW">
    <meta name="Keywords" content="CMS NNMWOW">
    <link rel="stylesheet" href="skins/sw/css/css.css" type="text/css" />
    <link rel="stylesheet" href="skins/sw/css/engine.css" type="text/css" />
    <link rel="stylesheet" href="skins/default/style/scroller.css" type="text/css" />
    <script type="text/javascript" src="skins/sw/js/jquery-1.4.2.min.js"></script>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script type="text/javascript" src="skins/sw/js/flexcroll.js"></script>
    <script type="text/javascript" src="skins/sw/js/example.js"></script>
    <script type="text/javascript" src="skins/sw/js/ex.js"></script>        
</head>
<!-- Skype: no4nnm -->
<body>
 
<!-- Начало Контента -->
<div class="cont">  
 
<!-- Начало Меню -->
<div id="m_menu">
        <ul class="group" id="example-one">
            <li class="current_page_item">
            <a href="index.html">ГЛАВНАЯ</a>
            </li>
            <li><a href="reg.html">РЕГИСТРАЦИЯ</a></li>
            <li><a href="rules.html">Правила</a></li>
            <li><a href="/">О СЕРВЕРЕ</a></li>
            <li><a href="/forum">ФОРУМ</a></li>
            <li><a href="/">СТАТИСТИКА</a></li>
            <li><a href="/">ПОЖЕРТВОВАНИЯ</a></li>
            <li><a href="/">КАБИНЕТ</a></li>
        </ul>        
    </div>
</div>
<!-- Конец Меню -->
 
<!-- Правый Блок -->
<? include ("skins/sw/right.php"); ?>
 
<!-- Начало Новостей -->
    
<div class="conts"><div id="mycustomscroll" class="flexcroll">
<!-- Модули -->
<?php 
if (file_exists ("module/" . $do . ".php")){
include('module/'.$do . '.php'); }
else
    {
        echo'<center><font color="#000000" size="5"><img src="./skins/sw/images/error_page.png" align="сутеук">Ошибка 404</font></center><br><p><font color="#000000">Запрашиваемая Вами страница не найдена. Возможно, Вы перешли по неверной или старой ссылке. Советуем Вам перейти на</font> <a href=../><b><font color="#000000">главную страницу</font></b></a><font color="#000000"> и поискать то, что Вам нужно.</p></center></font>'; 
    }
?>   
<!-- /Модули -->
</div></div></div>
<!-- Конец Новостей -->
 
<!-- Начало Баннера -->
<div class="ban"><a href="/"></a></div>
<div class="ban1"><a href="/"></a></div>
<div class="ban2"><a href="/"></a></div>
<div class="ban3"><a href="/"></a></div>
<!-- Конец Баннера -->
 
<!-- Начало Копирайты-->
<div id="copr"><b>Услуги верстки и дизайна по контактам: Skype:no4nnm</b></div>
<!-- Конец Копирайты -->
 
<!-- Начало Копирайты студии-->
<div id="studio"><a href="skype:no4nnm?call" title"No4NaMe"></a></div>
<!-- Конец Копирайты студии -->
 
<!-- Конец Контента -->
</div>
 
</body>
<!-- Skype: no4nnm -->
</html>

но вот не пойму как реализовать тут загрузку модулей без перезагрузке страницы.

Добавлено через 17 часов 13 минут
сделал напрямую загрузку модулей без перезагрузке всей страницы, но встала еще одна проблема классы и дивы не работают если я их подключаю в самом модули.

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-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, то после закрытия окошка. . .

DrobyshevAlex 1178 / 1128 / 94 Регистрация: 31.05.2012 Сообщений: 3,060
	09.06.2013, 23:52
	Что Вы пробовали? Я ещё раз повторю. Всё что отдаёт web сервер по адресу к которому обращается ajax. Всё это и получает ajax. Вам нужно отдавать только нужную часть! То есть сделать вывод с вэб сервера только контента необходимого, без стилей и прочей разметки. 0

@sandrey.de Заблокирован
	10.06.2013, 00:05 [ТС]
	все понял подгружать нужно прямой ссылкой но когда подгружаю отдельно пропадает div flexcroll 0

@sandrey.de Заблокирован
	10.06.2013, 00:50 [ТС]
	я в этом полный ноль если можно поподробнее 0