0

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

助けてくれてありがとう！

4

2 に答える 2

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")オブジェクトを 3 回別々に作成します)。

于 2013-09-18T14:09:27.740 に答える