我一直在使用 PHP 和 JQuery 构建动态下拉列表的脚本，但从要查询的表单发送的一些数据遇到了问题。基本上，用户将从第一个框中选择一个选项，并且从那里开始，其他框都依赖于前一个框。这些选项是从 MySQL 数据库中提取的，当选择这些相同的选项时，它们会被发送回脚本以创建下一个查询，依此类推。我对某些数据有疑问，我认为这是因为通过 GET 发送的选项中有空格。过去几天我多次查看了我的脚本，但找不到解决方案。
Here is a live version of my script to test. - 这是要查看的脚本实时版本的 URL。
这是前端。一个非常基本的表单和一些 JavaScript 将信息发送到后端脚本:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(function(){
$("#series").change(function() {
$("#range").load("findbackend.php?series=" + $("#series").val());
});
$("#range").change(function() {
$("#digsize").load("findbackend.php?series=" + $("#series").val() + "&range=" + $("#range").val());
});
$("#digsize").change(function() {
$("#dignum").load("findbackend.php?series=" + $("#series").val() + "&range=" + $("#range").val() + "&digsize=" + $("#digsize").val());
});
});
</script>
</head>
<body>
<select id="series">
<option selected value="base">Please Select</option>
<option value="FM800">FM800</option>
<option value="F100">F100</option>
</select>
<br>
<select id="range">
<option>Please choose from above</option>
</select>
<br>
<select id="digsize">
<option>Please choose from above</option>
</select>
<br>
<select id="dignum">
<option>Please choose from above</option>
</select>
</body>
</html>
这是我想出的后端:
<?php
//\\ MODULAR DEPENDANT DROPDOWNS \\//
//creates DB connection
$dbHost = 'host';
$dbUser = 'user';
$dbPass = 'pass';
$dbDatabase = 'database';
$con = mysql_connect($dbHost, $dbUser, $dbPass) or trigger_error("Failed to connect to MySQL Server. Error: " . mysql_error());
mysql_select_db($dbDatabase) or trigger_error("Failed to connect to database {$dbDatabase}. Error: " . mysql_error());
//prevents injections
$series = mysql_real_escape_string($_GET['series']);
isset($_GET['range'])?$range = mysql_real_escape_string($_GET['range']):"";
isset($_GET['digsize'])?$digsize = mysql_real_escape_string($_GET['digsize']):"";
isset($_GET['dignum'])?$dignum = mysql_real_escape_string($_GET['dignum']):"";
//forms the query depending on what data is recieved through GET
if (isset($_GET['dignum'])) {
$query = "SELECT DISTINCT * FROM meters WHERE series='$series' AND sio='$range' AND dig_size='$digsize' AND dig_num='$dignum' ORDER BY sio";
} elseif (isset($_GET['digsize'])) {
$query = "SELECT DISTINCT dig_num FROM meters WHERE series='$series' AND sio='$range' AND dig_size='$digsize' ORDER BY sio";
} elseif (isset($_GET['range'])) {
$query = "SELECT DISTINCT dig_size FROM meters WHERE series='$series' AND sio='$range' ORDER BY sio";
} else {
$query = "SELECT DISTINCT sio FROM meters WHERE series='$series' ORDER BY sio";
}
//creates a result array from query results
$result = mysql_query($query);
//outputs dropdown options dependent on what GET variables are set
if (isset($_GET['digsize'])) {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'dig_num'} . "'>" . $row{'dig_num'} . "</option>";
}
} elseif (isset($_GET['range'])) {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'dig_size'} . "'>" . $row{'dig_size'} . "</option>";
}
} else {
while ($row = mysql_fetch_array($result)) {
echo "<option value='" . $row{'sio'} . "'>" . $row{'sio'} . "</option>";
}
}
?>
同样，new.foxmeter.com/find.php 是我的脚本的实时版本，可供查看。
这是我的表格的等宽片段，我从中提取数据:i.imgur.com/IOT9RUF.png
提前感谢您的帮助!
最佳答案
你的直觉是对的，问题出在非转义字符(url 编码)上。为了调试 AJAX 调用，您应该使用浏览器的控制台(我强烈推荐 FireBug，但每个人都有自己的控制台)。
在通过 AJAX 发送参数之前，您必须使用 encodeURI() 对它们进行编码。例如:
$("#series").change(function() {
var val = document.getElementById('series').value;
// $("#series").val() == document.getElementById('series').value
// but the latter is faster!
$("#range").load(encodeURI("findbackend.php?series=" + val));
});
您还必须相应地调整其他 .change 函数调用。由于 PHP 脚本将接收的数据已被编码，因此您需要使用 urldecode() 对其进行解码。示例:
$series = mysql_real_escape_string(urldecode($_GET['series']));
这应该可以正常工作。
顺便说一句，您正在使用已弃用的 MySQL API，您应该使用 MySQLi 或 PDO。另外，您的 jQuery 调用可以进行一些缓存(您分别创建 $("#series") 对象三次)。
关于javascript - JQuery/PHP 动态下拉问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18873677/