在不重新加载整个页面的情况下更新网页的特定区域

Update Specific Area of Web Page Without Re-loading Entire Page

本文关键字：情况下 更新 网页 区域 新加载 加载      更新时间：2023-09-26

我有一个简单的PHP脚本，它从文本文件中读取特定的短语，并在网页上随机显示一个。为了显示另一个随机短语，当前必须刷新整个页面。我的问题是 - 有没有办法只更新包含短语的页面区域，每次单击按钮时显示一个新短语？目前，下面的 PHP 包含在使用 CSS 样式化的 h1 标签中。然后，我在它下面包含一个注释，告诉用户刷新页面以显示另一个随机短语。理想情况下，我希望将此评论更改为按钮，以便用户不必每次都刷新整个页面。

以下是用于显示随机短语的简单 PHP：

$str = file_get_contents('words.txt'); //Take the contents from the file to the variable
$result = explode(',',$str); //Split it by ','
echo $result[array_rand($result)]; //Return a random entry from the array.

任何帮助将不胜感激。

干杯，汤姆

我曾经开始学习 PHP/AJX 的例子，摘自 Using jQuery...

创建一个 php 脚本来接收 http 请求并从数据库中获取数据 

//--------------------------------------------------------------------------
// Example php script for fetching data from mysql database
//--------------------------------------------------------------------------
$host = "localhost";
$user = "root";
$pass = "root";
$databaseName = "ajax01";
$tableName = "variables";
//--------------------------------------------------------------------------
// 1) Connect to mysql database
//--------------------------------------------------------------------------
include 'DB.php';
$con = mysql_connect($host,$user,$pass);
$dbs = mysql_select_db($databaseName, $con);
//--------------------------------------------------------------------------
// 2) Query database for data
//--------------------------------------------------------------------------
$result = mysql_query("SELECT * FROM $tableName");          //query
$array = mysql_fetch_row($result);                          //fetch result    
//--------------------------------------------------------------------------
// 3) echo result as json 
//--------------------------------------------------------------------------
  echo json_encode($array);

客户端示例

输出：

此元素将由 jQuery 访问，并替换此文本 
<script id="source" language="javascript" type="text/javascript">
$(function () 
{
  //-----------------------------------------------------------------------
  // 2) Send a http request with AJAX http://api.jquery.com/jQuery.ajax/
  //-----------------------------------------------------------------------
  $.ajax({                                      
    url: 'api.php',                  //the script to call to get data          
    data: "",                        //you can insert url argumnets here to pass to api.php
                                     //for example "id=5&parent=6"
    dataType: 'json',                //data format      
    success: function(data)          //on recieve of reply
    {
      var id = data[0];              //get id
      var vname = data[1];           //get name
      //--------------------------------------------------------------------
      // 3) Update html content
      //--------------------------------------------------------------------
      $('#output').html("<b>id: </b>"+id+"<b> name: </b>"+vname); //Set output element html
      //recommend reading up on jquery selectors they are awesome 
      // http://api.jquery.com/category/selectors/
    } 
  });
}); 
</script>
</body>

我能想到的两种方法：

  1. 每次刷新加载一堆，假设 10 个，但只显示其中的 1 个。单击一个按钮时，循环浏览其他 9 个按钮。
  2. 使用 AJAX 并实际加载每个按钮单击的新短语。

使用 jQuery 这很容易：

.html：

<div id="random"></div>
<input type="button" id="update" />

JavaScript：

<script>
$("#update").on("click", function() {
    $.ajax({
        url: "/randomwords.php",
        success: function(data) { $("#random").html(data); }
    });
});
</script>

randomwords.php是上面的代码片段，没有其他任何东西。

相关文章：