Question

我正在创建一个搜索系统，用户将数据输入文本区域，当他按下“输入”时，搜索文本将通过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绝对适用于倒数第二行，因为网址更改为“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;

对我来说没有意义。 “search”元素是<input>字段。设置该元素的“innerHTML”属性可能对页面什么都不做，因为“text”输入元素是“void”元素并且没有内容。

也许你的某个地方有一个“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

哇。很难知道从哪里开始。

如果你让我们更多地了解你想要完成什么，我想你会得到更多的帮助。我在想你正在尝试建立一个内联搜索？

如果您的网址正在更改，那么表单会以某种方式提交。因为你使用的AJAX可能不是你想要的。将onSubmit="return false;"添加到表单元素。这可能会解决您的直接问题。（虽然我不确定onChange是否可以跨浏览器工作。请参阅＃2）
查看jQuery的AJAX和DOM操作。它比你尝试使用原生工具构建它要容易得多。
您的查询无效，这是一个安全问题。现在任何人都可以在q参数中发送SQL命令，并且根据权限可能会对数据库执行任何他们想要的操作。查看mysql_real_escape_string()或更好地查看使用占位符的数据库框架，例如PDO。至于查询本身，你只会找到完全匹配的人。您可能希望使用LIKE而不是等于。

PHP / Javascript：Javascript不向PHP发送数据

3 个答案: