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

Готовые уроки IFrame + ВКонтакте API

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

Сообщение Богдан » 24 мар 2013, 00:08

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

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

1. Главная страница (index.html):
  1. <!--Подключаем библиотеку jquery-->
  2. <script type="text/javascript" src="http://greenaps.ru/jquery.js"></script>
  3. <script type="text/javascript">
  4.     function page1(val) {
  5.         $.ajax({
  6.         url: "page1.php?viewer_id="+val, // Страница, которую мы будем загружать
  7.         cache: false,
  8.         success: function(html){
  9.         $("#content").html(html); // Блок, в который мы будем загружать эту страницу
  10.         }
  11.         });
  12.     }
  13.        
  14.     function page2() {
  15.         $.ajax({
  16.         url: "page2.php",
  17.         cache: false,
  18.         success: function(html){
  19.         $("#content").html(html);
  20.         }
  21.         });
  22.     }
  23. </script>
  24.  
  25. <button onclick="page1('123')">Открыть страницу 1</button>
  26. <button onclick="page2()">Открыть страницу 2</button>
  27. <div id="content"></div>


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

page1.php:

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


page2.php:



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

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

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

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

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

За это сообщение автора Богдан поблагодарил:
Влад
Аватара пользователя
Богдан

 
Автор темы
Сообщения: 21
Зарегистрирован: 26 дек 2010, 05:22
Благодарил (а): 4 раз.
Поблагодарили: 2 раз.

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

Google
 



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

Сообщение GMaX » 02 ноя 2013, 21:02

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

 
Сообщения: 10
Зарегистрирован: 02 ноя 2013, 14:17
Благодарил (а): 2 раз.
Поблагодарили: 0 раз.


Вернуться в Уроки IFrame ВКонтакте



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0