如何在没有页面刷新的情况下从MySql数据库更新信息？ （使用jQuery / AJAX）

Question

我想这是一个简单的问题，但我不是AJAX的人，尝试过，但我仍然不明白）））

情况如下：

1）我从数据库中获得一个随机网址

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

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

             $url = $row["url"];

    }

2）比我在iframe中显示网址为 $ url 的网站

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

3）然后我点击<button id="Next url">，点击后会刷新网站，因此从数据库中选择新的随机网址并显示在<iframe>

---

我想要做的是同一个过程，但没有页面刷新。理想情况下，流程应该是这样的：

用户点击“下一个按钮”＆gt;＆gt; 新的随机$ url get从数据库＆gt;＆gt; 中选择url在iframe中回显（<iframe src="<?php echo $url?>"）＆gt;＆gt; iframe显示新网站。

所有这一切都没有页面刷新（如果可能的话，使用AJAX和jQuery）。如果可能的话，请你建议如何在信息更新和加载时在iframe中显示loading.gif图像

谢谢）））

Answer 1

首先，创建一个只吐出iframe的页面（没有其他HTML，只有1个标签）。我们假设此页面位于www.yourwebsite.com/random_iframe.php

接下来，将JQuery JS添加到主页面。 在主页面上，将iframe包装在带有id的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代码选择ID“frm”并将其内容替换为页面'random_iframe.php'返回的内容。