2013-03-17 83 views
0

我在使用ajax工作的搜索功能在用戶輸入名稱時顯示結果時遇到了一些麻煩。 這是有問題的網站(您可以點擊查看所有看到什麼是搜索) http://ra-yon.com/beta/Test_sites/HFE/admin/contact.php 查詢在行動 http://ra-yon.com/beta/Test_sites/HFE/include/queryc.php?query=ra-yon&clause=email在使用PHP-Ajax查詢到sql server時遇到問題

問題

<html> 
    <head> 

<style type="text/css"> 
body 
{ 
background:black; 
color:black; 
width:100%; 

} 
#center 
{ 
width:90%; 
height:110%; 
background:white; 
margin:0 auto; 
text-align:center; 
color:black; 
} 
#insert{ 
background:navy; color:white; font-family:impact; font-size:18px;width:170px; height:170px; border-radius:50%; 
margin:0 auto; 
float: left; margin-left: 100px; 
top:200px; 
position: relative; 
} 
#insert:hover 

{ 
background:white; 
color:navy; 
} 
label 
{width:150px;} 
td 
{ 
    border:solid 2px black; 
    max-width: 250px; 
    text-align: center; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
<!-- 
//Browser Support Code 
function ajaxFunction(x,y){ 

    var ajaxRequest; // The variable that makes Ajax possible! 

    try{ 
     // Opera 8.0+, Firefox, Safari 
     ajaxRequest = new XMLHttpRequest(); 
    } catch (e){ 
     // Internet Explorer Browsers 
     try{ 
      ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP"); 
     } catch (e) { 
      try{ 
       ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e){ 
       // Something went wrong 
       alert("Your browser broke!"); 
       return false; 
      } 
     } 
    } 
    // Create a function that will receive data sent from the server 
    ajaxRequest.onreadystatechange = function(){ 
     if(ajaxRequest.readyState == 4){ 
      document.getElementById('table').innerHTML = ajaxRequest.responseText; 
     } 
    } 
    ajaxRequest.open("GET", "../include/queryc.php?query=" + x + "&clause="+ y, true); 
    ajaxRequest.send(null); 

} 

//--> 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script></head> 

<body> 
    <a href="index.php"> <h4 style="float:right; color:blue; position: relative; left:-100px;" id="goback"> Go back? </h4></a> 
    <div id="center"> 
<div id="queryform1" > 
    <a href="#" onclick="$('#table2').css('display','block');">View All?</a> 
    <span style="color:black;">search</span> <input type='text' onKeyUp="ajaxFunction(this.value,sel.options[sel.selectedIndex].value); " name='searchname' id="searchname" /> 

<span style="color:black;">search by</span> <select onChange="ajaxFunction(this.value,sel.options[sel.selectedIndex].value);" name="searchclause" id="searchclause"> 
     <option ></option> 
    <option value="name">Name</option> 
    <option value="email">Email Address</option> 
    <option value="subject">Subject</option> 
    <option value="date">Date</option> 

</select> 
<a href="../include/downloadcontact.php">Download file?</a> 

<div id="table2" style="display: none; margin: 0 auto; position: relative; top:40px; max-width:700px;"> 
    <div id="viewall"> 
     <?php 
     include '../include/include.php'; 
     $sql = 'select * from contactus' ; 



//print_r($sql); 
$result=mysql_query($sql); 

     ?> 
     <table> 
<tbody> 
<th>Name</th><th>Email</th><th>Subject</th><th style="width:200px;">Message</th><th>Date</th> 
<tr> 
<?php 
while ($client = mysql_fetch_array($result, MYSQL_ASSOC)){ 
echo " 
<tr> 

<td >".$client[name]."</td> 
<td >".$client[email]."</td> 
<td >".$client[subject]."</td> 
<td >".$client[message]."</td> 
<td >".$client[date]."</td> 




</tr>"; 
} ?> 
</tbody></table> 
</div></div><div id="table">TestTestTest</div> 


</div></div> 

</body> 
</html> 

它有點凌亂的代碼,現在,我打算在清理完成後進行清理。 非常感謝大家!

+0

哦XMLHttpRequest ..我們再次見面。 PS:matture請使用$ .ajax() - 由@Reflic給出的鏈接 – Sherzod 2013-03-17 22:30:42

回答

1

爲什麼不讓你的AJAX請求也使用jQuery? jQuery提供了一個簡單的$ .ajax()函數,可以非常容易地發送AJAX請求。 http://api.jquery.com/jQuery.ajax/

此外,與jQuery的功能,你的代碼不會那麼混亂。 - 凱文

編輯:示例帶回調的jQuery函數。

$.ajax({ 
     url: 'test', 
     type: 'POST', 
     data: 'data=foo', 
     success: function(text){ 
      $('.content').html(text); 
     } 
    }); 

請求的響應文本是在變量文本

+0

我使用ajax將值發佈到數據庫,但我還沒有用它來查詢和顯示結果。我如何能夠複製這個調用ajaxRequest.onreadystatechange = function(){ if(ajaxRequest.readyState == 4){document.getElementById('table')。innerHTML = ajaxRequest.responseText; 謝謝! – matture 2013-03-18 12:03:32

+0

我在回答中添加了回調函數的示例。 – Reflic 2013-03-18 14:31:37

+0

嘿所以我得到了這個到目前爲止,但它不產生任何結果函數sendPHP(){('#table,#table2')。css('display','none'); var query = $('#searchname')。attr('value'); var clause = $('#searchclause')。attr('value'); $ .ajax網址:'../include/queryc.php ?, 類型:'POST', data:「query =」+ query +「&clause =」+ clause, dataType:'html', 成功: 函數(數據){ $(data).appendTo('#table'); } }); 返回false; } – matture 2013-03-19 13:05:48