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 
$(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

content検索結果のセクションに表示されるはずの HTML のみを返す Ajax ハンドラーとして、別の PHP ファイルを作成する必要があります。

現在、完全な HTML ページを返すと、セマンティクスと DOM の構造が壊れます。

送信ボタンをクリックするとページが自動的に更新されるため、ちらつきが発生します。e.preventDefault()それを防ぐには、メソッドを呼び出すか、ハンドラーreturn falseの最後に呼び出す必要があります。submit

于 2012-08-06T11:53:35.140 に答える