javascript - PHP MySQL 根据选择的选项和 onclick 显示数据库

Question

我需要选择一个选项(书籍类别)，然后搜索数据库以找到属于该类别的所有书籍，并将数据库显示为表格。

我可以在此代码中使用 HTML、JavaScript、PHP 和 MySQL。

这是 HTML 代码:

<p>
            <select name="genre" size="1">
                <option value='0' id='AA'>Art & Architecture</option>
                <option value='1' id='BG'>Biography</option>
                <option value='2' id='CH'>Children</option>
                <option value='3' id='DR'>Drama</option>
                <option value='4' id='ER'>Erotica</option>
                <option value='5' id='HS'>History</option>
                <option value='6' id='ML'>Military</option>
                <option value='7' id='MU'>Music</option>
                <option value='8' id='NE'>Non-English</option>
                <option value='9' id='NV'>Novels</option>
                <option value='10' id='OC'>Occult</option>
                <option value='11' id='PS'>Philosophy</option>
                <option value='12' id='PG'>Photography</option>
                <option value='13' id='PT'>Poetry</option>
                <option value='14' id='PE'>Politics & Economics</option>
                <option value='15' id='RG'>Religion</option>
                <option value='16' id='SE'>Science & Engineering</option>
                <option value='17' id='SP'>Sport</option>
                <option value='18' id='TE'>Travel & Exploration</option>
            </select>
        <input type="submit" value="Search" onClick="">
    </p> 

这是 PHP 和 MySQL 代码:

<?php 
        $mysqli = new mysqli('localhost','root','','bookstore');
        if(mysqli_connect_errno())
        {
            $problem = mysqli_connect_error();
            echo "Error opening database";
            die ($problem);
        }
        $genre = getElementByName('genre');
        $query = "SELECT category(*) FROM book_list WHERE category=$genre"; 

        echo "<h2>These are the books available</h2>";
        // Execute Query
        $result = $mysqli->query($query);
        // echo "<table border="1">";
            while($row = $result->fetch_array(mysql_query))
            {
                $Title = $row["Title"];
                $Author = $row["Author"];
                $Price = $row["Price ($)"];

                echo "<tr><td>$Title</td><td>$Author</td><td>$Price</td></tr>";
                echo "</table>";
            }
        $result->close();
    ?>

有什么地方出错了吗？

P.S.:对 PHP 非常陌生，所以请使用简单的语言和解释。谢谢!

Answer 1

看起来你在这里混淆了 php 和 javascript (jquery) 之间的东西..不过，我对您的查询得出了以下结论..

创建了一个test.php文件

<script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>

<script>

$(document).ready(function(){
    $("#genre").on('change', function postinput(){
        var genre = $(this).val(); // this.value
        $.ajax({
            url: 'test2.php',
            data: { genre: genre },
            type: 'post'
        }).done(function(responseData) {
            console.log('Done: ', responseData);
            $("#your_html_response").html(responseData);
        }).fail(function() {
            console.log('Failed');
        });
    });
});

</script>

<p>
            <select name="genre" id="genre" size="1">
                <option value='0' id='AA'>Art & Architecture</option>
                <option value='1' id='BG'>Biography</option>
                <option value='2' id='CH'>Children</option>
                <option value='3' id='DR'>Drama</option>
                <option value='4' id='ER'>Erotica</option>
                <option value='5' id='HS'>History</option>
                <option value='6' id='ML'>Military</option>
                <option value='7' id='MU'>Music</option>
                <option value='8' id='NE'>Non-English</option>
                <option value='9' id='NV'>Novels</option>
                <option value='10' id='OC'>Occult</option>
                <option value='11' id='PS'>Philosophy</option>
                <option value='12' id='PG'>Photography</option>
                <option value='13' id='PT'>Poetry</option>
                <option value='14' id='PE'>Politics & Economics</option>
                <option value='15' id='RG'>Religion</option>
                <option value='16' id='SE'>Science & Engineering</option>
                <option value='17' id='SP'>Sport</option>
                <option value='18' id='TE'>Travel & Exploration</option>
            </select>
    </p>

    <div id="your_html_response">

    </div>

在上面，我包含了一个 jquery 库并使用下拉菜单的 onchange 函数将一个值发布到 test2.php 文件..

您还可以看到空白 <div id="your_html_response"></div>这将从 test2.php 文件

获得的响应中添加数据

同时删除了 <input type="submit" value="Search" onClick="">因为它不是必需的，因为您尚未在代码中创建表单。

创建了test2.php文件

<?php


        $mysqli = new mysqli('localhost','root','','bookstore');
        if(mysqli_connect_errno())
        {
            $problem = mysqli_connect_error();
            echo "Error opening database";
            die ($problem);
        }
        $genre = $_POST['genre'];
        $query = "SELECT category(*) FROM book_list WHERE category=$genre";

        $html_response = "<h2>These are the books available</h2>";
        // Execute Query
        $result = $mysqli->query($query);
        $html_response .= "<table border='1'>";
            while($row = $result->fetch_array(mysql_query))
            {
                $Title = $row["Title"];
                $Author = $row["Author"];
                $Price = $row["Price ($)"];

                $html_response.= "<tr><td>$Title</td><td>$Author</td><td>$Price</td></tr>";

            }
            $html_response .= "</table>";


        $result->close();
        echo $html_response;
    ?>

在上面，我从下拉列表中获取了发布的值并连接了一个数据库并使用 mysqli 查询返回了一条记录(如果有的话)..我在这里返回了 html 格式的响应..

如果你看到，在test.php中你可以找到这段代码

done(function(responseData) {
            console.log('Done: ', responseData);
            $("#your_html_response").html(responseData);
    }

我在其中使用了 $("#your_html_response").html(responseData);这是从我们从 test2.php 文件中得到的响应中添加数据

希望这能解决您的困惑。