在MySQL中使用AJAX、Javascript和PHP显示搜索结果_Javascript_Php_Mysql_Ajax_Innerhtml

在MySQL中使用AJAX、Javascript和PHP显示搜索结果

javascript php mysql ajax

在MySQL中使用AJAX、Javascript和PHP显示搜索结果,javascript,php,mysql,ajax,innerhtml,Javascript,Php,Mysql,Ajax,Innerhtml,我的目标是使用AJAX显示php搜索结果，而不必重新加载页面。到目前为止，我已经能够得到结果，我是ajax新手，我不知道jQuery，目前我唯一的问题是，我在html表中显示的搜索结果显示在页面顶部，而不是在指定的分区中。我使用innerHTML尝试并正确显示它这是我的主要代码： <head> <script> function searchResults(title) { if (title == "") {

我的目标是使用AJAX显示php搜索结果，而不必重新加载页面。

到目前为止，我已经能够得到结果，我是ajax新手，我不知道jQuery，目前我唯一的问题是，我在html表中显示的搜索结果显示在页面顶部，而不是在指定的分区中。我使用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，然后可以使用下面的脚本

根据你的描述，我不知道你到底哪里做错了，但这对我来说甚至在本地都有效。一个原因可能是执行脚本时尚未加载响应

ajax.js Ajax的脚本标记请求：或者，如果您更喜欢JQuery：

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

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

你有什么错误吗？如果您收到任何错误消息，我们可以看到您收到的错误消息吗？我唯一的问题是，我在html表格中显示的搜索结果显示在页面顶部的所有内容之上，？我没有收到任何错误消息，这是一个图片链接，我无法上传，因为我的代表不够高。你的JavaScript代码乍一看似乎是正确的。但我在php代码中检测到一个sql注入漏洞。请使用或感谢Sascha，我知道mysql\u real\u转义字符串，但它是本地托管的，永远不会放在公共服务器上，不过为了完整起见，我稍后会添加它。我创建这个网站纯粹是为了了解更多关于web开发的信息。谢谢你，我没有想到要把它放到一个外部脚本中。我确实相信脚本是在之前加载的，因为如果我去掉if-isset$\u-get[titleA]{$title=$\u-get[titleA]；然后网站会立即加载数据库中的所有内容。我不明白为什么会这样做，因为我已经将它放在了一个函数中，该函数应该只在您提交表单时激活。脚本在div之前加载*不，我认为您的问题可能出在外部ajax脚本之外，文档似乎找不到正确的div我试着将所有javascript放在外部文件中，但是一旦页面加载，数据库就会被搜索，所有结果仍然显示出来。这是因为页面加载时会触发脚本，这是正常的。

var ajax = ajaxObj("GET", "functions.php");
    ajax.onreadystatechange = function() {
        if(ajaxReturn(ajax) == true) {
            document.getElementById("response").innerHTML=ajax.responseText;
        }
    }
ajax.send("titleA="+title);

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

    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>

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

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