php - 使用 Mootools 从选择器框中的“单击”事件触发 JSON 请求

Question

当我使用 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>

我正在使用以下 javascriipt/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 的属性“参数””，我不明白为什么这里的请求应该为“null”。任何想法将不胜感激

Answer 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>

JAVASCRIPT

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"}

Answer 2

试试这个代码：

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