JQuery / PHP動態下拉列表問題

Question

我一直在使用PHP和JQuery構建用於動態下拉菜單的腳本，但是從表單中發送一些要查詢的數據時遇到了問題。 基本上，用戶將在第一個框中選擇一個選項，其他任何一個框都取決於前一個。 這些選項是從MySQL數據庫中提取的，選擇這些相同的選項后，會將它們發送回腳本以創建下一個查詢，依此類推。 我的某些數據有問題，我認為這是因為通過GET發送的選項中有空格。 過去幾天，我已經多次查看腳本，但找不到解決方案。

這是我要測試的腳本的實時版本。 -這是腳本的實時版本的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

在此先感謝您的幫助！

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代碼

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

JQuery / PHP動態下拉列表問題

問題描述

2 個解決方案

解決方案1
1 已采納 2013-09-18 14:09:27

解決方案2
0 2013-09-18 14:21:12

JQuery / PHP動態下拉列表問題

問題描述

2 個解決方案

解決方案1 1 已采納 2013-09-18 14:09:27

解決方案2 0 2013-09-18 14:21:12

解決方案1
1 已采納 2013-09-18 14:09:27

解決方案2
0 2013-09-18 14:21:12