我制作了一个简单的基于 php 和 jquery 的程序。当页面打开时，我想首先显示所有类别数据，然后选择“全部”。然后，当通过下拉列表更改类别时，数据将根据所选类别显示。 但是使用 jquery 的这个更改功能如何做到这一点。
两个文件:
index.php 文件
<?php
$db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$result = mysql_query("SELECT * from category");
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#select_category").change(function(){
var catid = $("#select_category option:selected").val();
$.ajax({
type : "post",
url : "product.php",
data: { id:catid },
success: function (response) {
var getres = $.parseJSON(response);
var results = "";
results += "<table border='1'>";
results += "<tr>"+
"<th>Product Name</th>"+
"<th>Category</th>"+
"<th>Publish</th>"+
"</tr>";
$.each(getres.data , function (key,value){
results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
});
results+= "</table>";
$(".result-container").html(results);
}
});
});
});
</script>
</head>
<body>
<select name="cat" id="select_category">
<option value="0">--All--</option>
<?php
while ($row = mysql_fetch_array($result)) { ?>
<option value="<?php echo $row['cat_id'] ?>"><?php echo $row['cat_name'] ?></option>
<?php } ?>
</select><br><br><br>
<div class="result-container">
</div>
</body>
</html>
product.php 文件
$db = mysql_connect('localhost', 'root', 'root') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$cat_id = $_POST['id'];
$query = "SELECT p.name AS product_name,CASE WHEN p.publish='yes' THEN '+' ELSE '-' END AS publish,c.cat_name AS categoryFROM product p LEFT JOIN category c ON c.cat_id = p.category";
if(!empty($cat_id)){
$query = $query. 'WHERE p.category='.$cat_id;
}
$sql = mysql_query($query);
$rows = array();
while($r = mysql_fetch_assoc($sql)) {
$rows[] = $r;
}
$result=array('data'=>$rows);
echo json_encode($result);
最佳答案
您可以通过在页面加载时使用空类别 ID 调用相同的 ajax 代码来做到这一点。
<?php
$db = mysql_connect('localhost', 'root', 'testing') or die("Could not connect database");
mysql_select_db('myproject', $db) or die("Could not select database");
$result = mysql_query("SELECT * from category");
?>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function ajaxCall(catid = '') {
$.ajax({
type: "post",
url: "product.php",
data: { id: catid },
success: function(response) {
var getres = $.parseJSON(response);
var results = "";
results += "<table border='1'>";
results += "<tr>" +
"<th>Product Name</th>" +
"<th>Category</th>" +
"<th>Publish</th>" +
"</tr>";
$.each(getres.data, function(key, value) {
results += "<tr><td>" + value.product_name + "</td><td>" + value.publish + "</td><td>" + value.category + "</td></tr>";
});
results += "</table>";
$(".result-container").html(results);
}
});
}
$(document).ready(function() {
ajaxCall();
$("#select_category").change(function() {
var catid = $("#select_category option:selected").val();
ajaxCall(catid);
});
});
</script>
</head>
<body>
<select name="cat" id="select_category">
<option value="0">--All--</option>
<?php
while ($row = mysql_fetch_array($result)) {?>
<option value="<?php echo $row['cat_id']; ?>">
<?php echo $row['cat_name']; ?>
</option>
<?php } ?>
</select>
<br>
<br>
<br>
<div class="result-container"></div>
</body>
</html>
关于php - 我想显示所有数据，选择下拉数据后，jquery 和 php 中的数据将发生变化，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51220453/