我正在尝试使用ajax在我的网页上创建用户搜索栏。我想直接从我的mysql数据库返回值,而不是使用xml文件。这是因为我不想每次在网站上注册新用户时都不断更新我的xml文件。我是AJAX的新手,遇到了麻烦。现在,如果我将值硬编码到查询中,我的代码就可以工作了。但是,如何将搜索栏中的值添加到查询中,并使代码仅在将值输入搜索栏时运行。这就是我所拥有的。
我有两个文件,索引(搜索栏和php代码所在的位置),然后是ajax代码的javascript文件。
搜索条形码:
<form method="post" name="searchForm">
<input type="text" size="40" placeholder="Search for people" onkeyup="getResults(this.value)" />
<div id="search">
<?php
$searchString = $_POST['str'];
$sql = "SELECT name FROM User WHERE name LIKE '?%'";
$query = $conn->prepare($sql);
$query->execute(array($searchString));
$row = $query->fetchAll();
echo "<ul>";
foreach ($row as $rs)
{
echo "<li><a href='#'>" . $rs['name'] . "</a></li>";
}
echo "</ul>";
?>
</div>
</form>
Javascript / AJAX代码:
function getResults(str)
{
if (str.length == 0)
{
document.getElementById("search").innerHTML="";
document.getElementById("search").style.border="0px";
return;
}
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 && xmlhttp.status==200)
{
document.getElementById("search").innerHTML = xmlhttp.responseText;
document.getElementById("search").style.border="1px solid #A5ACB2";
}
}
xmlhttp.open("POST","index.php?str="+str,true);
xmlhttp.send();
}
我在这里做错了什么?除了使用提交按钮之外,一旦用户开始在搜索栏中输入内容,我只能运行php代码。感谢。
答案 0 :(得分:0)
首先,将实际页面(呈现HTML的PHP脚本)与返回实际搜索结果的代码分开。目前,在呈现页面时执行<input>
之后的PHP代码,它永远不会知道用户在搜索框中输入的内容。
您的搜索脚本应返回JSON或XML。目前,它使用完整的HTML加载为用户设计的页面。这只是浪费资源和带宽。
为了修复您的SQL语句,?
字符必须代表LIKE
表达式的整个术语。
例如:
$searchString = $_POST['str'] . '%';
$sql = "SELECT name FROM User WHERE name LIKE ?";
$query = $conn->prepare($sql);
$query->execute(array($searchString));
还有更多东西要修复,但这可以帮助你从哪里开始...
答案 1 :(得分:0)
您需要检查POST是否确实发生过 - 第一次有人点击您的页面时,很可能是通过GET,但您的搜索代码无论如何都会运行。所以......
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if (isset($_POST['str']) && ($_POST['str'] != '')) {
... run the search
}
}