0

現在の国や州などのユーザー情報を表示する単純なユーザー テーブルがあります。

<td><b>Country</b></td>
        <td width="331">
        <form method="post" action="">
        <div id="countryList" style="vertical-align:top; display:inline-block; float:left;"><?=$country?></div>
        <input type="submit" name="submitCountry" id="submitCountry" class="ui-icon ui-icon-disk" style="border:none; display:none; background-color:transparent; float:right; vertical-align:top;" />  
        </td>
        <td width="336">&nbsp;</td>
      </tr>
      <tr>
        <td><b>Province</b></td>
        <td>
        <div id="provinceList" style="vertical-align:top; display:inline-block; float:left;"><?=$province?></div>
        </form>
      </td>

ユーザーが自分の国をクリックすると、DIV がオートコンプリート付きの入力ボックスに変換され、データベースへの AJAX 要求が開始されます。これにより、ユーザーは国を入力できるようになり、リストに表示されます。

jQuery コード:

$("#countryList").click(function(){

            $("#submitCountry").css("display", "inline");

            //check if there are any existing input elements
            if ($(this).children("input").length == 0){


                //variable that contains input HTML to replace
                var inputbox = "<input type='text' id='countryList' class='inputbox' name='country' value=\""+$(this).text()+"\">";    
                //insert the HTML intp the div
                $(this).html(inputbox);         

                //automatically give focus to the input box     
                $(".inputbox").focus();

                //maintain the input when it changes back to a div
                $(".inputbox").blur(function(){
                    $("#submitCountry").css("display", "none");

                    var value = $(this).val();
                    $("#country").val(value);
                    $("#countryList").text(value);

                });
            }  


            //Once input box is displayed assign it the autocomplete method
            $("input#countryList").autocomplete ({
                //set a few options, and select source data
                minLength : 2,
                source : function (request, callback)
                {
                    //variable that will carry the request 'term' from url
                    var data = { term : request.term };

                    //ajax method to call pho script
                    $.ajax ({
                        url : "getCountry.php",
                        data : data,
                        complete : function (xhr, result)
                        {
                            //if returns empty, then exit out
                            if (result != "success") return;

                            //otherwise get response and fill country array
                            var response = xhr.responseText;
                            var country = [];
                            //filter each li item
                            $(response).filter ("li").each (function ()
                            {
                            //display li item inline
                            country.push ($(this).text ());
                            });
                            //display country list
                            callback (country);
                        }

                    });
                }

            });   
if ($("#provinceList").children("input").length == 0){

                var selectbox = "<select id='selectProv' name='selectProv'></select> ";

                $("#provinceList").html(selectbox);

                var datastring = { term : request.term };
                $.ajax({
                    url: "getProvince.php",
                    data: datastring, 
                    success: function(html){
                        $(".selectProv").html(html);
                    }
                })
            }

getCountry.php ファイルは次のとおりです。はい、わかっています。SQL インジェクションから身を守る必要があります。現時点では、私は自分のコースでそこまで進んでいません (私は学生です)。

ここにgetCountry.phpがあります

 <?php

$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));

//send query string to DB
$result = mysql_query($query);

//if result returns a value
if ($result != NULL){

    // Use the result (sent to the browser)
    while ($row = mysql_fetch_assoc($result)){

        echo ("<li>" . utf8_encode ($row["Name"]) . " (" . utf8_encode ($row["Code"]) . ")</li>");

    }

    mysql_free_result($result);
}

mysql_close ($bd);

?>

getProvince.php このコードは、データベースのクエリとドロップダウン メニューの生成に使用されます。このコードに移動して文字列を渡すと、必要なドロップダウンが生成されるため、このコードが機能することはわかっています。問題は、アプリケーション全体で機能しないことです。

    <?php

$term = $_REQUEST["term"];
$term = utf8_decode ($term);
$dbUser = "admin";
$dbPass = "pass";
$dbName = "testdb";
$bd = mysql_connect ("localhost", $dbUser, $dbPass);
$ret = mysql_select_db ($dbName, $bd);
$query = sprintf ("SELECT * FROM Country WHERE Name LIKE '%%" . $term . "%%'", mysql_real_escape_string($term));

//send query string to DB
$result = mysql_query($query);

//if result returns a value
if ($result != NULL){

    $row = mysql_fetch_assoc($result);
    $code = $row['Code'];

    $sql = "SELECT DISTINCT District FROM City WHERE CountryCode='$code'";

    $result = mysql_query($sql);

    ?>
    <option>Select State/Province</option>
    <?php while($row=mysql_fetch_array($result)){

        echo "<option value=" . $row['District'] . ">" . $row['District'] . "</option>";
    }

    mysql_free_result($result);
}

mysql_close ($bd);

上記のコードはある程度機能します。国テキスト ボックスを取得して DB を適切にクエリし、オートコンプリート メソッドを実行することはできますが、ドロップダウンに州が表示されません。前もって感謝します

4

1 に答える 1

1

あなたのクエリはサニタイズされていません!!!!!!!!!!!!!!!!! 、どちらも適切に連結されていません。より簡単に行うことができます：

$query = "SELECT * FROM Country WHERE Name LIKE '%" . mysql_real_escape_string($term) . "%'";

常に入力をサニタイズしてください。データベースの整合性を危険にさらしているため、スクリプトを動作させることよりもさらに重要です

また、この行はサニタイズする必要があります。連結された値がデータベースから取得されたかどうかは問題ではありません

$sql = "SELECT DISTINCT District FROM City WHERE CountryCode='" . mysql_real_escape_string($code) . "'";

次の行は次のようになります。

$.ajax({
                url: "getProvince.php",
                data: datastring, 
                success: function(html){
                    $("#selectProv").html(html);
                }
            });

.selectProv が#selectProvに変更されたことに注意してください( #は「ID」を意味し、 . は「クラス」を意味します)

于 2013-01-23T18:50:51.040 に答える