PHP/MySQL/Ajax - 来自不同输入和变量的多个搜索结果

Question

我环顾四周，还没有找到解决方案。 大概由于我的业余能力，我在创建具有超过 1 个搜索选项的动态搜索结果时遇到了问题。我希望能够在选择每个新选项时动态填充和更新搜索结果。

我一直试图让它只在 2 个单独的选项上工作，直到我开始工作。我有一个下拉菜单，它通过 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>

Answer 1

PHP：

这里是构建 SQL 查询的更好方法，可以使用或不使用 'where' 子句，具体取决于 $_GET

$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 稍微提高了安全性，它仍然不是最好的解决方案，但比您的版本中的要好得多（当您可以阅读有关 addslashes 漏洞的更多信息时，stackoverflow 上有很多主题）。

JS： 建议更改：一个 ajax 请求，如果 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 ();
    });
});