前阵子网友询问如何依据输入的身分证从资料库中提取有效日期且可进行修改，请参考以下此处底下的消息：
因我这阵子在忙jQuery Mobile没时间思考，今天稍微告一段落，就来做一下这道习题，顺便复习一下jQuery UI与PHP，久没做还真的会生锈。此测试参考了之前的文章：
＃ jQuery的阿贾克斯的捷径函数测试
＃
首先在MySQL建一个资料表pid_valid_date，根据网友问题描述，需要两个栏位：
pid：varchar（10）储存身分证
有效日期：varchar（10）保存YYYY-MM-DD格式之有效日期
建资料表的SQL指令如下：
-
-资料表结构`pid_valid_date`
-
创建表`pid_valid_date`（
pid varchar（10）收集utf8mb4_unicode_ci NOT NULL，
`valid_date` varchar（10）收集utf8mb4_unicode_ci NOT NULL
）ENGINE = InnoDB DEFAULT CHARSET = utf8mb4 COLLATE = utf8mb4_unicode_ci;
建好后输入如下测试资料，SQL指令为：
-
-倾印资料表的资料`pid_valid_date`
-
插入到pid_valid_date`（`pid`，`valid_date`）值中
（'A123456789'，'2021-02-13'），
（'Q123456789'，'2025-11-21'），
（'S123456789'，'2023-05-29'），
（'T123456789'，'2020-12-31'）;
下面是只用HTML5 + jQuery的范例：
测试1： 使用HTML5原生元件 [看原始码]
<！DOCTYPE html>
<html>
<头>
<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>
<身体>
<select id =“ pid” name =“ pid”>
<option value =“”>请选择身分证号码</ option>
</ select>
<input type =“ text” id =“ valid_date” name =“ valid_date”>
<button id =“ update”>更新</ button>
<脚本>
$（document）.ready（function（）{
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/get_pid.php”，
dataType：“ html”，
成功：功能{res} {
$（“＃pid”）。append（res）;
}
}）;
$（'＃pid'）。on（'change'，function（）{
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/get_valid_date.php”，
dataType：“ html”，
数据：{pid：this.value}，
成功：功能{res} {
$（“＃valid_date”）。val（res）;
}
}）;
}）;
$（“＃update”）。on（“ click”，function（e）{
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/update_valid_date.php”，
dataType：“文本”，
数据：{pid：$（“＃pid”）。val（），有效日期：$（“＃valid_date”）。val（）}，
成功：函数（res）{警报（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（）;
对于（$ i = 0; $ i <mysql_numrows（$ result）; $ i ++）{
$ row = mysql_fetch_array（$ result）;
$ option =“ <选项值='”。$ row [“ pid”]。“'>”。$ row [“ pid”]。“ </ option>”;
$ arr [$ i] = $ option;
}
echo implode（“ \ n”，$ arr）;
？>
此PHP程式会搜寻资料表pid_valid_date的pid栏位，并在碟带回圈中制作选项元素组成的HTML回应字串，此字串会在回应给前端时选项后面。结果如下：
拾取身分证字号会产生更改并发pid参数向初始化程序get_valid_date.php提出Ajax请求，此程序会搜索pid_valid_date资料表中该pid的有效日期栏位值后传回，入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`其中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的有效日期栏位值，成功传回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）;
如果（mysqli_error（$ conn））{$ msg =“ NG”;}
否则{$ msg =“ OK”;}
echo $ msg;
？>
测试2： 使用jQueryUI元件 [看原始码]
<！DOCTYPE html>
<html>
<头>
<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”>
<样式>
正文{font-family：Arial，Helvetica，sans-serif;}
.ui-widget {font-size：80％;}
</ style>
</ head>
<身体>
<select id =“ pid” name =“ pid”>
<option value =“”>请选择身分证号码</ option>
</ select>
<input type =“ text” id =“ valid_date” name =“ valid_date”>
<button id =“ update”>更新</ button>
<360> <脚本>$（document）.ready（function（）{
$（“ button”）。button（）;
$（“ input”）。addClass（“ ui-widget ui-widget-content ui-corner-all”）;
$（“ input”）。height（$（“ button”）。innerHeight（））;
$（“＃pid”）。selectmenu（）;
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/get_pid.php”，
dataType：“ html”，
成功：功能{res} {
$（“＃pid”）。append（res）;
}
}）;
$（'＃pid'）。on（'selectmenuchange'，function（）{
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/get_valid_date.php”，
dataType：“ html”，
数据：{pid：this.value}，
成功：功能{res} {
$（“＃valid_date”）。val（res）;
}
}）;
}）;
$（“＃update”）。on（“ click”，function（e）{
$ .get（{
网址：“ http://tony1966.xyz/test/jquerytest/update_valid_date.php”，
dataType：“文本”，
数据：{pid：$（“＃pid”）。val（），有效日期：$（“＃valid_date”）。val（）}，
成功：函数（res）{警报（res）;}
}）;
}）;
}）;
</ script>
</ body>
</ html>
此例使用jQueryUI来美化页面，拖放式选单使用selectmenu元素，单行文字栏位高度也可以通过调整与按钮同高，参考：
＃ jQuery UI的学习笔记（十）：下拉式选单（Selectmenu）
＃ jQuery UI的学习笔记（十四）：文字输入框的主题样式
程式部分基本上与上面测试1雷同，结果如下：
发表评论 取消回复