PHP / Javascript：Javascript不向PHP發送數據

Question

我正在制作一個搜索系統，用戶在該系統中將數據輸入文本區域，然后按“ enter”（輸入），搜索文本將通過javascript發送到php搜索查詢中，從而不必重新加載頁面。

使用Javascript：

<script type="text/javascript">
function search(str)
{
if (str=="")
  {
  document.getElementById("search").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {//IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {//IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("search").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","leaderboard.php?q="+str,true);
xmlhttp.send();
}
</script>

文字輸入：

<form>
<input type="text" value="search for user" onfocus="if
(this.value==this.defaultValue) this.value='';" onblur="if (this.value!==this.defaultValue) this.value='search for user';" id="search" name="search" style="background-color: white; color: black; border: 1px solid black; font-family: verdana; font-size: 9px; height: 20px; text-align: center;" onchange="search(this.value)">
</form>

PHP：

<?php
$con = mysql_connect('localhost', 'refrigerator', 'XXX');
mysql_select_db('refrigerator');
if($q=$_GET["q"]){
$sql="SELECT * FROM users WHERE username = '".$q."'";
$result = mysql_query($sql);
$User = array(); $Count = array(); $t=0; $i=0;
 while($row = mysql_fetch_array($result)){
  $User[] = $row['username']; $Count[] = $row['count'];
  $t=mysql_num_rows($sql);
 } 

  echo '<tr><td>' .$a. '</td><td>'.$row['username'].'</td><td>'.$row['count'].'</td></tr>';

mysql_close($con);
}

if ($q=!$_GET["q"]){

  $User = array(); $Count = array(); $t=0; $i=0;
 while($row = mysql_fetch_array($result)){
  $User[] = $row['username']; $Count[] = $row['count'];
  $t=13;
 } 
   $User[] = $row['username']; $Count[] = $row['count'];
 while($i<$t) {
  $a = $i + 1;
  echo '<tr><td>' .$a. '</td><td>'.$User[$i].'</td><td>'.$Count[$i].'</td></tr>';
  $i++;
 } 
 }
?>

該javascript絕對可以運行到倒數第二行，因為url更改為“ http：//localhost/%5bclickphilia%5d/leaderboard.php？search =搜索了任何內容”，但隨后沒有任何反應。

我對此很陌生，所以我可能犯了一個非常明顯的錯誤，所以不要排除這種可能性：D

謝謝

編輯：

這是該表的完整代碼，包括php：

<table border="0" cellspacing="15" padding="0" width="200">

<th><font color="#00FF00">Rank</font></th>
<th><font color="#00FF00">Username</font></th>
<th><font color="#00FF00">Score</font></th>
<?php
$con = mysql_connect('localhost', 'refrigerator', 'XXXX');
mysql_select_db('refrigerator');
if($q=$_GET["q"]){
$sql="SELECT * FROM users WHERE username = '".$q."'";
$result = mysql_query($sql);
$result=mysql_real_escape_string($result);
$User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
} 

    echo '<tr><td>' .$a. '</td><td>'.$row['username'].'</td><td>'.$row['count'].'</td></tr>';

mysql_close($con);
}

if ($q=!$_GET["q"]){

    $User = array(); $Count = array(); $t=0; $i=0;
while($row = mysql_fetch_array($result)){
    $User[] = $row['username']; $Count[] = $row['count'];
    $t=13;
} 
    $User[] = $row['username']; $Count[] = $row['count'];
while($i<$t) {
    $a = $i + 1;
    echo '<tr><td>' .$a. '</td><td>'.$User[$i].'</td><td>'.$Count[$i].'</td></tr>';
    $i++;
} 
}
?>
</table>

我確定將php echo插入表是可行的，因為if（$ q =！$ _ GET [“ q”]）的事件可以正常工作。 數據已輸入表格中。

Answer 1

那么這條線在這里：

document.getElementById("search").innerHTML=xmlhttp.responseText;

對我來說沒有意義。 “搜索”元素是該<input>字段。 設置該元素的“ innerHTML”屬性可能對頁面沒有任何作用，因為“文本”輸入元素是“無效”元素且沒有內容。

也許您的某個地方有“ search_results”表？ 如果是這樣，至少在IE中更新這樣的<table>的“中間”可能會有些麻煩。 但是，嘗試一下，您應該可以解決這個問題。

編輯 -我將重申我認為的問題是：您的PHP代碼似乎以某種表格形式匯總了對搜索的響應； 它正在創建<tr>和<td>元素。 那些需要進入某個地方的<table> （實際上從技術上講是<tbody>但無論如何）。 我無法說出您究竟想如何完善它，甚至無法完善它。 但是，您可以嘗試將其添加到頁面中：

<div id='search_results'>Results Go Here</div>

並將其放在會顯示的位置。 然后更改“ search（）”函數，以便無論在何處設置“ innerHTML”，都將搜索的“ id”更改為“ search_results”。

Answer 2

我假設您要實現一種自動完成功能。

我認為這條線：

 document.getElementById("search").innerHTML=xmlhttp.responseText;

應該：

 document.getElementById("search_result").value=xmlhttp.responseText;

正如Pointy指出的，您需要有一個search_result表。

如果您有興趣使用jQuery路線，這將是您的新代碼：

function search(str){
    if (str != "")
        $.get("leaderboard.php", {q : str}, function(r){
            $("#search_result").html(r);
        });
}

如果您想使用Enter鍵，我將（再次）推薦jQuery，因為您可以用幾行代碼來完成此操作，而不是使用純JavaScript來完成。

Answer 3

哇。 很難知道從哪里開始。

我認為，如果您給我們更多有關您要實現的目標的想法，將會獲得更多幫助。 我認為您正在嘗試建立內聯搜索？

1. 如果您的URL更改，則表單將以某種方式提交。 由於您正在使用AJAX，因此可能不是您想要的。 添加onSubmit="return false;" 到表單元素。 那可以解決您眼前的問題。 （盡管我不確定onChange是否可以在瀏覽器中正常工作。請參閱＃2）

2. 查看jQuery的AJAX和DOM操作。 它比您嘗試使用本機工具構建它要容易得多。

3. 您的查詢將不起作用，這是一個安全問題。 現在，任何人都可以在您的q參數中發送SQL命令，並且根據權限的不同，他們可能會對數據庫執行任何操作。 看一下mysql_real_escape_string()或更好的看一下使用占位符（例如PDO）的數據庫框架。 至於查詢本身，您只會找到完全匹配的人。 您可能想使用LIKE而不是等於。