一、目标
该笔记的目的是引导读者借助WampServer平台和MySQL数据库,利用HTML/CSS/JS/PHP设计一个含有高级检索功能的数据库网页。该功能效果如图1所示。用户在文本框中输入相应内容,可实现对某一特定数据字段的检索;点击“ADD”按钮,能够添加检索条件,并通过逻辑运算下拉列表框指定“AND”“OR”或“NOT”逻辑运算关系,使PHP自动构建出复杂的数据检索式,从服务器的MySQL数据库中查找满足用户需求的数据。
图1 数据库网页中的高级检索功能。类似的案例如知网(CNKI)、Web of Science、PubMeb等文献数据库网页的高级检索功能。
该笔记假定读者已经能自己动手利用WampServer搭建出数据库网页,即利用PHP将获取服务器MySQL数据库中的数据,并将其呈递给JS,最后展示给用户。如尚不能搭建一个简易的网页数据库,请参考Case study:数据库网页构建原理和实践。
二、原理
具体步骤如下:
- **表单设计:**在存放HTML元素的主体文件(以下称其为"main.php")中设计一个表单。其中,
criteria1
区域用于显示高级检索工具,包括逻辑运算符下拉列表框、文字输入框、字段选择下拉列表框等元素。input
空间用于提交表单。每次提交表单时,JS会向PHP呈递表单信息,PHP从MySQL数据库中获取满足用户需要的数据重新返回给JS,最后展示给用户。<?php echo $_SERVER["PHP_SELF"] ?>
这段代码就实现了刷新页面的功能。
<form action="<?php echo $_SERVER["PHP_SELF"] ?>" method="post">
<p><span id="criteria1"></span>
<input type="submit" value="Search">
</form>
注意:"main.php"应为".php"文件而不是".html"文件,否则无法运行php脚本。
- **设计高级检索控件:**在"main.php"中引入一个JS文件(以下称其为"show.data.js")。在该文件中插入以下代码。以下代码段中,
adv_search_kit
存放了高级检索控件的各个参数,后面的几个函数实现高级检索工具在数据库网页中的展示。我们不必了解后面几个函数的具体原理,但要厘清adv_search_kit
中几个参数的含义。其中需要进行修改的是设置数据库字段检索方式
中的几个参数。search_field_values
为字段选择下拉列表框的值。该值应该与MySQL数据库中的数据字段名保持统一。search_field_display
规定了字段选择下拉列表框在网页中展示的值,并不会影响到JS和PHP代码的运行。search_field_type
规定了每一数据字段用何种方式进行检索。onebox
表示只有一个文本框,fromto
表示范围检索。例如地点名称location
应该是一个值,所以利用单个文本框进行检索;经度long
则常常是检索处于某一个经度范围之间的数据,因此需要两个文本框。note
表示注释信息。在本案例中,一旦字段选择下拉列表框的值被选为time
,网页中就会自动跳出注释信息,告诉用户time
字段的搜索是通过字符串比较算法实现的。adv_search_kit
后面的代码段无需进行更改。
/******** 高级检索工具箱 *********/
/********************************/
var adv_search_kit = {
//高级检索工具中HTML元素的id值,不建议修改
"logic_sel_HTMLid": "logic", //逻辑运算符下拉列表框HTML id
"search_span_HTMLid": "search_textbox", //文字输入框所在区域的HTML id
"search_field_HTMLid": "pid", //字段选择下拉列表框HTML id
"search_explain_HTMLid": "search_explain", //注释说明区域HTML id
//设置传递给PHP $_POST的元素名
//不建议修改,否则需要改动相应的PHP代码
"logic_sel_PHPname": "logic", //逻辑运算符下拉列表框name属性
"search_onebox_PHPname": "onebox", //单个文本输入框name属性
"search_frombox_PHPname": "frombox", //范围检索文本输入框name属性
"search_tobox_PHPname": "tobox",
"search_field_PHPname": "field", //字段选择下拉列表框name属性
//设置数据库字段检索方式
"search_field_values": ["location", "long", "lat", "user", "time"],
//字段选择下拉列表框的值
"search_field_display":["Location", "Longtitude", "Latitude", "User", "Time"],
//字段选择下拉列表框在网页中展示的各个值
"search_field_type": ["onebox", "fromto", "fromto", "onebox", "fromto"],
//字段选择下拉列表框每个值的检索方式
"note": {
"time": "Format: yyyy:mm:dd hh:mm:ss. Apply algorithm of character comparison."}
};
// 辅助函数:查找元素在数组中的位置
// 参考 https://blog.csdn.net/qq_41244810/article/details/104768450
function IndexOf(arr, item){
if (Array.prototype.indexOf) {
return arr.indexOf(item);
} else {
for (var i = 0; i < arr.length; i++) {
if (arr[i] === item) {
return i; }
}
}
return -1;
}
// 增加筛选标准
function criteria_row(num_criteria){
var cout = '';
//逻辑运算符下拉列表框
if(num_criteria > 1){
cout += '<select name = "' + String(adv_search_kit["logic_sel_PHPname"]) + String(num_criteria)+
'" id="' + String(adv_search_kit['logic_sel_HTMLid']) +
String(num_criteria) + '" >';
cout += '<p><option value="and">AND</option>';
cout += '<option value="or">OR</option>';
cout += '<option value="not">NOT</option>';
cout += '<select>';
cout += ' ';
}
//文字输入框
cout += '<span id="' + String(adv_search_kit['search_span_HTMLid']) + String(num_criteria) + '">';
cout += '<input type="text" values="" name="'+ String(adv_search_kit['search_onebox_PHPname'])</