Php 首页加载时使用延迟填充的下拉菜单

我使用引导创建了切换下拉菜单。下拉菜单项使用ajax调用填充。ajax请求调用PHP脚本，该脚本从数据库中获取值并填充下拉菜单项。我使用无序列表在下拉菜单中显示项目。当我单击负责ajax调用的按钮时，这些项会被填充，但会有延迟。当我再次单击按钮时，没有观察到延迟

JQuery：

$(document).on('click',"#itemsButton",function (e) {
                    e.preventDefault();
                    var osn = $("#osn").val();
                    //$("#items-dropdown").empty();
                    var dataString = 'searchString=' + osn;
                    if ($.trim(osn).length > 0) {
                     $.ajax({//create an ajax request to load_page.php
                            type: "POST",
                            url: "retrieveItemsOrdered.php",
                            data: dataString,
                            cache: false,
                            dataType: "html", //expect html to be returned
                            success: function (html) {
                                $("#items-dropdown").html(html); 
                            }
                        });
                    }

                });

HTML:

---

请让我了解当第一次单击按钮以显示下拉菜单项时出现延迟的原因，请查看这些问题和

以下内容不再适用

对

retrieveItemsOrdered.php

的第一个ajax调用将有一些延迟，具体取决于查询本身、结果数量以及DB服务器所在的位置

第二次调用（例如第二次单击按钮）将生成更快的结果，因为db查询结果将由驱动程序（mysqli和mysql服务器）缓存

---

您可以检查/解释数据库查询本身，并对其进行优化以减少延迟。

这是很自然的，因为您正在使用

AJAX

调用从数据库获取记录，而与任何

样式

或

HTML

无关

现在，该呼叫正在一路向下到达您的DB，并给您回复，因此您正在经历延迟。这是您第一次单击按钮的时候。当您再次单击按钮进行往返访问时，浏览器缓存的响应和您以前的记录仍然在列表中，所以延迟几乎是不可见的

延误的原因可能有很多。您的数据库位于某个远程位置，或者您的数据库查询花费了一些额外的时间进行评估。如果你处理的是大量的数据，那就更糟糕了

记住，调用

AJAX

并不意味着响应会更快。在封面下，它是脚本在响应到达时如何处理的。它看起来很快，因为它从来都不是整页刷新。您可以从内置的浏览器开发工具获得帮助

建议：

• 尝试优化数据库查询。从外面的好教程中得到一些帮助。如果您仍然无法找到解决方案，那么请对代码中的问题进行一个很好的总结，并在StackOverflow上列出相关细节
• 为了获得更好的用户体验，将加载微调器或等待消息作为毯子
• 现在，这需要进行很多重构。保存您对DB的呼叫数。返回

  JSON

  比返回

  HTML

  更好。您的

  HTML

  应该只显示返回的数据

---

表中只有2行是从中获取结果的。db服务器本身位于本地主机上如果直接点击php文件，您可以使用微调器进行延迟相同的延迟？我在显示切换菜单时遇到延迟您是在本地机器上工作还是在主机服务器上工作，您是在使用apache服务器？

<div class='itemsmenu btn-group'>";
                    <button type='button' class='btn dropdown-toggle' data-toggle='dropdown' id='itemsButton'>
                    <span class=>Click here to view items&nbsp</span>
                    <span class='pull-right'><i class='fa fa-caret-down'></i></span>
                    </button>
                    <ul class='dropdown-menu ' role='menu' id='items-dropdown'>
                    </ul>
</div>

while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
       echo "<li class='ordeinfo-style'>";
       echo "<b>".$row['sku']."</b>";
       echo "</li>";
    }

.dropdown-menu {
        border-radius: 0;
        -webkit-box-shadow: none;
        box-shadow: none
        }       
        .itemsmenu .btn{
    text-align: center;
        }
        ul {
                min-width: 200px;
        }
        .items-dropdown{
            text-align: center;
        }
        ul b{
                font-weight: normal;
                display: inline block;
                font-size: 16px;
                font-weight: bolder;
                color: #000;
        }
        .quantity{
            font-size: 16px;
            margin-right: 20px;
            color: #000;
        }