Переходы без перезагрузки страницы

[Богдан]

Решение, возможно, корявенько, но все же лучше чем ничего.

Нам понадобиться:

1. Главная страница (index.html):

Код: Выделить всё

<!--Подключаем библиотеку jquery--><script type="text/javascript" src="http://greenaps.ru/jquery.js"></script><script type="text/javascript">    function page1(val) {        $.ajax({        url: "page1.php?viewer_id="+val, // Страница, которую мы будем загружать        cache: false,        success: function(html){        $("#content").html(html); // Блок, в который мы будем загружать эту страницу        }        });    }            function page2() {        $.ajax({        url: "page2.php",        cache: false,        success: function(html){        $("#content").html(html);        }        });    }</script> <button onclick="page1('123')">Открыть страницу 1</button><button onclick="page2()">Открыть страницу 2</button><div id="content"></div>

2. Страницы page1.php и page2.php, на которые мы будем "переходить":

page1.php:

Код: Выделить всё

<font style="color:red;"><?$viewer_id = $_GET['viewer_id']; /*Достаем viewer_id из GET-запроса*/echo "Пользователь: ".$viewer_id; /*Выводим viewer_id на страницу*/?></font> 

page2.php:

Код: Выделить всё

<font style="color:green;">page 2</font>

3. Библиотека jquery: http://jquery.com/download/

Что происходит?

- Когда мы нажимаем на кнопку 1, скрипт загружает и отображает нашу страницу (page1.php) в блоке div с идентификатором "content". Тоже самое и со второй кнопкой.
Первая кнопка передает дополнительный параметр - число "123". Таким образом можно передавать на страницу, например, viewer_id.

Вся эта жуть должна лежать в одной директории.

Пример можно посмотреть тут: http://greenaps.ru/lesson1/
Скачать исходник вместе и с библиотекой: http://greenaps.ru/lesson1.rar

[GMaX]

Помоему в bootstrap есть функция намного проще.