PHP網頁 checkbox問題

php mysql

scjh8214 2019-02-04 18:12:50 ‧ 2282 瀏覽

分享至

有辦法在網頁上讓使用者

打勾觸發SQL語法更改資料表內容
例如:資料庫有個欄位原本是0變1
取消打勾觸發SQL語法更改資料表內容
例如:資料庫有個欄位原本是1變0

如果有辦法可以提供一下參考資料或是語法
沒辦法那還有沒有其他方式可以讓使用者在網頁上以按鈕的方式
來觸發上面的功能呢??

weiclin iT邦高手 4 級 ‧ 2019-02-04 18:28:24 檢舉

AJAX

Ryan iT邦新手 4 級 ‧ 2019-02-05 11:59:56 檢舉

請下Google關鍵字:jquery checkbox set checked

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

淺水員

iT邦大師 6 級 ‧ 2019-02-04 18:26:52

瀏覽器端：checkbox 的 onchange 事件 ==> 鎖定 checkbox 避免重複觸發 ==> 發送 ajax 給伺服器
伺服器端：收到請求 ==> 驗證請求 ==> 修改資料庫 ==> 依照狀態回傳http狀態碼
瀏覽器端：收到伺服器端回應 ==> 如果http狀態碼顯示失敗，則還原 checkbox ==> 解除 checkbox 鎖定

回應 4
分享
檢舉

看更多先前的回應...收起先前的回應...

scjh8214 iT邦新手 5 級 ‧ 2019-02-04 20:04:49 檢舉

這個是不是對PHP沒有很熟的人來說有點困難0.0?

淺水員 iT邦大師 6 級 ‧ 2019-02-04 20:31:42 檢舉

只有第二步是php，其他都是javascript

淺水員 iT邦大師 6 級 ‧ 2019-02-04 22:20:32 檢舉

這邊給個範例，主要是針對 ajax 的

api.php (伺服器端，擔任回應客戶端請求的角色)

<?php
//檢查參數 id 是否存在
if(!isset($_GET['id'])){
    http_response_code(400);
    exit('Bad Request');
}
//檢查參數 id 是不是 1
if($_GET['id']!=1){
    http_response_code(403);
    exit('Forbidden');
}
//都通過的話會回傳 200 OK
http_response_code(200);
echo 'OK';

index.html(客戶端，能夠發送 ajax，並處理回應)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>測試頁面</title>
</head>
<body>
    <button onclick='sendRequest()'>無參數</button>
    <button onclick='sendRequest(0)'>id=0</button>
    <button onclick='sendRequest(1)'>id=1</button>
    <p id='log'></p>
    <script type="text/javascript">
    function sendRequest(id)
    {
        var xhr=new XMLHttpRequest();
        xhr.open('GET','api.php'+(id!==undefined?'?id='+id:''));
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function (){
            var log=document.getElementById('log');
            if(this.readyState==4){
                if(this.status==200){
                    log.textContent='成功';
                } else {
                    log.textContent='失敗('+this.status+'): '
                                   +this.responseText;
                }
            }
        }
        xhr.send();
    }
    </script>
</body>
</html>

參考資料：

關於 http 狀態回應
http_response_code
isset與empty及is_null比較
XMLHttpRequest(原生 javascript 的 ajax)
jQuery 的 ajax(這邊範例沒有使用，但是滿多人用的)

這邊給個範例，主要是針對 ajax 的

api.php (伺服器端，擔任回應客戶端請求的角色)
```
<?php
//檢查參數 id 是否存在
if(!isset($_GET['id'])){
    http_response_code(400);
    exit('Bad Request');
}
//檢查參數 id 是不是 1
if($_GET['id']!=1){
    http_response_code(403);
    exit('Forbidden');
}
//都通過的話會回傳 200 OK
http_response_code(200);
echo 'OK';
```

index.html(客戶端，能夠發送 ajax，並處理回應)
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>測試頁面</title>
</head>
<body>
    <button onclick='sendRequest()'>無參數</button>
    <button onclick='sendRequest(0)'>id=0</button>
    <button onclick='sendRequest(1)'>id=1</button>
    <p id='log'></p>
    <script type="text/javascript">
    function sendRequest(id)
    {
        var xhr=new XMLHttpRequest();
        xhr.open('GET','api.php'+(id!==undefined?'?id='+id:''));
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        xhr.onreadystatechange=function (){
            var log=document.getElementById('log');
            if(this.readyState==4){
                if(this.status==200){
                    log.textContent='成功';
                } else {
                    log.textContent='失敗('+this.status+'): '
                                   +this.responseText;
                }
            }
        }
        xhr.send();
    }
    </script>
</body>
</html>
```
參考資料：
* [關於 http 狀態回應](https://developer.mozilla.org/zh-TW/docs/Web/HTTP/Status)
* [http_response_code](http://php.net/manual/en/function.http-response-code.php)
* [isset與empty及is_null比較](https://ithelp.ithome.com.tw/articles/10156786)
*  [XMLHttpRequest](https://www.w3schools.com/xml/xml_http.asp)(原生 javascript 的 ajax)
* [jQuery 的 ajax](http://api.jquery.com/jquery.ajax/)(這邊範例沒有使用，但是滿多人用的)

修改