如何在同一页面上有多个帖子，以便我可以根据每个帖子查询同一个表？

Question

我的网站上有一个页面，其中列出了我的 MySQL 数据库中的所有信息并将其显示在 html 表中。在我的 html 表上方，我有另一个带有按钮的 html 表和一个带有复选框的下拉列表，我用它来过滤包含我的数据库信息的表。我所有的过滤器都单独工作，但是当我尝试让它们一起工作时，页面会重新加载，并且它只显示来自最近按下的过滤器的过滤信息。有没有办法让所有的 post 方法一起工作？

这是我希望它如何工作的一个例子：

(this parts a 

dropdown menu)

[x]loop               rooftop       happy hour

[ ]river north       [yes] [no]     [yes] [no]

[ ]old town

[x]river west

[ ]west loop

[submit]

提交时，所有复选框都已发布。这部分有效，但如果我为屋顶单击是，则仅显示屋顶的信息，并且复选框似乎未选中。

Answer 1

首先，我们不需要看到您的 submitArea 功能..我确实修改、简化和保护了一点（不是全部，但仍然......）你的代码，请注意我没有测试它..1) 在您的 HTML 中，删除您的.editBtn提交按钮。对于是/否选择，我建议您使用一些<select>下拉菜单或<input type="radio">按钮。<form>&nbsp; &nbsp; <table id="filter">&nbsp; &nbsp; &nbsp; &nbsp; <div id="title"> <h4> Filters </h4></div>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th> <h4> Rooftop </h4> </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th> <h4> Area </h4> </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th> <h4> Happy Hour </h4> </th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th> <h4> Food </h4> </th>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="rooftop" class="selectMenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select an option</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Yes">Yes</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="No">No</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="sortBy">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button onclick="dropDown()" type="button" class="dropbtn"> ‿ </button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="myDropdown" class="dropdown-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div id="area">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="get_value" id="loop" name="loop" value="Loop">Loop<br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="get_value" id="Old Town" name="oldTown" value="Old Town"> Old Town <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="get_value" id="River North" name="riverNorth" value="River North"> River North <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="get_value" id="River West" name="riverWest" value="River West"> River West <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="checkbox" class="get_value" id="West Loop" name="westLoop" value="West Loop"> West Loop <br>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input id="areaSubmit" type="submit" value="Search" onclick("submitArea()")>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td align="center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="happyHour" class="selectMenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select an option</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Yes">Yes</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="No">No</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <select id="food" class="selectMenu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="">Select an option</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="Yes">Yes</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <option value="No">No</option>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </select>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; </table></form>2) 以数组的形式而不是一个接一个地发送您的区域，这使得循环和构建查询更容易，这里是使用 jQuery 对 submitArea() 函数进行的简单改造。<script>&nbsp; &nbsp; function submitArea() {&nbsp; &nbsp; &nbsp; &nbsp; var post_vals = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params: {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; areas: [],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; rooftop: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; happyHour: 0,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; food: 0&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; $(".get_value checkbox:checked").each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; post_vals.params.areas.push($(this).val());&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; $(".selectMenu option:selected").each(function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($(this).attr("id") == "rooftop") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; post_vals.params.rooftop = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if($(this).attr("id") == "happyHour") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; post_vals.params.happyHour = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else if($(this).attr("id") == "food") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; post_vals.params.food = 1;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; alert("Check your console for posted value!");&nbsp; &nbsp; &nbsp; &nbsp; console.log("Post values:");&nbsp; &nbsp; &nbsp; &nbsp; console.log(post_vals);&nbsp; &nbsp; &nbsp; &nbsp; $.getJSON("your_php_script.php", {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; params: params&nbsp; &nbsp; &nbsp; &nbsp; }).done(function(data) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // For now if you look in the console, you'll only see your query..&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alert("Post finished, check the response in your console.");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Get your data here and do what ever you want with it, IE: rebuild your table rows if they're not already existing.&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }</script>3) 简化您的 PHP 并通过 SQL 注入更加安全，请在 google 或本网站上阅读有关此内容的信息。例如，我称它为 your_php_script.php ;)<?phprequire_once("database_connection.php");$connection = db_connect();$response = array(&nbsp; &nbsp; "status" => "success",&nbsp; &nbsp; "data" => array(), // Table data goes in here&nbsp; &nbsp; "query" => "" // Temporairy, just for your example to show in your Javascript console);if(isset($_GET["params"]) && is_array($_GET["params"])) {&nbsp; &nbsp; // Prepare mysql statement&nbsp; &nbsp; $sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE visible = 1";&nbsp; &nbsp; // Loop over the sent parameters&nbsp; &nbsp; foreach($_GET["params"] AS $key => $opt) {&nbsp; &nbsp; &nbsp; &nbsp; if($key == "areas") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if(is_array($opt)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // HERE Beware that you should check the values before you put them in the query for injections security reasons.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; foreach($opt AS $k => $area) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Real basic method of doing it.. be aware that this is not bullet proof.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $opt[$k] = mysqli_real_escape_string($connection, $area);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND area IN ('" . implode("', '", $opt) . "') ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else if($key == "rooftop") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($opt == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND rooftop = 1 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND rooftop = 0 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else if($key == "happyHour") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($opt == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND happyHour = 1 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND happyHour = 0 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; } else if($key == "food") {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if($opt == 1) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND food = 1 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $sql .= " AND food = 0 ";&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; &nbsp; $result = mysqli_query($connection, $sql);&nbsp; &nbsp; if($result) {&nbsp; &nbsp; &nbsp; &nbsp; while($row = mysqli_fetch_assoc($result)) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $response["data"][] = $row;&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; // Temporairy&nbsp; &nbsp; &nbsp; &nbsp; $response["query"] = $sql;&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; $response["status"] = "error";&nbsp; &nbsp; &nbsp; &nbsp; $response["details"] = "MySQL Query error: " . mysqli_error($connection);&nbsp; &nbsp; }} else {&nbsp; &nbsp; $response["status"] = "error";&nbsp; &nbsp; $response["details"] = "Parameter received is not an array.";}echo json_encode($response);我希望这会有所帮助。

Answer 2

您可以按顺序限制结果，按最后一个和前一个排序。W3Schools 参考：W3Schools SQL - 函数