来自mysql数据库的jquery实时搜索？答案

【问题标题】：jquery live search from mysql database?来自mysql数据库的jquery实时搜索？
【发布时间】：2010-12-16 18:35:36
【问题描述】：

这样你就可以在不按回车的情况下搜索标签。

我想知道：

标签是从数据库中还是从 XML 文件中检索到的？
是否涉及 ajax？

我是前端新手。如果涉及ajax。代码应该怎么写？

我希望它访问一个返回数据的 php 文件。但我不熟悉它的实际工作原理。

代码应该是这样的：

<html>
<body>

<script type="text/javascript">
function ajaxFunction()
{
var xmlhttp;
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if(xmlhttp.readyState==4)
{
document.myForm.time.value=xmlhttp.responseText;
}
}
xmlhttp.open("GET","time.php",true);
xmlhttp.send(null);
}
</script>

<form name="myForm">
Name: <input type="text" name="username" onkeyup="ajaxFunction();" />
Time: <input type="text" name="time" />
</form>

</body>
</html>

我如何发送用户在释放 php 密钥后键入的文本？以及在 php 使用 SELECT 获取标签后我应该如何返回值。回声？

请指导我一点。当涉及到前端时，我很困惑。

【问题讨论】：

它真的相关吗？您提供的所有变体都是可行的。您使用的内容取决于您的设置以及对您最有意义的内容
问题是我不知道如何编写代码来工作=) 你如何将数据发送到 php 文件？您如何使用回显语句从 php 发送回数据？是接收的ajax还是jquery？ php应该从数据库中检索吗？还是从 xml 文件中获取？但如果它来自 xml，那么你必须从数据库中导出它吗？请指导我一点=）

标签： javascript jquery mysql database ajax

【解决方案1】：

您实际上可以使用Firebug 自己找出答案。您会注意到在标签文本框中输入一个字母会触发对服务器的请求。

例如，条目“C”将为您提供来自服务器的以下响应：

c#|48259
javascript|18318
c++|16999
asp.net-mvc|7224
c|6948
css|6563

然后在 SO 中解释结果，然后用 jQuery 显示。

在编写答案时使用 Firebug，您还会注意到客户端每分钟左右发送一次请求：

POST answer-activity-heartbeat

这也是为什么您会注意到您当前正在处理的问题已更新为新答案的原因。

一般来说，使用 FireBug 会真正帮助您了解网站的运作方式。如果您想更好地了解 SO 是如何构思的，我建议您开始使用它。

问候

【讨论】：

我安装了萤火虫，但我是前端的菜鸟。我有 HTML、CSS 和 SCRIPT 菜单。我应该使用哪个菜单来跟踪您描述的更改？我没有看到实时变化。

【解决方案2】：

查看firebug控制台，可以看到它使用ajax发送和接收数据。最有可能是从数据库中获取数据的脚本。

你可以很容易地用 jQuery 做到这一点。

<script type="text/javascript">
  $("#username").autocomplete("search.php");
</script>
<form name="myForm">
  Name: <input type="text" name="username" id="username" />
  Time: <input type="text" name="time" />
</form>

<?php
//search.php
$q = $_GET['q']
$result = $db->query("SELECT username, id FROM users WHERE username LIKE '%$q%'");
while($user = $result->fetch_assoc()){
  echo $user['username']."|".$user['id']."\n";
}

您可以在这里下载插件：http://bassistance.de/jquery-plugins/jquery-plugin-autocomplete/

和 jQuery：http://jquery.com

【讨论】：

别忘了清理客户端输入和/或使用参数化查询来避免 SQL 注入。

【解决方案3】：

我建议如果您真的需要了解它是如何工作的，请查看 JS documentation，但如果您需要快速操作，请使用 jquery 并阅读文档（或购买像 @987654323 这样的书@)。它确实简化了执行 AJAX 的方式，您可以从服务器发回任何您想要的东西，从 JSON 到 HTML。

顺便说一句，知道输入框值何时更改以触发执行 AJAX 请求的 JS 的方法是使用输入的onchange event。

【讨论】：