PHP MySQL & AJAX 搜索过滤时间延迟

Question

这是我第一次处理 php 和 JavaScripts ...需要您的帮助来解决问题。

我的网站在标题处有一个搜索框，当提交搜索词时，它会转到包含过滤器菜单和搜索结果的 search.php。过滤器菜单基于少数选择列表。一旦在过滤器菜单中单击任何选项，它就会更新搜索结果。

为此，我使用了一个 javascript，它调用另一个 php 文件“SearchResult.php”中的数据来更新 ID 为#Result 的 div。

问题:它在本地主机上运行良好，但在线时会导致更新搜索结果延迟。

帮助:有没有什么方法可以显示某种类型的加载让观众理解，或者有什么办法可以让它更快。

这是我的代码:

Java脚本函数

function get() 
{
    $('#Search_Results').hide();
    $.post('SearchResults.php', { Search: form.Search.value, cat: form.category.value, brand: form.brand.value },
    function(output) 
        {
            $('#Search_Results').html(output).show();
        }
)
}

搜索过滤器表单

enter code hereif(!empty($_REQUEST['Search'])){
$SearchTerm = $_REQUEST['Search'];
} else {
    $SearchTerm = '';
}
// Search term submited 
echo '<input name="Search" type="hidden" value="'.$SearchTerm.'" />';
$sql = mysql_query ("SELECT * FROM categories");
echo '<h4>Filter Categories</h4><select name="cat" onChange="get();" size="15">';
echo '<option value="" class="Select_Options">All Categories</option>';
    while ($row = mysql_fetch_array($sql)) 
        {
            echo '<option class="Select_Options" value="' . $row["CategoryID"] . '">' . $row["CategoryName"] . '</option>';
    }
echo '</select>';
//Few more such filters

---

搜索结果页

if(!empty($_REQUEST['Search'])){
$SearchTerm = $_REQUEST['Search'];
}
else {
echo 'Please enter search keyword(s)';
exit();
}
if(!empty($_REQUEST['cat'])){
$cat = $_REQUEST['cat'];
$SearchQuery .= " AND categories.CategoryID = '$cat'";
}

if(!empty($_REQUEST['brand'])){
$brand = $_REQUEST['brand'];
$SearchQuery .= " AND brands.BrandID = '$brand'";
}

$sql = "SELECT DISTINCT products.ProductID, ProductKeywords, products.SectionID, products.ProductThumb, products.ProductPrice, products.CategoryID, products.SubCategoryID, products.BrandID, brands.BrandLogo, ProductTitle AS title FROM products 
    INNER JOIN brands ON products.BrandID = brands.BrandID 
    INNER JOIN sections ON products.SectionID = sections.SectionID 
    INNER JOIN categories ON products.CategoryID = categories.CategoryID 
    INNER JOIN subcategory ON products.SubCategoryID = subcategory.SubCatID $ColorJoin
    WHERE MATCH (ProductKeywords) AGAINST ('$SearchTerm*' in boolean mode)$SearchQuery";

$query = mysql_query($sql);
echo '<div id="Product_Search_Container"><ul>';
while ($row = mysql_fetch_array($query)) 
{

    $ProductID = $row["ProductID"];     
    $sql2 = mysql_query ("SELECT COUNT(ProColorID) AS ProductCount FROM productcolors WHERE ProductID = '$ProductID'");     
            while ($row5 = mysql_fetch_array($sql2)) 
            {
                $BrandID = $row["BrandID"];
                $sql3 = mysql_query ("SELECT * FROM brands WHERE BrandID = '$BrandID'");        
                while ($row6 = mysql_fetch_array($sql3)) 
                {
                    $ProductThumb = $row["ProductThumb"];
                    if ($ProductThumb == NULL) { $ProductThumb = "No_Image.jpg"; }

            echo '<li><img src="images/Products/Thumbs/' . $ProductThumb . '" width="210px" height="275px" />
                    <div class="zoomer"><span class="zoom';
                    if ($ProductThumb != "No_Image.jpg") {
                        echo ' cursonstyle" style="position: relative; overflow: hidden;"><img src="images/Products/Thumbs/zoom/' . $ProductThumb . '" alt="' . $row["title"] . '" />
                    '; } else { echo '">'; }
                    echo '</span><span class="Pro_Title">' . $row["title"] . '</span>
                    <span class="BrandLogo"><img src="images/Brands/' . $row6["BrandLogo"] . '" /></span>
                    <span class="ProColors">' . $row5["ProductCount"] . ' Colors</span>
                    <span class="ProPrice">$' . $row["ProductPrice"] . '</span>
                    <a href="?Product=' . $row["ProductID"] . '" class="viewdetails">&nbsp;</a></a></li>';  

                }                           
            }
}

        echo '</ul></div>';

Answer 1

您可以显示加载消息，就像在启动发布请求时显示它并将其隐藏在回调中一样简单。

function get() 
{
    $('#Search_Results').hide();
    $('#loading').show().html('Please wait while loading..'); // <-- show message on function call
    $.post('SearchResults.php', { Search: form.Search.value, cat: form.category.value, brand: form.brand.value },
    function(output) 
        {
            $('#loading').hide(); // <-- hide in callback function
            $('#Search_Results').html(output).show();
        }
)
}

您还应该处理 ajax 请求中的错误并查看准备好的语句或至少使用 mysql_real_escape_string()对于所有用户输入。