JQuery/PHP 动态下拉问题答案

【问题标题】：JQuery/PHP Dynamic Dropdown IssueJQuery/PHP 动态下拉问题
【发布时间】：2013-09-23 07:09:21
【问题描述】：

我一直在使用 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 是我要检查的脚本的实时版本。

这是我从中提取数据的表的等宽 sn-p：i.imgur.com/IOT9RUF.png

提前感谢任何的帮助！

【问题讨论】：

标签： javascript php jquery mysql dynamic

【解决方案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") 对象）。

【讨论】：

谢谢，我会试一试，一旦我（希望）得到它的工作就回来。
也感谢其他信息。我确实知道 MySQLi，但是因为我已经了解了不推荐使用的方式，所以我想我会让脚本正常运行，然后查看 MySQLi 并稍后更新它。至于 JQuery 调用，我将不得不调查一下！我还是 PHP 新手，对 javascript 来说更是如此。
就是这样！它也适用于第一次刷新。发生在我身上的少数几次之一。哈！多亏了你，我可以诚实地说我今天学到了一些东西（也希望给我的老板留下深刻印象）。

【解决方案2】：

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

第一个这样的php代码

<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<script type="text/javascript" src="jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="dropdown.js"></script>
</head>
<body>
<select name="first" id="first">
<option value="1">a</option>
<option value="2">b</option>
<option value="3">c</option>
</select>
<div id="second"></div>
</body>
</html>

dropdown2.php 代码是

<?php
if(isset($_GET['first'])){
  $first=$_GET['first'];
echo"
<select name='second' id='secondselect'>
<option value='4'>$first a</option>
<option value='5'>$first b</option>
<option value='6'>$first c</option>
</select>
";
}
?>

和 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;
});
});

【讨论】：