JQuery / PHP动态下拉问题

我一直在使用PHP和JQuery为动态下拉列表构建一个脚本，我遇到了从要查询的表单发送的一些数据的问题。 基本上，用户将从第一个框中选择一个选项，并且从那里开始，其他框依赖于前一个框。 这些选项是从MySQL数据库中提取的，当选择这些相同的选项时，它们会被发送回脚本以创建下一个查询，依此类推。 我遇到了一些数据问题，我认为这是因为选项中有空格通过GET发送。 过去几天我多次查看我的脚本，我找不到解决方案。

这是我要测试的脚本的实时版本。 – 这是要检查的脚本的实时版本的URL。

这是前端。 一个非常基本的表单和一些javascript将信息发送到后端脚本：

    $(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()); }); });     Please Select FM800 F100  
  Please choose from above  
  Please choose from above  
  Please choose from above    

以下是我提出的后端：

 <?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 "" . $row{'dig_num'} . ""; } } elseif (isset($_GET['range'])) { while ($row = mysql_fetch_array($result)) { echo "" . $row{'dig_size'} . ""; } } else { while ($row = mysql_fetch_array($result)) { echo "" . $row{'sio'} . ""; } } ?> 

同样，new.foxmeter.com/find.php是我要检查的脚本的实时版本。

这是我的表格的等宽片段，我从中提取数据：i.imgur.com/IOT9RUF.png

在此先感谢您的帮助！

Answer 1

你的直觉是对的，问题在于非转义字符（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")对象）。

Answer 2

使用ajax的简单方法，所以你需要两个php页面和至少一个js
第一个php将有第一个下拉列表然后通过ajax将它的值发送到第二个php它只是一个例子

第一个像这样的PHP代码

          a b c  
   

dropdown2.php代码是

  $first a $first b $first c  "; } ?> 

和dropdown.js

 $(document).ready(function(){ $("#first").change(function(){ str=$("#first").val(); xmlhttp=new XMLHttpRequest(); xmlhttp.open("GET","dropdown2.php?first="+str,false); xmlhttp.send(); document.getElementById("second").innerHTML=xmlhttp.responseText; }); });