Question

我正在尝试编写一个非常简单的搜索系统，用户在一个只有大约50个条目的小型数据库中搜索产品。我正在尝试使用jQuery和AJAX将搜索查询发送到外部PHP脚本，该脚本执行实际的MySQL查询并返回结果列表，然后我可以将其附加到搜索页面。

我的搜索页面有这个：

<form method="get">
   <input type="text" id="searchbox" name="search"/>
   <button class="button" id="searchbutton">Search</button>
</form>


<script type="text/javascript">

    function makeAjaxRequest() {
    $.ajax({
        url: 'search_execute.php',
        type: 'get',
        datatype: 'html',
        data: {search: $('#searchbox').val()},
        success: function(response) {
            alert("Success!");
        }, error : function() {
            alert("Something went wrong!");
       }
    });


});

//capture user clicking button
$('#searchbutton').click(function(){
     makeAjaxRequest();
});

//capture user pressing 'return'
$('form').submit(function(e){
    e.preventDefault();
    makeAjaxRequest();
});      

</script>

当然，我只是使用警报进行调试。

这是来自外部脚本的我的PHP：

<?php
require('connection.php');

if(isset($_GET['search'])) {
    $search = $_GET['search'];
    echo $search;
    $stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE '%' ? '%'");
    $stmt -> execute(array($search));
    $num = $stmt->rowCount();
}
if ($num == 0){
    echo "<p>Sorry, no products matched your search</p>";
} else {
    if ($num == 1){
            echo '<p>We have found 1 product that matches your search terms. Please click the link to visit the product page.</p>';
        } else {
            echo '<p>We have found '.$num.' products that match your search terms. Please click a link to visit the product page.</p>';
        }
        echo '<ul class="products>';
        while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
            echo '<li><h3><a href="product.php?id='.$row['product_id'].'">'.$row['product_name'].'</a></h3></li>';
        }
    echo '</ul>';
}

?>

问题是，它失败了，它无声地失败了。我在控制台或Firebug中都没有任何警报，也没有任何错误。 PHP可以单独使用，但是当我使用搜索页面时 - bupkus。

编辑：我已将事件处理程序移到makeAjaxRequest函数之外但仍然没有骰子。

Answer 1

您的Javascript代码不正确，您在函数makeAjaxRequest中添加的事件函数因此从未调用过。它应该是

<script type="text/javascript">
$(document).ready(function(){
    function makeAjaxRequest() {
        $.ajax({
            url: 'search_execute.php',
            type: 'get',
            datatype: 'html',
            data: {search: $('#searchbox').val()},
            success: function(response) {
                    alert("Success!");
            }, 
            error : function() {
                    alert("Something went wrong!");
            }
        });
    }

    $('#searchbutton').click(function(){
            makeAjaxRequest();
    });

    $('form').submit(function(e){
            e.preventDefault();
            makeAjaxRequest();
    });
});

Answer 2

您的括号在JavaScript代码中有点奇怪。它现在的样子，事件绑定在makeAjaxRequest（）函数内部，因此处理程序永远不会绑定到事件，直到首次调用该函数。当然，该函数只能从事件处理程序中调用，因此从不调用它。

要解决此问题，只需将绑定复制粘贴到函数外部即可。

您也可以将第一个绑定更改为

$('#searchbutton').click(makeAjaxRequest);

获得较小的性能提升。

Answer 3

您应该使用

之类的查询

$q = '%' .$search. '%'
$stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE ?");
$stmt->execute(array($q));

Answer 4

<script type="text/javascript">
$(document).ready(function(){
    var sval = $('#searchbox').val();
    var datastring = "search="+sval;

    $('#searchbutton').click(function(){
        $.ajax({
            url: 'search_execute.php',
            type: 'get',
            datatype: 'html',
            data: datastring,
            success: function(response) {
                alert("Success!");
            }, error : function() {
                alert("Something went wrong!");
           }
        });
    });
});
</script>

在php文件中更改sql

$stmt = $dbc->prepare("SELECT product_id, product_name FROM products WHERE product_name LIKE '%".$search."%' ");

使用PHP，AJAX和jQuery搜索MySQL数据库

4 个答案: