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

Question

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

Answer 1

在这里，让我给您一个通用的布局：

这可能是使用ajax的最简单方法，我在每个项目中都使用它。 首先链接外部ajax.js，然后可以使用以下脚本。

根据您的描述，我不完全知道您在哪里做错了，但这对我来说也是如此。 原因#response是您执行脚本时尚未加载#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);
});

Answer 2

我已经解决了这个问题，从一开始就重写代码确实有帮助。 问题是，在我的JavaScript中，我仅以+ title的形式发送标题，我确实应该将其更改为title.value，这就是为什么php无法理解我试图发送的内容。 感谢Daniel的所有帮助。 我将在下面显示所有代码。 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);
                }

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

问题描述

2 个解决方案

解决方案1
0 2014-06-28 02:02:52

在这里，让我给您一个通用的布局：

ajax.js

Ajax的脚本标记请求：

或者，如果您更喜欢JQuery：

解决方案2
0 已采纳 2014-06-28 20:52:17

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

问题描述

2 个解决方案

解决方案1 0 2014-06-28 02:02:52

在这里，让我给您一个通用的布局：

ajax.js

Ajax的脚本标记请求：

或者，如果您更喜欢JQuery：

解决方案2 0 已采纳 2014-06-28 20:52:17

解决方案1
0 2014-06-28 02:02:52

解决方案2
0 已采纳 2014-06-28 20:52:17