2

jQuery ajax の仕組みに少し混乱しています。jQueryとphpで顧客管理システム(CMS)を作ろうとしています。

ユーザーに車を作る機会を与えたい。彼が「車の名前」を定義し、チェックボックス リストでいくつかのオプションをチェックする必要があるとしましょう。同じページで、ユーザーにいくつかのオプションを追加または削除する機会を与えます。この追加と削除は jQuery と ajax で行われます。ユーザーがオプションを追加すると、オプションを処理してデータベースに追加する php ページ (addOption.php) を呼び出します。ajax 呼び出しが成功した場合は、ajax load() 関数を使用して div にオプションを再読み込みします。データベースからオプションを読み取り、それらをチェックボックスのリストに構築するphpページ（reloadOptions.php）を呼び出す人。

これはすべて正常に機能します。どのチェックボックスがチェックされているかを確認しようとすると、問題が発生します。(ここが難しい文です) ページソースにデータが存在しないようです。これは ajax の非同期動作が原因だと思います。そして、私は車を作成するためのオプションが本当に必要です!

最後に、私の質問は、そのオプション データにどのようにアクセスできますか? できない場合でも、そのデータにアクセスできる方法はありますか? cms システムを処理するための私のアプローチについてどう思いますか? 良い / 悪い / うーん / ...

以下は、私が使用するいくつかのコードブロックです。

ページ index.php : オプションと html コードを処理する jQuery/ajax

 //At the start i load the options in
$('.options').load('./php/OptionsReload.php');

$("#FormOptions").submit(function(e) {
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: $(e.target).serialize(),
        dataType: "json",
        success: function(data) {
            $('.options').load('./php/reloadOptions.php');
        }
    });
    return false; 
});

..................
//Form where you can add the option
     <form id="FormOptions">
             <input type="text" name="optionName" />
             <input type="submit" name="submitOption" value="Add option" />
</form>

......................
 //Div where i show the options to the user
      <form name="formChecks" method="post" enctype="multipart/form-data">
             <div class="options">
                   //Content loaded with jQuery
             </div>
       </form>

ページ addOption.php : オプションをデータベースに追加するコード

 //Database connect
...
return mysql_query("INSERT INTO options(option) VALUES('". $POST_['optionName'] ."');");

ページ reloadOptions.php : オプションで html を構築するコード

<select name="mydropdown">
    <?php 
            $options = ...... connect with DB and select all the options
              while($row = mysql_fetch_assoc($options))
               {
                      echo ("<option value='" . $row['Id'] . "'>" . $row['optionName'] . "</option>");
               }
     ?>
</select>

前もって感謝します、バート

4

2 に答える 2

0

何をしようとしているのかよくわからないかもしれませんが、選択したオプションの値を取得したいだけのようです。やってみませんか？

$(document).ready(function() {
    $('.options').click(function() {
        var optionsArray = [];
        $('.options input:checked').each(function() {
            optionsArray.push(this.name);
        });
        // now optionsArray has all your options
    });
});
于 2012-10-05T18:26:34.880 に答える
0

わかりましたので、最初にJSを編集しました。（元の質問を編集）

PHPについて。$_POST のはずのところに、ここに $POST_ を書いています。

return mysql_query("INSERT INTO options(option) VALUES('". $POST_['optionName'] ."');");

そのはず

return mysql_query("INSERT INTO options(option) VALUES('". $_POST['optionName'] ."');");

また、SQLi の脆弱性を回避するために、mysql_real_escape_stringを使用してください。

「チェックボックス」に関しては、チェックボックスを生成するのではなく、オプション付きの選択タグを使用してドロップダウンを生成します。複数の選択を許可するには、先に進んでチェックボックスに変更するか ( を使用<input type="checkbox">)、複数の属性を選択に追加します ( <select name="options[]" multiple="multiple">)。どちらも問題ありません。個人的には、チェックボックスの方が好きです。

選択した値の保存について。「キャッシュ」を作成する必要があります。次のようなことができます。

$("#FormOptions").submit(function(e) {
    //if you stick to select>option, then selector should be:
    // $('.options option:selected')
    var savedOptions = $('.options input:checked');
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : this.optionName },
        dataType: "json",
        success: function(data) {
            var _savedOptions = savedOptions;
            $('.options').load('./php/reloadOptions.php', function () {
                //if you stick to select>option, then selector should be:
                // $('.options option:selected')
                $('.options input:checked').each(function() {
                    for (var i in _savedOptions) {
                        if (_savedOptions[i].value == this.value) {
                            $(this).prop("checked", true);
                        }
                    }
                })
            });
        }
    });
    return false; 
});

コメントで、チェックボックスまたは選択>オプションの両方のセレクターを指定したことに注意してください

私はそれが仕事をするべきだと思います。ただし、XSS の脆弱性には注意してください。この方法を続ける場合は、次のように、HTML を生成するときに htmlentities を使用することをお勧めします。

<select name="mydropdown" selected="selected">
    <?php 
            $options = ...... connect with DB and select all the options
              while($row = mysql_fetch_assoc($options))
               {
                      echo ("<option value='" . $row['Id'] . "'>" . 
                        htmlentities($row['optionName']) . "</option>");
               }
     ?>
</select>

クライアントが utf8 で実行されている場合は、そのパラメーターを追加するだけです (PHP 5.4 で実行している場合、これは不要になりました)。

htmlentities($someStringInThisCaseOptionName, ENT_COMPAT | ENT_HTML401, "UTF-8");

ただし、フォーム全体をリロードするというアプローチは最適ではありません。このために必要な POST リクエストは 1 つだけです。addOption.php スクリプトが次のような JSON を返すようにします{ valueGenerated : "some id"}。次に、データを取得して続行し、オプションを追加します。これを行うには、PHP スクリプトで MySQL にクエリを実行して、生成された ID を確認し、これを返す必要があります。

echo "{ \"valueGenerated\" : \"$generatedID\" }";

次に、JS 側で次のようにします。

$("#FormOptions").submit(function(e) {
    var optionName = this.optionName;
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : optionName },
        dataType: "json",
        success: function(data) {
            var optionValue = data.valueGenerated;
            $('#formChecks select[name="dropdown"]').append(
                "<option value='" + optionValue + "'>" + optionName + "</option>"
            );
        }
    });
    return false; 
});

何かを示してください: 私が行ったコードに従って、optionNameエスケープする必要があります。そうしないと、XSS の脆弱性が発生します。これは、PHP 側から行うか、先ほど示したクイック追加の代わりに適切な JS を実行することで行うことができます。

PHP側から行う方が簡単だと思いますが（htmlentitiesを使用するだけです）、他のクライアントに同じWebリクエストを使用させたい場合、彼らはそれに「苦しむ」でしょう。したがって、以前の JS コードを無視して、次のように使用することをお勧めします。

$("#FormOptions").submit(function(e) {
    var optionName = this.optionName;
    $.ajax({
        type: "POST",
        url: "./php/addOption.php",
        data: { optionName : optionName },
        dataType: "json",
        success: function(data) {
            var optionValue = data.valueGenerated;
            var newOpt = $("<option></option>").val(optionValue).text(optionName);
            $('#formChecks select[name="dropdown"]').append(newOpt);
        }
    });
    return false; 
});
于 2012-10-05T18:27:38.237 に答える