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

问题描述 投票：0回答：2

我的目标是使用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，

编辑：链接到屏幕截图：

screenshot

我的浏览器是Safari 7.0.4，我试过Firefox并遇到了同样的问题。

javascript php mysql ajax innerhtml
2个回答
0
投票

Here, Let me give you a generic layout:

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

我已经修复了问题，从一开始就重写代码确实有帮助。问题是在我的javascript中我将标题发送为+标题，我真的应该将其更改为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);
                }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.