[英]PHP, AJAX & MySQL - updating page from multiple <select>
我的当前设置可以选择显示的最低价格,并且页面将相应地更新而不会出现问题。 但是,我还希望能够设置从不同的<select>
显示的最高价格(以及将来的其他选项,例如产品类型)。 但是,当我修改它以传递 2 个值时,我使用的方法 ( http://www.w3schools.com/php/php_ajax_database.asp ) 不起作用,它不会显示任何结果。 我认为它在尝试实际获得最大值时失败了,但我不知道在哪一点(或为什么)这失败了。 任何帮助将不胜感激! 我花了很多时间反复试验,没有其他教程方面的用处。 如果您能提供帮助,请解释您的答案,因为我是 AJAX/JS 的新手。
HTML:
<select id="price-from" onchange="setPrice(this.value)">
<option selected value="500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
</select>
<p id="to">To</p>
<select id="price-to" onchange="setPrice(this.value)">
<option value="500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option selected value="20000">£20,000</option>
</select>
JavaScript:
function setPrice(str) {
if (str == "") {
document.getElementById("section1").innerHTML = "<p>No Results</p>";
return;
alert("error 1");
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("section1").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","priceQuery.php?min=" +str + "max=" +str, true);
xmlhttp.send();
}
}
PHP:
<?php
$con = mysqli_connect('localhost','root','','nbgardens');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"nbgardens");
$min = (isset($_GET['min']) ? $_GET['min'] : null);
$max = (isset($_GET['max']) ? $_GET['max'] : null);
$sql="SELECT * FROM products WHERE product_price >= '".$min."' AND product_price<= '".$max."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result)){
echo"<div class='browse-image'>
<a href='#'>
<p class='price'>£" . $row['product_price'] . "</p>
<img src='" . $row['product_img'] . "' width='200px' class='thumb'>
<figcaption>" . $row['product_title'] . "</figcaption></a></div>";
}
mysqli_close($con);
?>
您当前的代码存在一些问题:
当您选择price-from
或选择price-to
您将使用相同的单参数启动相同的函数。 该函数不知道您给它的参数是price-from
还是price-to
。 许多解决方案之一是不给它任何参数并要求它获取选定的值
&
分隔 URL 参数使用您提供 XHR 对象的当前 url,您的请求如下所示(假设 str = "1000"):
priceQuery.php?min=1000max=1000
在您的 PHP 代码中,您的$_GET['min']
等于字符串"1000max=1000"
并且$_GET['max']
从未设置
对于您当前的 PHP 代码,我认为没有任何问题,所以这里是
HTML :
<select id="price-from" onchange="setPrice()">
<option selected value="500">£500</option>
<option value="1000">£1000</option>
<option value="2000">...</option>
</select>
<p id="to">To</p>
<select id="price-to" onchange="setPrice()">
<option value="8000">...</option>
<option value="10000">£10,000</option>
<option selected value="20000">£20,000</option>
</select>
Javascript :
function setPrice() {
var minField = document.getElementById('price-from'),
maxField = document.getElementById('price-to');
var min = minField.options[minField.selectedIndex].value,
max = maxField.options[maxField.selectedIndex].value;
// We make sure we have both values and that max is greater than min
if (min == "" || max == "" || parseInt(max) < parseInt(min)) {
document.getElementById("section1").innerHTML = "<p>No Results</p>";
return;
alert("error 1");
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("section1").innerHTML = this.responseText;
}
};
// Don't forget the '&' to separate the two URL parameters
xmlhttp.open("GET","priceQuery.php?min=" + min + "&max=" + max, true);
xmlhttp.send();
}
}
您用下一个选择覆盖最小值/最大值。 这是正确的代码:
function setPrice() { var min = parseInt(document.getElementById('price-from').value), max = parseInt(document.getElementById('price-to').value); if(max < min) { var maxLocal = max; max = min; min = maxLocal; } if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("section1").innerHTML = this.responseText; } }; xmlhttp.open("GET","priceQuery.php?min=" +min + "max=" +max, true); xmlhttp.send(); }
<select id="price-from" onchange="setPrice()"> <option selected value="500">£500</option> <option value="1000">£1,000</option> <option value="2000">£2,000</option> <option value="3000">£3,000</option> <option value="4000">£4,000</option> <option value="5000">£5,000</option> <option value="6000">£6,000</option> <option value="7000">£7,000</option> <option value="8000">£8,000</option> <option value="9000">£9,000</option> <option value="10000">£10,000</option> <option value="20000">£20,000</option> </select> <p id="to">To</p> <select id="price-to" onchange="setPrice()"> <option value="500">£500</option> <option value="1000">£1,000</option> <option value="2000">£2,000</option> <option value="3000">£3,000</option> <option value="4000">£4,000</option> <option value="5000">£5,000</option> <option value="6000">£6,000</option> <option value="7000">£7,000</option> <option value="8000">£8,000</option> <option value="9000">£9,000</option> <option value="10000">£10,000</option> <option selected value="20000">£20,000</option> </select>
你应该试试这个:
<select id="price-from" onchange="setPrice(this.value)">
<option selected value="500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option value="20000">£20,000</option>
</select>
<p id="to">To</p>
<select id="price-to" onchange="setPrice(this.value)">
<option value="500">£500</option>
<option value="1000">£1,000</option>
<option value="2000">£2,000</option>
<option value="3000">£3,000</option>
<option value="4000">£4,000</option>
<option value="5000">£5,000</option>
<option value="6000">£6,000</option>
<option value="7000">£7,000</option>
<option value="8000">£8,000</option>
<option value="9000">£9,000</option>
<option value="10000">£10,000</option>
<option selected value="20000">£20,000</option>
</select>
对于 Javascript,您应该像这样尝试 jQuery:
<script type="text/javascript">
$(document).ready(function(){
var minValue,maxValue;
$("#price-from").on("change",function(){
minValue=$(this).val();
});
$("#price-to").on("change",function(){
maxValue=$(this).val();
});
if(minValue!='')
$.post( "priceQuery.php", { min: minValue, max: maxValue } );
});
</script>
你的 PHP 代码是这样的:
<?php
$con = mysqli_connect('localhost','root','','nbgardens');
if (!$con) {
die('Could not connect: ' . mysqli_error($con));
}
mysqli_select_db($con,"nbgardens");
$min = (isset($_POST['min']) ? $_POST['min'] : null);
$max = (isset($_POST['max']) ? $_POST['max'] : null);
$sql="SELECT * FROM products WHERE product_price >= '".$min."' AND product_price<= '".$max."'";
$result = mysqli_query($con,$sql);
while($row = mysqli_fetch_assoc($result)){
echo"<div class='browse-image'>
<a href='#'>
<p class='price'>£" . $row['product_price'] . "</p>
<img src='" . $row['product_img'] . "' width='200px' class='thumb'>
<figcaption>" . $row['product_title'] . "</figcaption></a></div>";
}
mysqli_close($con);
?>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.