0%

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

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    <script>
    //對所有的class='sw' 建立點擊事件
    $(".sw").on("click",function(){
    //取得要交換的id資料,並使用split函式拆成陣列
    let id=$(this).data('sw').split("-")

    //使用$.post()函式向後端傳送id陣列
    $.post("./api/sw.php",{table:'poster',id},()=>{

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

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

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    include_once "../base.php";

    //將table變數的值進行首字母大寫轉換
    $table=ucfirst($_POST['table']);

    //取得對應的資料表資料
    $row0=$$table->find($_POST['id'][0]);
    $row1=$$table->find($_POST['id'][1]);

    //建立一個暫存變數來儲存第一筆資料的rank值
    $tmp=$row0['rank'];

    //將第二筆資料的rank值指定給第一筆資料
    $row0['rank']=$row1['rank'];

    //將暫存變數的值指定給第二筆資料
    $row1['rank']=$tmp;

    //將第一筆資料更新回資料表
    $$table->save($row0);

    //將第二筆資料更新回資料表
    $$table->save($row1);