使用ajax和php在同一页面上按链接过滤和按下拉列表排序
我是这个网站的新手，php和ajax。我试图寻找解决方案，但只能找到部分。这就是我要做的，我有一个页面，有两个链接（Make和Model）和两个下拉列表（sortby和ASC/DESC）。当用户点击Make链接时，页面将刷新并按Make显示所有汽车（即所有丰田）。如果单击车型，它将刷新显示所有车型（即所有凯美瑞）的页面。如果用户还单击排序依据（即年份），则需要显示Make/Model和Sort By Year。ASC/DESC也是如此。我在这个网站上找到了一些示例代码来按部分进行排序，但不知道如何使其他下拉列表和链接起作用。这是我到目前为止所拥有的。。。请帮忙！！谢谢使用ajax和php在同一页面上按链接过滤和按下拉列表排序,php,ajax,Php,Ajax,我是这个网站的新手，php和ajax。我试图寻找解决方案，但只能找到部分。这就是我要做的，我有一个页面，有两个链接（Make和Model）和两个下拉列表（sortby和ASC/DESC）。当用户点击Make链接时，页面将刷新并按Make显示所有汽车（即所有丰田）。如果单击车型，它将刷新显示所有车型（即所有凯美瑞）的页面。如果用户还单击排序依据（即年份），则需要显示Make/Model和Sort By Year。ASC/DESC也是如此。我在这个网站上找到了一些示例代码来按部分进行排序，但不知道如
inventory.php
<script type="text/javascript">
function changeContent(strOrderBy, strMake)
{
alert(strOrderBy + " " + strMake");
if (strOrderBy=="")
{
// if blank, we'll set our innerHTML to be blank.
document.getElementById("content").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{ // code for IE7+, Firefox, Chrome, Opera, Safari
// create a new XML http Request that will go to our generator webpage.
xmlhttp=new XMLHttpRequest();
}
else
{ // code for IE6, IE5
// create an activeX object
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// on state change
xmlhttp.onreadystatechange=function()
{
// if we get a good response from the webpage, display the output
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("content").innerHTML=xmlhttp.responseText;
}
}
// use our XML HTTP Request object to send a get to our content php.
xmlhttp.open("GET","getinventory.php?orderby="+strOrderBy+"&make="+strMake, true);
xmlhttp.send();
}
</script>
<body>
<div class="colrecNav4">Sort By:
<select name="sort" id="sort" onchange="changeContent(this.value, ???)">
<option value="year">Year</option>
<option value="trim">Trim</option>
<option value="price">Price</option>
<option value="miles">Miles</option>
</select>
<select name="dir" id="dir" onchange="changeContent(this.value)">
<option value="asc">Ascending</option>
<option value="desc">Descending</option>
</select>
</div>
<?php
//reading data from the database
echo '<div class="makemodel"><a href="#" id="byMake">' . $makeFromDb . '</a></div>';
echo '<div class="makemodel"><a href="#" id="byModel">' . $modelFromDb . '</a></div>';
?>
<script>
$(".makemodela").bind("click", function(event){
var div_id=$(this).attr("id");
$.ajax({
type:'POST',
url: 'getinventory.php',
success: function(data){
changeContent($('#sort').val(), div_id);
}
});
});
</script>
....
</body>
getinventory.php
<?php
...
$sql = "SELECT * FROM inventory ORDER BY " . $_REQUEST['orderby'];
$result = mysql_query($sql);
while (...) {
echo "results...."
}
?>
在任何onChange事件中，您的AJAX调用都会传递sort by或sort column。您需要传递参数，并且在每次更改时，还需要检查其他下拉列表的值，以便可以构建有效的MySQL查询
如
orderbyyear DESC$("#dir").change(function(){
var selectedValues = $("#sort").val();
$.post("http://localhost/getinventory.php/orderby/"+selectedValues,function(data){
$("#yourdiv").html(data); // Here data consits of the html page
});
});
Ehs4n，感谢您的回复。哎呀，我点击了错误的按钮…我没有添加评论，而是点击了回答你的问题。无论如何，我有一个问题。如何传递其他下拉列表的参数？我是否需要向changeContent函数添加更多参数？谢谢有人有其他想法吗？请帮忙！我已经得到了另一个下拉列表的值。我对链接（make/model）有问题，只能在页面加载后第一次使用。在这之后，链接就不起作用了。@user1939137您能告诉我您是如何包含（make/model）链接的，以及如何调用目标的吗
$orderby = $_REQUEST['orderby'];
$make = $_REQUEST['make'];
$search_results = $db->get_results("SELECT qry WHERE MAKE=" . $make . " ORDER BY " . $orderby)
//display results
?>
$("#dir").change(function(){
var selectedValues = $("#sort").val();
$.post("http://localhost/getinventory.php/orderby/"+selectedValues,function(data){
$("#yourdiv").html(data); // Here data consits of the html page
});
});