2020年10月29日 星期四

用 PHP 與 jQuery Ajax 存取資料庫 (習題)

前陣子網友詢問如何依據輸入的身分證從資料庫中提取有效日期且可進行修改, 參考下面這篇底下的留言 :

測試 jQuery 的 Ajax 函數 $.ajax()

因我這陣子在忙 jQuery Mobile 沒時間思考, 今天稍微告一段落, 就來做一下這道習題, 順便複習一下 jQuery UI 與 PHP, 久沒做還真的會生鏽.  此測試參考了之前的文章 :

首先在 MySQL 建一個資料表 pid_valid_date, 根據網友問題描述, 需要兩個欄位 :

  • pid : varchar(10) 儲存身分證
  • valid_date : varchar(10) 儲存 YYYY-MM-DD 格式之有效日期

建資料表的 SQL 指令如下 :

--
-- 資料表結構 `pid_valid_date`
--

CREATE TABLE `pid_valid_date` (
  `pid` varchar(10) COLLATE utf8mb4_unicode_ci NOT NULL,
  `valid_date` varchar(10) COLLATE utf8mb4_unicode_ci NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;

建好後輸入如下測試資料,  SQL 指令為 :

--
-- 傾印資料表的資料 `pid_valid_date`
--

INSERT INTO `pid_valid_date` (`pid`, `valid_date`) VALUES
('A123456789', '2021-02-13'),
('Q123456789', '2025-11-21'),
('S123456789', '2023-05-29'),
('T123456789', '2020-12-31');



下面是只用 HTML5+jQuery 的範例 : 


測試 1 : 使用 HTML5 原生元件 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
  </head>
  <body>
    <select id="pid" name="pid">
      <option value="">請選擇身分證號碼</option>
    </select>
    <input type="text" id="valid_date" name="valid_date">
    <button id="update">更新</button>
    <script>
      $(document).ready(function(){ 
        $.get({
          url: "http://tony1966.xyz/test/jquerytest/get_pid.php",
          dataType: "html",
          success: function(res) {
            $("#pid").append(res);
            }
          });
        $('#pid').on('change', function() {
          $.get({
            url: "http://tony1966.xyz/test/jquerytest/get_valid_date.php",
            dataType: "html",
            data: {pid: this.value},
            success: function(res) {
              $("#valid_date").val(res);
              }
            });
          });
        $("#update").on("click", function(e){
          $.get({
            url: "http://tony1966.xyz/test/jquerytest/update_valid_date.php",
            dataType: "text",
            data: {pid: $("#pid").val(), valid_date: $("#valid_date").val()},
            success: function(res) {alert(res);}
            });          
          });
        });
    </script>
  </body>
</html>

此例網頁中有三個元件 : 一個用來選擇身分證字號的下拉式選單, 一個用來顯示有效期限的單行文字欄位, 以及一個更新按鈕. 下拉式選單初始僅有提示用的文字選項, 身分證選項是透過 Ajax 向後端程式 get_pid.php 從資料庫取得, 此程式內容如下 : 

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="mysql.hostinger.co.uk"; 
$username="u137801000_test"; 
$password="a123456"; 
$database="u137801000_test"; 
$conn=mysql_connect($host, $username, $password); 
mysql_query("SET NAMES 'utf8'"); 
mysql_select_db($database, $conn); 
$SQL="SELECT pid FROM `pid_valid_date`"; 
$result=mysql_query($SQL, $conn); 
$arr=array(); 
for ($i=0; $i < mysql_numrows($result); $i++) { 
     $row=mysql_fetch_array($result); 
     $option="<option value='".$row["pid"]."'>".$row["pid"]."</option>";
     $arr[$i]=$option; 
     } 
echo implode("\n", $arr);  
?>

此 PHP 程式會搜尋資料表 pid_valid_date 的 pid 欄位, 並在碟帶回圈中製作 option 元素組成的 HTML 回應字串, 此字串會在回應給前端網頁時傳入 append() 方法插入預設的 option 後面. 結果如下 : 



選取身分證字號會產生 change 事件並攜帶 pid 參數向後端程式 get_valid_date.php 提出 Ajax 請求, 此程式會搜尋 pid_valid_date 資料表中該 pid 的 valid_date 欄位值後傳回, 前端網頁收到回應後將其填入 valid_date 單行文字欄位中, 程式內容如下 :

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="mysql.hostinger.co.uk"; 
$username="u137801000_test"; 
$password="a123456"; 
$database="u137801000_test"; 
$conn=mysql_connect($host, $username, $password); 
mysql_query("SET NAMES 'utf8'"); 
mysql_select_db($database, $conn); 
$SQL="SELECT * FROM `pid_valid_date` WHERE pid='".$_REQUEST["pid"]."'"; 
$result=mysql_query($SQL, $conn);  
$row=mysql_fetch_array($result); 
echo $row["valid_date"]; 
?>

使用者可修改 valid_date 後按更新鈕, 這會向後端程式 update_valid_date.php 提出 Ajax 請求 (攜帶 pid 與 valid_date 參數), 此程式會更新 pid 的 valid_date 欄位值, 成功傳回 OK, 失敗傳回 NG, 前端網頁收到回應後用 alert() 顯示結果, 此程式內容如下 : 

<?php
header('Content-Type: text/html;charset=UTF-8');
$host="mysql.hostinger.co.uk"; 
$username="u137801000_test"; 
$password="a123456"; 
$database="u137801000_test"; 
$conn=mysql_connect($host, $username, $password); 
mysql_query("SET NAMES 'utf8'"); 
mysql_select_db($database, $conn); 
$SQL="UPDATE `pid_valid_date` SET valid_date='".$_REQUEST["valid_date"]."' ".
     "WHERE pid='".$_REQUEST["pid"]."'"; 
$result=mysql_query($SQL, $conn);  
if (mysqli_error($conn)) {$msg="NG";}
else {$msg="OK";}
echo $msg; 
?>

測試 2 : 使用 jQueryUI 元件 [看原始碼]

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
    <link href="http://code.jquery.com/ui/1.12.1/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
    <style>
      body {font-family: Arial, Helvetica, sans-serif;}
      .ui-widget {font-size:80%;}
    </style>
  </head>
  <body>
    <select id="pid" name="pid">
      <option value="">請選擇身分證號碼</option>
    </select>
    <input type="text" id="valid_date" name="valid_date">
    <button id="update">更新</button>
    <script>
      $(document).ready(function(){        
        $("button").button();
        $("input").addClass("ui-widget ui-widget-content ui-corner-all");
        $("input").height($("button").innerHeight());
        $("#pid").selectmenu();
        $.get({
          url: "http://tony1966.xyz/test/jquerytest/get_pid.php",
          dataType: "html",
          success: function(res) {
            $("#pid").append(res);
            }
          });
        $('#pid').on('selectmenuchange', function() {
          $.get({
            url: "http://tony1966.xyz/test/jquerytest/get_valid_date.php",
            dataType: "html",
            data: {pid: this.value},
            success: function(res) {
              $("#valid_date").val(res);
              }
            });
          });
        $("#update").on("click", function(e){
          $.get({
            url: "http://tony1966.xyz/test/jquerytest/update_valid_date.php",
            dataType: "text",
            data: {pid: $("#pid").val(), valid_date: $("#valid_date").val()},
            success: function(res) {alert(res);}
            });          
          });
        });
    </script>
  </body>
</html>

此例使用 jQueryUI 來美化頁面,下拉式選單使用 selectmenu 元件, 單行文字欄位高度也經過調整與按鈕同高, 參考 : 


程式部分基本上與上面測試 1 雷同, 結果如下 :




將將, 完成啦! 




沒有留言 :