从sql数据库加速加载选择选项

Question

我有一个添加项表单，其中有一些输入项和4个选择项，每当我单击添加/编辑记录按钮时，大约需要2-3s的时间来将所有可能的值填写到表单中。 我想知道是否有任何方法可以使sql数据库中的加载选择选项更快？ （例如查询缓存或其他我可能不知道的方式）。 这是我用于加载选择选项的机制的示例：

JS：

loadSelectOptions("tab1"); //1600 options
loadSelectOptions("tab2"); //1200
loadSelectOptions("tab3"); //400
loadSelectOptions("tab4"); //100

function loadSelectOptions(elmId) {
    $.post( 
        "queries.php",
        {getValues:elmId},
        function(data) {
            $("#"+elmId).empty();
            for (var i = 0, len = data.length; i < len; i++) {
                $("#"+elmId).append(data[i]);
            };
            $("#"+elmId).selectpicker("refresh");
        },
        "json"
    );
}

PHP（queries.php）：

if (isset($_POST["getValues"]) && (in_array($_POST["getValues"], array("tab1","tab2","tab3","tab4")))) {
    $table = $_POST["getValues"];
    $sql = "SELECT id, name FROM {$table} WHERE active='Y' ORDER BY name";
    $result = mysqli_query($con, $sql);
    $selectValues = array();
    $selectValues[] = "<option value=0> [Select a value] </option>";
    while ($row = mysqli_fetch_array($result)) {
        $selectValues[] =  "<option value='".$row["id"]."'>".$row["name"]."</option>";
    }   
    echo json_encode($selectValues);
}

请告知我如何简化此机制。 我还有另一种向数据库添加新选择选项的形式（对于admin），因此它应该能够识别何时应该刷新选项列表（例如，更改列表的标志或其他用于缓存机制的标志）。 对于解决此问题，我有一些想法，例如可以加载到JS数组中，然后从中读取，但是我不想使它变得比原本应该的复杂。

Answer 1

您的示例中有很多地方尚待改进，我将首先简要介绍一下。

1）通常，在处理大型数据集时，选择框不是最佳的UI选择

2）像您从php脚本中一样对JSON进行html编码和解码，效率低下/缓慢，因为json必须转义所有html和引号字符。

3）与其构造要返回的结果数组然后构造html客户端，不如构造html字符串服务器端通常更快，这取决于要加载页面的客户端类型。 （这是一个有争议的主题，呈现html服务器与客户端，因此您可以决定自己的立场）。

为了解决1，我建议找到一个更好的ui替代方案，例如可以动态过滤数据的搜索框或类似工具（从而减少数据集和加载时间）。

要解决2，不要对html进行json编码，只需让脚本直接输出html，然后在客户端上将该文本响应用作html。 这也解决了3。

您可以更改您的php以执行以下操作：

echo "<option value='0'>[Select a Value]</option>";
while ($row = mysqli_fetch_array($result)) {
    echo "<option value='".$row["id"]."'>".$row["name"]."</option>";
}

然后将您的JavaScript更改为：

$.post( 
    "queries.php",
    {getValues:elmId},
    function(data) {
        $("#"+elmId).empty();
        $("#"+elmId).html(data);
        $("#"+elmId).selectpicker("refresh");
    }
);

确保您的php脚本的内容类型响应标头为text/html或jquery的ajax调用可能会尝试将其解释为json，默认情况下为text/html ，因此，如果您未将其设置为application/json ，不用担心

此外，在这种情况下最好使用GET请求而不是POST请求，以遵循传统的http REST惯例，您可以在线阅读有关此内容的更多信息。

另一种解决方案是使您的php脚本仅返回数据，而不返回伪html字符串。

例如，您的php可能会变成

$options = array();
while ($row = mysqli_fetch_array($result)) {
    array_push($options, array('id' => $row['id'], 'name' => $row['name']));
}

echo json_encode($options);

然后您的JavaScript可能会变成

$.post( 
    "queries.php",
    {getValues:elmId},
    function(data) {
        $("#"+elmId).empty();
        for (var i = 0, len = data.length; i < len; i++) {
            var option = data[i];
            var html = "<option value='"+option.id+"'>"+option.name+"</option>";
            $("#"+elmId).append(html);
        };
        $("#"+elmId).selectpicker("refresh");
    },
    "json"
);

第一个选项将提高脚本执行速度（消除html上的json编码），一点点的网络性能（从响应中删除不必要的json格式）和客户端性能（直接获取html，不对数组进行循环）。

第二个选项将提高网络性能，但在客户端上的性能不佳，我建议同时尝试一下，看看哪种更适合您。