我的目标是使用 AJAX 来显示 php 搜索结果，而无需重新加载页面。
到目前为止，我已经能够得到结果(我是 ajax 新手，而且我不知道 jQuery)，目前我唯一的问题是我在 html 表格中显示的搜索结果出现在页面顶部高于一切，不在指定的 div 中。我已使用 innerHTML 尝试正确显示它。
这是我的主要代码:
<head>
<script>
function searchResults(title) {
if (title == "") {
document.getElementById("response").innerHTML="";
}
var request= new XMLHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
var displayDiv= document.getElementById("response");
displayDiv.innerHTML=request.responseText;
}
}
request.open("GET", "functions.php?titleA="+title, true);
request.send();
document.getElementsById("response").innerHTML="Content";
}
</script>
<title>Anime Search</title>
</head>
<body>
<div class="main">
<div class= "header">
<h1>Search your Database</h1>
</div> <!-- close header -->
<div class= "searchA">
<p>Search your Anime database below</p>
<form onSubmit="searchResults(titleA)">
<label>Title</label><input type="text" name="titleA" placeholder="enter title"/>
<input type="submit" value="submit"/>
</form>
<div id="response">
</div> <!-- close response -->
</div> <!-- close searchA -->
</body>
这是 php:
if (isset($_GET["titleA"])) {
$title= $_GET["titleA"];
$connection= connect();
$username= $_SESSION["username"];
$tableA= $username . "_Anime";
$queryA= "SELECT * FROM Anime." . "`$tableA` WHERE Title LIKE '%$title%'";
$resultA= mysqli_query($connection, $queryA);
if ($resultA == false) {
die("no results found");
}
$numRows= mysqli_num_rows($resultA);
echo "<table class= 'tSearch'>
<thead>
<th>Title</th>
<th>Alt Title</th>
<th>Seasons</th>
<th>Episodes</th>
<th>OVA's</th>
<th>Movies</th>
<th>Status</th>
<th>Downloaded</th>
</thead>
<tbody>";
while($row= mysqli_fetch_array($resultA, MYSQLI_BOTH)) {
echo "<tr>";
echo "<td>" . $row["Title"] . "</td>";
echo "<td>" . $row["Alt_Title"] . "</td>";
echo "<td>" . $row["Seasons"] . "</td>";
echo "<td>" . $row["Total_Episodes"] . "</td>";
echo "<td>" . $row["OVAS"] . "</td>";
echo "<td>" . $row["Movies"] . "</td>";
echo "<td>" . $row["Status"] . "</td>";
echo "<td>" . $row["Downloaded"] . "</td>";
echo "</tr>";
}
echo "</tbody>";
echo "</table>";
mysqli_close($connection);
if ($resultA == false) {
echo mysqli_error($connection);
}
}
我当然花了很多时间试图找出问题所在，我确实计划学习 jQuery，但现在我真的想让它发挥作用，所以请不要告诉我使用 jQuery，
编辑:链接到屏幕截图:
我的浏览器是Safari 7.0.4，我尝试了Firefox，也遇到了同样的问题。
最佳答案
在这里，让我给你一个通用布局:
这可能是使用ajax的最简单的方法，我在我的每个项目中都使用它。首先链接外部ajax.js，然后您可以使用以下脚本。
根据您的描述，我不完全知道您在哪里做错了，但这即使在本地也适用。原因之一可能是执行脚本时您的 #response 尚未加载。
ajax.js
function ajaxObj( meth, url ) {
var x;
if (window.XMLHttpRequest)
{ //New Browsers
x = new XMLHttpRequest();
}
else
{ //IE5, IE6
x = new ActiveXObject("Microsoft.XMLHTTP");
}
x.open( meth, url, true );
x.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
return x;
}
function ajaxReturn(x){
if(x.readyState == 4 && x.status == 200){
return true;
}
}
Ajax 脚本标记请求:
var ajax = ajaxObj("GET", "functions.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
document.getElementById("response").innerHTML=ajax.responseText;
}
}
ajax.send("titleA="+title);
或者如果您更喜欢 JQuery:
//You need to load jQuery first before using this
$(function() { //This line means when document is ready
var ajax = ajaxObj("GET", "functions.php");
ajax.onreadystatechange = function() {
if(ajaxReturn(ajax) == true) {
$("#response").html(ajax.responseText);
}
}
ajax.send("titleA="+title);
});
关于javascript - 使用 AJAX、Javascript 和 PHP 与 MySQL 来显示搜索结果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24462359/