PHP/MySQL/Ajax-来自不同输入和变量的多个搜索结果 - PHP/MySQL/Ajax - Multiple search results from different inputs and variables

我四处查看了一下，还没有找到解决方案。可能是由于我的业余能力，我在创建具有多个搜索选项的动态搜索结果时遇到了问题。我希望能够在选择每个新选项时动态填充和更新搜索结果。

我一直在尝试让它从两个单独的选项开始工作，直到我让它工作为止。我有一个下拉菜单，它通过ajax传递变量"q"，还有一个复选框（充当按钮），它传递变量"wblack"，都是jQuery UI。我可以让它们单独工作，但它们只是将搜索结果更改为自己的sql查询，而不更新它以包含这两个选项（我希望这有意义！）。我希望能够在一个工作的MySQL查询中堆叠这些选项，这样当两者都被选中时，搜索结果就会基于这两个选项显示。

任何建议都将不胜感激，谢谢。

我的PHP是：

require_once 'mysql_login.php';
$db_server = mysql_connect($db_hostname, $db_username, $db_password);
if (!$db_server) die("Unable to connect to MySQL: " . mysql_error());
mysql_select_db($db_database)
    or die("Unable to select database: " . msql_error());
$sql="SELECT * FROM `TABLE 1` WHERE ";
if (isset($_GET['q'])) {
    $q = $_GET['q'];
    $sql .= "ProductDescription LIKE '"%".$q."%'" AND ";
}
if (isset($_GET['wblack'])) {
    $wblack = $_GET['wblack'];
    $sql .= "ProductDescription LIKE '"%".$wblack."%'" AND ";
}
if (substr($sql, strlen($sql) - strlen('WHERE ')) == 'WHERE ') {
$sql = substr($sql, 0, strlen($sql) - strlen('WHERE '));
}
if (substr($sql, strlen($sql) - strlen('AND ')) == 'AND ') {
$sql = substr($sql, 0, strlen($sql) - strlen('AND '));
}
$result = mysql_query($sql);
    while ($row = mysql_fetch_array($result))
{
    echo "<div class='width'><div class='parent'><div class='searchimage'>";
    echo "<img src='{$row['ImageURL']}' /></div></div>";
    echo "<br><br>".$row['ProductName']."<br>"; 
    echo "&pound".$row['ProductPrice'];
    echo "</div>";
}
if (!$result) die ("Database access failed: " . mysql_error());
mysql_close($db_server);

jQuery是：

    var q = $('#selectmenu').val();
    $("#selectmenu" ).selectmenu ({     
        change:function( event,ui ) { 
        q = $(this).val();
        $.ajax({
            url: 'searchtestphp.php',
            data: 'q='+q,
            success: function (data) {
                $('#searchresults').html(data);
            }
        }).error(function() {
            alert ('An error occured');
        });
        }
    });
});
        $(function() {
            $( "#checkblack" ).button();
            $( "#checkblack" ).click(function(){
                if($(this).is(':checked')) {
                var wblack = $(this).val();
                    $.ajax({
                        url: 'searchtestphp.php',
                        data: 'wblack='+wblack,
                        success: function (data) {
                        $('#searchresults').html(data);
                        }
                    });     
                }
            });
        });

HTML:

<select id="selectmenu" name="selectmenu">
    <option value="">--Select--</option>
    <option value="dress">Dresses</option>
    <option value="tshirt">T-Shirts</option>
    <option value="skirt">Skirts</option>
    <option value="shoes">Shoes</option>
    <option value="top">Tops</option>
    <option value="floral">Floral</option>
    <option value="trousers">Trousers</option>
</select>
<input name="colour[]" type="checkbox" class="checksize" id="checkblack" value="black"/> <label for="checkblack">Black</label>

PHP:

根据$_GET，这里有一种更好的方法来构建带有或不带有"where"子句的SQL查询

$where = array ();
if (isset($_GET['q'])) {
    $where[] = 'ProductDescription LIKE "%' . addslashes  ($_GET['q']) . '%"';
}
if (isset($_GET['wblack'])) {
    $where[] = 'ProductDescription LIKE "%' . addslashes  ($_GET['wblack']) . '%"';
}
$sql = 'SELECT * FROM `TABLE 1` ' . (!empty ($where) ? 'WHERE (' . implode (') AND (', $where) . ')' : '');

addslashes稍微提高了一点安全性，它仍然不是最好的解决方案，但比您的版本要好得多（当您可以阅读更多关于addslashe漏洞的信息时，stackoverflow上有很多主题）。

JS：建议更改：一个ajax请求，两个参数都通过if value！=false：

$(function() {
    function search () {
        var ajax_data = {};
        var q = $("#selectmenu").val();
        if (q) {
            ajax_data.q = q;
        }
        var wblack = $("#checkblack").val();
        if (wblack) {
            ajax_data.wblack = wblack;
        }
        $.ajax({
            url: 'searchtestphp.php',
            data: ajax_data,
            success: function (data) {
                $('#searchresults').html(data);
            }
        }).error(function() {
            alert ('An error occured');
        });
    }
    $("#selectmenu").selectmenu ({
        change:function( event, ui ) { 
            search ();
        }
    });
    $("#checkblack").button();
    $("#checkblack").on("click", function () {
        search ();
    });
});