2012-08-06 155 views
0

嘿得到了一个可用的php脚本,并且据我所知可以告诉我的jquery ajax函数模仿任何在SO上看到的任何事情,但不知何故,这不会工作。即时通讯发布我的HTML,PHP和JS。有人可以帮我在这里吗?我一直在这一连串数日没有成功。用ajax代替div内容

在提交它似乎页面闪烁为一个短(刷新?)期间,但没有任何反应。

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>'; 

?> 
+1

这是一个错字? %(“#searchdivebay”)“%”?? – swapnesh 2012-08-06 11:46:57

+1

你用$(this).html(data)表示什么意思;你必须把选择器放在$('#container')。html(data);我不认为实际上有一个元素$(this) – 2012-08-06 11:52:46

+0

@MateiMihai我在ajax函数参数中给它一个上下文 – Bundy 2012-08-06 14:10:41

回答

0

你需要创建一个单独的PHP文件作为阿贾克斯的处理程序仅返回了应该在的搜索结果中content节去的HTML。

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

您看到闪烁,因为当您单击提交按钮时页面会自动刷新。您需要调用e.preventDefault()方法来阻止该问题,或者在submit处理程序的末尾调用return false

1

当您提交表单,浏览器加载了新的一页,这将创建一个新的JS环境。

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

+0

另外,表单的'action'指向'#'。如果jQuery提交处理程序失败,它将简单地滚动到页面的顶部? – Gavin 2012-08-06 11:51:24

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

}); 
0

除了所有其他答案,似乎所有你需要做的从php文件加载内容,对不对?

你不需要整个ajax函数,只需要使用load()和php的路径作为字符串参数。这将加载任何呼应在你调用load()的php中。

0

除了防止默认评论,它看起来像你的成功功能不正确更新HTML。如果你想把搜索结果放入#searchresults div,那么你会希望你的成功功能是:

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