筆記(九) ajax加載按鈕(完)

--- title: 筆記(九) ajax加載按鈕(完) tags: php,mysql,ajax,js --- ###### tags: `ajax` `php` `js` `mysql` ## ajax 加載更多 ### 前言資料庫的資料越來越多，當要全部展現出來對網路是一個不小的負擔，也會造成網路讀取的速度延長。因此使用ajax做出動態加載的效果。 :::success :warning: 點擊某個按鈕時僅更新特定區域的內容，而不是重新加載整個頁面。 ::: ### ajax簡介 Ajax（Asynchronous JavaScript and XML）是一種使用 JavaScript、XML、CSS 和 XMLHttpRequest 技術進行網頁交互的技術。通過 Ajax 技術，網頁可以在不刷新整個頁面的情況下，與網頁伺服器進行數據交換和更新。 Ajax 技術的核心是 XMLHttpRequest 物件，它可以用於向伺服器發送 HTTP 請求，並接收伺服器返回的數據。當網頁需要更新部分內容時，JavaScript 會使用 XMLHttpRequest 物件向伺服器發送請求，伺服器返回需要更新的數據，JavaScript 再通過 DOM 技術將數據插入到網頁中，實現網頁的局部更新。 **Ajax 技術的優點包括：** - 無需刷新整個網頁，可以實現局部更新，提高了用戶體驗。 - 可以實現非同步請求，提高了網頁的性能和效率。 - 可以實現動態載入數據，減少了網頁的加載時間。 - 可以實現與伺服器的即時交互，實現了更多的互動性。 --- ### 作法 > 在要加載的地方設定好id和class，方便script在找資料時能夠快速。[color=green] > 往哪裡加載延伸也要做好設定，練習時我給他一個新的 ==< div class="row" id="show-next" >== ，在ajax中，新加載資料append在這個class中。[color=orange] #### :red_circle: 以下為簡略程式碼 ```php! <?php //connect database(以下略) //一開始先抓10筆資料 $sql = "select * from `資料表名稱` order by Auto_NO desc limit 10"; $result = $conn->query($sql); $id=""; ?> <head> <title>ajax練習</title> </head> <body> <div class="container"> <div class="row" id="load-data"> <?php for($i=0; $i<$result->num_rows; $i++){ $row = $result->fatch_assoc(); $id = $row['Auto_NO']; echo' //印出資料內容和格式 '; } ?> </div> <div class="row justify-content-center" id="show-more"> <button type="button" class="show-more-button" id="<?php echo $id;?>"> 載入更多 </button> <?php $tmp=$id; ?> </div> <div class="row" id="show-next"> //append之處 </div> </div> </body> ``` --- > #### **解析** > - id="load-data": 最初sql抓取的資料顯示地方。 > - id="show-more": 顯示完下方要放置加載更多的按鈕的地方。 > - class="show-more-button": 加載更多的按鈕。 > - id="show-next": 留一個空間讓ajax抓取來的data append在這個空間。 > - id= ==<?php echo $id; ?>== : 代表迴圈跑完，最後一筆是在資料的第幾編號。 > :::danger > :warning: 很重要，因為ajax要加載剩下的資料是看這個$id編號來選擇抓取哪個區間的資料。 > ::: > [color=#FF7575] --- #### :red_circle: 接著是在下方寫下<script> ```php! <script> //當按下.show-more-button時會觸發以下function: $(document).on("click", ".show-more-button",function(){ var id = $(".show-more-button").attr("id"); //執行過程中button的內容會變成下方的 "加載中..." $('.show-more-button').html("加載中..."); $.ajax({ url: "load_more_data.php", method: "POST", data: { "c_id": id }, dataType: "text", success: function(data){ if(data != ""){ $("#show-more").remove(); $("#show-next").append(data); }else{ $(".show-more-button").remove(); $("#show-more").html("<h5 class='text-center'><br><br><br>到最底囉「( •`ω•́ )「</h5>"); } }, }); }) </script> ``` --- > #### **script解析** > - var id: 取得在(.show-more-button)的id值 > :::danger > .attr()是jQuery函數庫中的一個方法，用於設置或獲取元素的屬性值。通過這個方法，可以使用JavaScript動態修改HTML元素的屬性值。 > .attr()方法可以用於設置或獲取元素的任意屬性，比如練習時的id，所以才要將隨時會變的$id放置在這邊。 > ::: > > $.ajax({內容}) > > - url: 連結到load-more-data.php中，在那邊會執行接下來的動作，包括抓取接下筆的sql，和回傳什麼樣的格式資料。 > > - method: 格式為POST > > - data: 傳過去的資料為var id > > - success: 當執行順利的話，會接著以下動作: > > :::info > > 當回傳的data有內容時: > > #show-more這個div區塊被移除 > > #show-next著個原本空著的區塊增添了回傳的data > > ::: > > :::warning > > 當已經沒有內容時: > > .show-more-button的按鈕被移除 > > #show-more這個區塊改為html文字 > > ::: > > [color=#FF7575] > > [color=#00AEAE] --- #### :black_circle: load-more-data.php ```php! <?php //資料庫連線 ... //接收POST資料 $id = addslashes($_POST["c_id"]); //儲存回傳的內容 $output = ""; //執行sql抓取資料，抓取的資料其Auto_NO要小於原本已顯示的編號 //再抓取10筆資料 $sql = "select * from `資料表名稱` where `Auto_NO` < "$id" order by Auto_NO desc limit 10"; $result = $conn->query($sql); if($result->num_rows > 0){ //資料庫還有資料 for($i=0; $i<$result->num_rows; $i++){ $row = $result->fetch_assoc(); //每一次迴圈都更改其$id值 $id = $row['Auto_NO']; //執行內容儲存進$output內 $output .= ''; $tmp = $id; } //將被移除的#show-more等等補上 $output .= ' <div class="row justify-content-center" id="show-more"> <button type="button" class="show-more-button" id="'.$tmp.'"> 載入更多 </button> </div> '; //回傳$output echo $output; } ?> ``` --- > #### **load-more-data.php解析** > - 接收前面data傳來的POST資料。 > - 設一個變數$output用來儲存要輸出的文本。 > - 在這裡抓取接下來的資料筆數 > - 判斷抓取的sql有無值，接著要輸出什麼全照前面一開始的格式(複製貼上即可) > :tada: 這些回傳到本頁面上就能實現加載功能了 > [color=#FF7575] --- ### 結尾如此一來就能實現動態加載功能了。 ###### 筆記時間2023/3/16