Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.69/26: Рейтинг темы: голосов - 26, средняя оценка - 4.69
Заблокирован
1

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

09.06.2013, 22:43. Показов 5417. Ответов 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; }
            }
        }
    }
__________________
Помощь в написании контрольных, курсовых и дипломных работ здесь
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
09.06.2013, 22:43
Ответы с готовыми решениями:

Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)
Привет. Это, в каком-то смысле, продолжение креатива...

Отправка формы без перезагрузки страницы (AJAX)
Все работает нормально, но почему то дублируются поля ввода ИМЯ и СООБЩЕНИЕ после нажатия на кнопку...

Отправка формы без перезагрузки страницы Ajax
Здравствуйте! Никак не могу отправить. В чем ошибка, если есть? Файлы index.html и jquery.js...

Загрузка контента без перезагрузки страницы
Поставил скрипт http://coderhs.com/archive/content_loading_ajax Все работает, но он не работают...

8
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
09.06.2013, 23:24 2
Цитата Сообщение от sandrey.de Посмотреть сообщение
не могу понять почему грузит всю страницу стиля внутри контента?
грузит ровно то, что вы отдаёте.
отдавайте браузеру на ajax запрос только необходимую часть страницы.
0
Заблокирован
09.06.2013, 23:49  [ТС] 3
Пробовал

результат>>
грузит 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>
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
09.06.2013, 23:52 4
Что Вы пробовали? Я ещё раз повторю.
Всё что отдаёт web сервер по адресу к которому обращается ajax. Всё это и получает ajax.

Вам нужно отдавать только нужную часть! То есть сделать вывод с вэб сервера только контента необходимого, без стилей и прочей разметки.
0
Заблокирован
10.06.2013, 00:05  [ТС] 5
все понял подгружать нужно прямой ссылкой но когда подгружаю отдельно пропадает div flexcroll
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
10.06.2013, 00:16 6
Ну так Вы куза зыгружаете?
Цитата Сообщение от sandrey.de Посмотреть сообщение
Javascript
1
cont.innerHTML = http.responseText;
в contentBody, через innerHTML, следовательно всё что было внутри, Вы затираете новыми данными.
Грузите в элемнет p.
или передавайте тот див вместе с контентом
или добавляйте его в js скрипте
0
Заблокирован
10.06.2013, 00:50  [ТС] 7
я в этом полный ноль если можно поподробнее
0
1178 / 1128 / 94
Регистрация: 31.05.2012
Сообщений: 3,060
10.06.2013, 00:55 8
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><!-- урл страницы -->
0
Заблокирован
10.06.2013, 18:20  [ТС] 9
Не выходит у меня модули выводятся так

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 минут
сделал напрямую загрузку модулей без перезагрузке всей страницы, но встала еще одна проблема классы и дивы не работают если я их подключаю в самом модули.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
10.06.2013, 18:20

Как заставить этот код работать без перезагрузки страницы (ajax)
Здравствуйте. Вопрос такой - есть страница table.html в неё подключается table.php с помощью...

Как сделать мультизагрузку фото с ajax и php без перезагрузки страницы?
или хотя бы как можно как можно отправить данные массива name='image' в файл обработчик ? ...

AJAX - как сделать запрос к PHP-коду без перезагрузки страницы
Эта тема имеет больше общего с JavaScript, но ввиду того, как часто у новичков возникают вопросы...

Проверка на xmlhttprequest для ajax, динамическое обновление контента без перезагрузки страницы
Доброго времени суток уважаемые форумчане, Облазил и перерыл весь интернет но конкретного ответа...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.