Как обновить информацию из базы данных MySql без обновления страницы?(используя jQuery / AJAX)

Question

Я думаю, это довольно простой вопрос, но я не парень AJAX, попробовал, но я все еще не понимаю)))

Вот ситуация:

1) Я получаю один случайный URL из базы данных

$sql = ("SELECT url FROM url_table ORDER BY RAND() LIMIT 1");

       while($row = mysql_fetch_array($sql)){

             $url = $row["url"];

    }

2) Чем я отображаю веб-сайт с URL = $ url в iframe

<iframe src="<?php echo "$url"; ?>"></iframe>

3) Тогда у меня есть <button id="Next url">, который при нажатии обновляет веб-сайт, поэтому новый случайный URL выбирается из базы данных и отображается в <iframe>

---

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

Пользователь нажимает кнопку " Next * " >> Новый случайный $ url get выбран из базы данных >> после этого новый URL отображается в iframe (<iframe src="<?php echo $url?>") >> iframe показывает новый веб-сайт.

Все это без обновления страницы (если возможно, с использованием AJAX и jQuery). И по возможностиНе могли бы вы предложить, как показать loading.gif изображение в iframe, когда информация обновляется и загружается

Спасибо)))

Answer 1

Во-первых, создайте страницу, которая выплевывает только iframe (никакого другого HTML, только тег 1).Предположим, эта страница находится по адресу www.yourwebsite.com/random_iframe.php

Затем добавьте JQuery JS на свою главную страницу.На главной странице поместите iframe в элемент div с идентификатором, например:

<div id="frm"><iframe src="<?php echo "$url"; ?>"></iframe></div>

Затем обновите кнопку

<button id="Next url" onclick="show_next();return false;">

Наконец, добавьте JS

function show_next()
{
  $('#frm').load('random_iframe.php');
}

Этот код JQuery выше выбирает идентификатор 'frm' и заменяет его содержимое тем, что возвращается со страницы random_iframe.php.