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);
}

请告知我该如何简化这种机制。我还有另一种形式用于向数据库添加新的选择选项（用于管理员），因此它应该能够识别何时应该刷新选项列表（如列表更改的标志或缓存机制的其他内容）。我有一些关于解决这个问题的草案想法，比如可能加载到JS阵列并稍后阅读，但我不想让它变得比应该复杂得多。

Answer 1

您的示例中有很多内容可以改进，我将首先简要介绍一下。

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

2）JSON编码和解码html就像你来自php脚本是低效/慢的，因为json必须转义所有的html和引用字符。

3）不是构造一个结果数组来返回然后构建html客户端，而是创建html字符串服务器端通常会更快，具体取决于加载页面的客户端类型。（这是一个有点争议的话题，渲染html服务器与客户端，所以你可以决定自己的立场。）

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

要解决2，不要json编码html，只需让你的脚本直接输出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，不在数组上循环）。 / p>

第二个选项会更多地提高网络性能，但在客户端上表现不佳，我建议尝试两者并看看哪个更适合你。

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

1 个答案: