0%

[技能檢定]題組三 步驟8 後台預告片排序功能

排序功能我們使用Ajax功能來製作,原理是當使用者按下 往上往下 按鈕時,取得要交換的id資料,然後通知後端程式交換兩筆資料的 rank 欄位數值,藉此達到更換排序的目的,前端只需在後端交換完成後重新載入頁面,就會看到新的排序結果。

  1. 在頁面下方使用 jQuery 建立 ajax 程式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    //對所有的.btn 建立點擊事件
    $(".btn").on("click",function(){
    //取得當前資料的id
    let id=$(this).data('id');
    //取得要交換排序的資料id
    let sw=$(this).data('sw');
    //設定一個table變數
    let table='poster'

    //使用ajax向後端傳送資料
    $.post("./api/sw.php",{id,sw,table},()=>{
    //資料交換完畢後重整頁面
    location.reload()
    })
    })
  2. 在上方程式中我們傳送的資料除了id還有一個table的資料,這是因為院線片也會使用到排序的功能,為了提高程式碼的重用性,因此我們增加一個參數,讓交換排序的後端程式可以讓多個功能來共用。

  3. 建立 /api/sw.php 檔案,並撰寫資料交換程式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    include_once 'db.php';

    //利用$_POST['table']來建立一個資料表物件
    $DB=new DB($_POST['table']);
    //取得當前資料
    $row=$DB->find($_POST['id']);
    //取得要交換排序的資料
    $sw=$DB->find($_POST['sw']);

    //交換排序值
    $tmp=$row['rank'];
    $row['rank']=$sw['rank'];
    $sw['rank']=$tmp;

    //存回資料表
    $DB->save($row);
    $DB->save($sw);