0

mootools を使用して HTML セレクター ボックスからオプションを選択すると、非同期 JSON 要求をトリガーしようとしています。

次のフォーム要素があります。

<form method="post" id="sel">
 <select id = "_selecor_id" size=3>
   <option value = "value_a" id = "option_a">OptionA</option>
   <option value = "value_b" id = "option_b">OptionB</option>
 </select>
<p id="response"></p>
</form>

次のjavascript/mootoolsを使用して、フォーム情報を含むJSONリクエストを送信しています

window.addEvent('domready', function()
{

$('_selecor_id').addEvent('click', function(){

    new Request.JSON({
    url: "my_php_script.php",
    onSuccess: function(response)
    {
      $('response').set('html', response.params)
    }
  }).get($('sel'));
})
});

次のphpスクリプトに

$result['params'] = $_GET;
echo json_encode($result);

ただし、Chrome の開発者ツールで「null のプロパティ "params" を読み取れない」と言われましたが、ここでリクエストを「null」にする理由がわかりません。どんなアイデアでも大歓迎です

4

2 に答える 2

1

ねえ、あなたの質問への答えは質問自体にあります。

「オプションを選択する」と言ったときに選択をクリックすると、イベントがトリガーされます

選択をクリックするのは間違っていますが、選択でオプションをクリックすると、探しているのは onChange イベントであり、コードは次のようになります。

HTML

// Notice no form tag needed unless you are serializing other items
<select id = "_selecor_id" size=3>
    <option value = "value_a" id = "option_a">OptionA</option>
    <option value = "value_b" id = "option_b">OptionB</option>
</select>
<p id="response"></p>

ジャバスクリプト

window.addEvent('domready', function(){
    $('_selecor_id').addEvent('change', function(){
        new Request.JSON({ // This must return a valid json object
            url: "my_php_script.php",
            data: {
                'value': this.get('value')
            }
            onSuccess: function(responseJSON, responseText){
                $('response').set('html',responseJSON.params);
            }
        }).send();
    })
});

PHP

$result['params'] = isset($_GET['value']) ? $_GET['value'] : 'Not Set';
echo json_encode($result);

responseJson 変数には {"params":"value_b"} のようなものが含まれるようになりました

于 2012-05-09T02:32:47.837 に答える
0

このコードを試してください：

window.addEvent('domready', function(){
    $('_selecor_id').addEvent('click', function(){
        new Request.JSON({
            url: "my_php_script.php",
            onSuccess: function(response){
                $('response').set('html',(response || this.response || this.responseText || {params: ''}).params)
            }
        }).get($('sel'));
    })
});
于 2012-05-09T00:33:46.870 に答える