Case Study: 利用JS设计高级检索功能通过PHP获取MySQL数据

一、目标

该笔记的目的是引导读者借助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：数据库网页构建原理和实践。

二、原理

具体步骤如下：

1. **表单设计：**在存放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脚本。

2. **设计高级检索控件：**在"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 += '&nbsp;&nbsp;';
    }

    //文字输入框
    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'])</