0

嘿，我有一个工作的 php 脚本，据我所知，我的 jquery ajax 函数模仿了我在 SO 上看到的任何东西，但不知何故，这不起作用。我发布了我的 HTML、php 和 js。有人可以帮我吗？我在这几天没有成功。

在提交时，页面似乎闪烁了一小段时间（刷新？），但没有任何反应。

HTML/js：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Trade diving equipment online at DiveBay</title>
<link rel="stylesheet" type="text/css" href="dbstylesheet.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
</script>
<script type="text/javascript">


$(document).ready(function(){
    %("#searchdivebay").submit(function(){

        var word = $("#searchbox").val();
        $.ajax({
            type: "GET",
            url: "trysearch.php",
            data: $("#searchdivebay").serialize(),
            context: '#content',
            success: function(data){                
                            $(this).html(data);
                    }
        });
    });

});
</script>
</head>

<body>
<center>
    <div id="wrapper">

        <div id="header">
            <div id="hbackground">
                <img src="db3.jpg" alt="hbackground" width="100%" height="100%" style="z-index:1;" />
                <div id="htitle">
                    <span class="banner">DIVEBAY.COM</span>
                    <span class="byline">GET INTO DIVING, TRADE DIVING EQUIPMENT ONLINE</span>      
                </div>
            </div>
        </div>

        <div id="searchandlog">
            <div id="search">
                <form id="searchdivebay" action="#" method="get">
                    <div id="searchboxholder"><input type="text" name="searchbox" id="searchbox" /></div>
                    <div id="searchbuttonholder"><input type="submit" name="searchbutton" id="searchbutton" value="Search DiveBay"/></div>
                </form>
            </div>
            <div id="login">
                <ul class="signreg">
                    <li><i>Existing user?</i><a href="divebaylogin.html">SIGN IN</a></li>
                    <li><i>or, new?</i><a href="createaccount.html">REGISTER</a></li>
                </ul>
            </div>
        </div>
        <div id="searchresults">Search results for <span id="searchword" class="word"></span></div>
        <div id="content">


        </div>
        <div id="sitemap">
        </div>
    </div>
</center>
</body>

</html>

PHP：

<?php
echo '
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>searchdbresults</title>
<link rel="stylesheet" type = "text/css" href = "styledb.css" />
</head>

<body>';

$user = 'root';
$pass = null;
$pdo = new PDO('mysql:host=localhost; dbname=divebay;', $user, $pass);

$search = $_GET['searchbox'];
if($search == ""){
    echo '<p style="color:black; font-size:18pt; font-family: Impact; "> You didn"t search for anything!</p>';
}
else{
try{
    $stmt = $pdo->prepare('SELECT * FROM auction WHERE name LIKE ?');
    $stmt->bindValue(1, '%'. trim($search) .'%');
    $stmt->execute();



    $numrows = 0;

    echo '<table id="showresult">';

    while($row = $stmt->fetch(PDO::FETCH_ASSOC)){
        $numrows++;
        $ID = $row['ID'];
        $img = $row['img'];
        $name = $row['name'];
        $owner = $row['owner'];
        $cprice = $row['cprice'];
        $iprice = $row['iprice'];
        $incprice = $row['incprice'];
        $etime = $row['etime'];

    echo '
    <tr class = "resultindex">
        <td class = "imgholder">' .$img. '</td>
        <td class = "infoholder">
            <div style ="height:4px;"></div>
            <div class = "infodiv">'.$name.'</div>
            <div class = "locdiv"></div>
            <div class = "userdiv"><span class="fromuser">From user: </span><br/>'.$owner.'</div>
        </td>
        <td style = "width:2px; background-color:#330066;"></td>
        <td class ="priceholder">
            <div class = "currentp"><span class="currentbid">Current Bid: </span><br/>'.$cprice.'</div>
            <div class = "instantp"><span class="instantbid">Instant Sale: </span><br/>'.$iprice.'</div>
            <div style = "height:5px;"></div>
            <div class = "incp"><span class="nextbid">Next Bid:</span><br/>'.$incprice.'</div>
        </td>
        <td style = "width:2px; background-color:#330066;"></td>
        <td class = "timer"><span class="timeleft">Time Left: </span><br/>'.$etime.'</td>
    </tr>';
    }
    if($numrows == 0){
        echo '
        <tr>
        <td colspan="4">Sorry your search for '.$search.' returned no results</td>
    </tr>';
    }
    else{
        echo '
        <tr>
        <td colspan="4">Displaying'.$numrows.'results</td>

    </tr>';
    $pdo = null;
    }
    }catch(PDOException $e){
        echo $e->getMessage();
    }
    }
    echo '
    </table>
</body>
</html>';

?>
4

5 回答 5

1

当您提交表单时，浏览器会加载一个新页面，从而创建一个全新的 JS 环境。

防止默认事件。（事件对象是提交处理函数的第一个参数，您需要先捕获它，然后才能调用它的方法）。

于 2012-08-06T11:49:09.620 回答
1 
$(document).ready(function(){
    %("#searchdivebay").submit(function(e){

        var word = $("#searchbox").val();
        $.ajax({
            type: "GET",
            url: "trysearch.php",
            data: $("#searchdivebay").serialize(),
            context: '#content',
            success: function(data){                
                            $(this).html(data);
                    }
        });
    e.preventDefault();
    });

});
于 2012-08-06T11:53:17.963 回答
0

您需要创建一个单独的 PHP 文件作为您的 Ajax 处理程序，它只返回应该在content搜索结果部分中出现的 HTML。

现在，您返回一个完整的 HTML 页面会破坏 DOM 的语义和结构。

您会看到闪烁，因为当您单击提交按钮时页面会自动刷新。您需要调用该e.preventDefault()方法来防止这种情况发生，或者return false在处理程序结束时调用submit。

于 2012-08-06T11:53:35.140 回答
0

除了所有其他答案之外，您似乎只需要从 php 文件加载内容，对吗？

您不需要整个 ajax 函数，只需使用load()和 php 的路径作为字符串参数。这将加载您调用 load() 的 php 中回显的任何内容。

于 2012-08-06T11:56:58.943 回答
0

除了阻止默认注释之外，您的成功功能似乎没有正确更新 html。如果您想将搜索结果放入#searchresults div，那么您将希望您的成功函数为：

success: function(data){                
    $('#searchresults').html(data);
}
于 2012-08-06T11:57:23.183 回答