如何構建ajax調用在刷新時隨機化網頁上的圖像？

Question

我正在開展一個小組項目，我希望能夠從網頁上的數據庫隨機化圖像，並將這些圖像鏈接到相應的網頁。我是ajax和php的總noobot，並且我一直在爲本網站的前端開發工作。到目前爲止，我一直給這些PHP方法

function executeZParamQuery($sql) 

{ 
    //executes and returns data from database 
    $stmt = mysqli_stmt_init($mysqli); 
    mysqli_stmt_prepare($stmt, $sql); 

    if (mysqli_stmt_execute($stmt)) 
    { 
     $result = iimysqli_stmt_get_result($stmt); 

     $data = array(); 
     while ($row = iimysqli_result_fetch_array($result)) 
      $data[] = $row; 

     mysqli_stmt_close($stmt); 
     return $data; 
    } 

    error_log("Failed to execute prepared statement: " 
    .mysqli_stmt_error($stmt)); 
    die ("Failed to execute prepared statement: " 
    .mysqli_stmt_error($stmt)); 
} 

function getAllImg() 
{ 
    $sql = "SELECT RecipeID, PictureID FROM Pictures"; 

    echo json_encode(executeZParamQuery($sql)); 
} 

，但我不知道如何利用AJAX實際操作這些功能，並隨機生成圖像。請發送一些指導。

編輯：想過我會展示你們的HTML和我想要的圖像和鏈接鏈接也

<div class="banner"> 
    <a href=""> 
    <img class="first" src="http://i.imgur.com/gZo0lXk.jpg" alt=""  style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/o0H3If2.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/p1DFGse.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/ck0dtSd.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/RAHLxlm.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/bVGK4hq.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/gZo0lXk.jpg" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/o0H3If2.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/p1DFGse.png" alt="" style="width:350px; height: 233px;" /> 
    </a> 
    <a href=""> 
    <img src="http://i.imgur.com/ck0dtSd.png" alt="" style="width:350px; height: 233px;" /> 
    <a href=""> 
    </div> 

最後4張圖片是一樣的前4，因爲我有一個動畫運動旗幟。

Answer 1

在你的情況下，你不需要Ajax來隨機返回你，在SQL語句本身中你實際上可以獲得隨機圖像。

function getAllImg() 
{ 
    $sql = "SELECT RecipeID, PictureID FROM Pictures ORDER BY RAND() "; 

    echo json_encode(executeZParamQuery($sql)); 
}