【问题标题】：Using AJAX, Javascript and PHP with MySQL to display search results使用 AJAX、Javascript 和 PHP 和 MySQL 来显示搜索结果
【发布时间】：2014-06-28 00:10:10
【问题描述】：

我的目标是使用 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 也遇到了同样的问题。

【问题讨论】：

您是否遇到任何错误？如果您收到任何错误消息，我们可以查看您收到的错误消息吗？
"我唯一的问题是我在 html 表格中显示的搜索结果出现在页面顶部的所有内容之上，"??
我没有收到任何错误消息，这是图片链接，我无法上传，因为我的代表不够高。i.imgur.com/EJKhaTi.png
您的 JavaScript 代码乍一看似乎是正确的。但是我在你的 php 代码中检测到了一个 sql 注入漏洞。请使用PDO 或mysql_real_escpace_string
谢谢你，Sascha，我知道 mysql_real_escape 字符串，但它在本地托管，永远不会放在公共服务器上，不过为了完整起见，我稍后会添加它。我创建这个网站纯粹是为了了解更多关于 Web 开发的信息。

标签： javascript php mysql ajax innerhtml

【解决方案1】：

这里，我给你一个通用的布局：

这可能是使用 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);
});

【讨论】：

谢谢，我没想到要把它放到外部脚本中。我确实相信脚本在之前加载，因为如果我摆脱 if (isset($_GET["titleA"])) { $title= $_GET["titleA"];然后网站立即加载数据库中的所有内容。我不明白为什么会这样，因为我把它放在了一个只有在你提交表单时才应该激活的函数中。
脚本在 div* 之前加载
不，我认为你的问题可能在外部 ajax 脚本之外，它是文档似乎找不到正确的 div 来放置响应。
我尝试将所有 javascript 放入外部文件中，但是一旦页面加载，就会搜索数据库并且所有结果仍在显示中。
那是因为你会在页面加载时触发脚本，这很正常。

【解决方案2】：

我已经解决了这个问题，从一开始就重写你的代码确实有帮助。问题是，在我的 javascript 中，我将标题作为 +title 发送，我真的应该将其更改为 title.value，这就是为什么 php 不理解我试图发送它的原因。感谢丹尼尔的所有帮助。我将在下面显示我的所有代码。 javascript:

    function searchData() {
        var title= document.getElementById("titleA");
        var request= new XMLHttpRequest();
        request.onreadystatechange= function() {
            if (request.readyState == 4 && request.status == 200) {
                document.getElementById("response").innerHTML=request.responseText;                 
            } 
        }


        request.open("POST", "functions.php", true);
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

        request.send("title="+title.value);
    }

    </script>

php:

if (isset($_POST["title"])) {
$title= $_POST["title"];

} $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);
                }

【讨论】：