Question

嘿我有一个工作的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>';

?>

Answer 1

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

Prevent the default event。（事件对象是提交处理函数的第一个参数，您需要在调用方法之前捕获它）。

Answer 2

$(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();
    });

});

Answer 3

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

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

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

Answer 4

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

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

Answer 5

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

success: function(data){                
    $('#searchresults').html(data);
}

用ajax替换div内容

5 个答案: