我的網(wǎng)站上有一個(gè)頁(yè)面，其中列出了我的 MySQL 數(shù)據(jù)庫(kù)中的所有信息并將其顯示在 html 表中。在我的 html 表上方，我有另一個(gè)帶有按鈕的 html 表和一個(gè)帶有復(fù)選框的下拉列表，我用它來(lái)過(guò)濾包含我的數(shù)據(jù)庫(kù)信息的表。我所有的過(guò)濾器都單獨(dú)工作，但是當(dāng)我嘗試讓它們一起工作時(shí)，頁(yè)面會(huì)重新加載，并且它只顯示來(lái)自最近按下的過(guò)濾器的過(guò)濾信息。有沒(méi)有辦法讓所有的 post 方法一起工作？這是我希望它如何工作的一個(gè)例子：(this parts a dropdown menu)[x]loop rooftop happy hour[ ]river north [yes] [no] [yes] [no][ ]old town[x]river west[ ]west loop[submit]提交時(shí)，所有復(fù)選框都已發(fā)布。這部分有效，但如果我為屋頂單擊是，則僅顯示屋頂?shù)男畔?，并且?fù)選框似乎未選中。
2 回答
子衿沉夜
TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超3個(gè)贊
首先，我們不需要看到您的 submitArea 功能..
我確實(shí)修改、簡(jiǎn)化和保護(hù)了一點(diǎn)（不是全部，但仍然......）你的代碼，請(qǐng)注意我沒(méi)有測(cè)試它..
1) 在您的 HTML 中，刪除您的.editBtn提交按鈕。對(duì)于是/否選擇，我建議您使用一些<select>下拉菜單或<input type="radio">按鈕。
<form>
<table id="filter">
<div id="title"> <h4> Filters </h4></div>
<tr>
<th> <h4> Rooftop </h4> </th>
<th> <h4> Area </h4> </th>
<th> <h4> Happy Hour </h4> </th>
<th> <h4> Food </h4> </th>
</tr>
<tr>
<td>
<select id="rooftop" class="selectMenu">
<option value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<div id="sortBy">
<button onclick="dropDown()" type="button" class="dropbtn"> ? </button>
<div id="myDropdown" class="dropdown-content">
<div id="area">
<input type="checkbox" class="get_value" id="loop" name="loop" value="Loop">Loop<br>
<input type="checkbox" class="get_value" id="Old Town" name="oldTown" value="Old Town"> Old Town <br>
<input type="checkbox" class="get_value" id="River North" name="riverNorth" value="River North"> River North <br>
<input type="checkbox" class="get_value" id="River West" name="riverWest" value="River West"> River West <br>
<input type="checkbox" class="get_value" id="West Loop" name="westLoop" value="West Loop"> West Loop <br>
<input id="areaSubmit" type="submit" value="Search" onclick("submitArea()")>
</div>
</div>
</td>
<td align="center">
<select id="happyHour" class="selectMenu">
<option value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
<td>
<select id="food" class="selectMenu">
<option value="">Select an option</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</td>
</tr>
</table>
</form>
2) 以數(shù)組的形式而不是一個(gè)接一個(gè)地發(fā)送您的區(qū)域，這使得循環(huán)和構(gòu)建查詢(xún)更容易，這里是使用 jQuery 對(duì) submitArea() 函數(shù)進(jìn)行的簡(jiǎn)單改造。
<script>
function submitArea() {
var post_vals = {
params: {
areas: [],
rooftop: 0,
happyHour: 0,
food: 0
}
};
$(".get_value checkbox:checked").each(function() {
post_vals.params.areas.push($(this).val());
});
$(".selectMenu option:selected").each(function() {
if($(this).attr("id") == "rooftop") {
post_vals.params.rooftop = 1;
} else if($(this).attr("id") == "happyHour") {
post_vals.params.happyHour = 1;
} else if($(this).attr("id") == "food") {
post_vals.params.food = 1;
}
});
alert("Check your console for posted value!");
console.log("Post values:");
console.log(post_vals);
$.getJSON("your_php_script.php", {
params: params
}).done(function(data) {
// For now if you look in the console, you'll only see your query..
alert("Post finished, check the response in your console.");
console.log(data);
// Get your data here and do what ever you want with it, IE: rebuild your table rows if they're not already existing.
});
}
</script>
3) 簡(jiǎn)化您的 PHP 并通過(guò) SQL 注入更加安全，請(qǐng)?jiān)?google 或本網(wǎng)站上閱讀有關(guān)此內(nèi)容的信息。例如，我稱(chēng)它為 your_php_script.php ;)
<?php
require_once("database_connection.php");
$connection = db_connect();
$response = array(
"status" => "success",
"data" => array(), // Table data goes in here
"query" => "" // Temporairy, just for your example to show in your Javascript console
);
if(isset($_GET["params"]) && is_array($_GET["params"])) {
// Prepare mysql statement
$sql = "SELECT bar_name, area, hourStart, hourEnd FROM barInfo WHERE visible = 1";
// Loop over the sent parameters
foreach($_GET["params"] AS $key => $opt) {
if($key == "areas") {
if(is_array($opt)) {
// HERE Beware that you should check the values before you put them in the query for injections security reasons.
foreach($opt AS $k => $area) {
// Real basic method of doing it.. be aware that this is not bullet proof.
$opt[$k] = mysqli_real_escape_string($connection, $area);
}
$sql .= " AND area IN ('" . implode("', '", $opt) . "') ";
}
} else if($key == "rooftop") {
if($opt == 1) {
$sql .= " AND rooftop = 1 ";
} else {
$sql .= " AND rooftop = 0 ";
}
} else if($key == "happyHour") {
if($opt == 1) {
$sql .= " AND happyHour = 1 ";
} else {
$sql .= " AND happyHour = 0 ";
}
} else if($key == "food") {
if($opt == 1) {
$sql .= " AND food = 1 ";
} else {
$sql .= " AND food = 0 ";
}
}
}
$result = mysqli_query($connection, $sql);
if($result) {
while($row = mysqli_fetch_assoc($result)) {
$response["data"][] = $row;
}
// Temporairy
$response["query"] = $sql;
} else {
$response["status"] = "error";
$response["details"] = "MySQL Query error: " . mysqli_error($connection);
}
} else {
$response["status"] = "error";
$response["details"] = "Parameter received is not an array.";
}
echo json_encode($response);
我希望這會(huì)有所幫助。
慕工程0101907
TA貢獻(xiàn)1887條經(jīng)驗(yàn) 獲得超5個(gè)贊
您可以按順序限制結(jié)果，按最后一個(gè)和前一個(gè)排序。W3Schools 參考：W3Schools SQL - 函數(shù)
- 2 回答
- 0 關(guān)注
- 197 瀏覽
添加回答
舉報(bào)
0/150
提交
取消