---
# System prepended metadata

title: 筆記(九) ajax加載按鈕(完)
tags: [mysql, php, ajax, js]

---

---
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