點擊數據庫隨機輸出，無需重新加載

Question

好的，我有這個網站，它只是一個網頁，中間有一些文字。我現在如何設置它是從表中只有一個字段從我的數據庫中抓取隨機文本。我將其迴應到<p>元素中。一切工作正常，除了現在我不想每次刷新頁面以獲得新文本。我希望能夠單擊按鈕並更改文本而無需刷新頁面。

下面是HTML這是很簡單的：

<p> 
    <?php echo $story; ?> 
</p> 

這裏是PHP：

$mysql_host = "localhost"; 
$mysql_db = "scary"; 
$mysql_user = "root"; 
$mysql_pass = ""; 
$link = mysqli_connect($mysql_host, $mysql_user, $mysql_pass, $mysql_db) or die("Some error occurred during connection " . mysqli_error($link)); 
$result = mysqli_query($link, "SELECT * FROM `stories`"); 
$total_records = mysqli_num_rows($result); 
$random_number = rand(0, $total_records - 1); 
mysqli_data_seek($result, $random_number); 
$array = mysqli_fetch_array($result); 
$story = $array['Story']; 
mysqli_free_result($result); 
mysqli_close($link); 
?> 

我希望能夠點擊一個按鈕，改變的是什麼迴盪到<p>沒有頁面刷新。我將如何能夠實現這一目標？

Answer 1

你可以用jQuery做到這一點。在這個例子中我們有兩個文件：index.html和random.php。

的index.html來源

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
    <script> 
    $(document).ready(function(){ 
     $("#button").click(function(){ 
      $("p").load("random.php",function(responseTxt,statusTxt,xhr){ 
      if(statusTxt=="error") 
       alert("Error: "+xhr.status+": "+xhr.statusText); 
      }); 
     }); 
    $("#button").click(); //loads random.php once at page load 
    }); 
    </script> 
    <p></p> 
    <button id="button">Click Me</button> 

random.php來源

<? 
$mysql_host = "localhost"; 
$mysql_db = "scary"; 
$mysql_user = "root"; 
$mysql_pass = ""; 
$link = mysqli_connect($mysql_host, $mysql_user, $mysql_pass, $mysql_db) or die("Some error occurred during connection " . mysqli_error($link)); 
$result = mysqli_query($link, "SELECT * FROM `stories`"); 
$total_records = mysqli_num_rows($result); 
$random_number = rand(0, $total_records - 1); 
mysqli_data_seek($result, $random_number); 
$array = mysqli_fetch_array($result); 
$story = $array['Story']; 
mysqli_free_result($result); 
mysqli_close($link); 
echo $story; 
?> 

注意這兩個文件必須是相同的目錄/路徑。順便說一句，如果你想從MySQL隨機獲得一行，你可以使用這個命令，而不是使用rand（）等計數所有行。：

SELECT * FROM `stories` ORDER BY RAND() LIMIT 1