使用 Mootools 从选择器框中的“单击”事件触发 JSON 请求 - Triggering JSON request from 'click' event in a selector box using Mootools

Triggering JSON request from 'click' event in a selector box using Mootools

当我使用 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的属性"参数"我不明白为什么请求在这里应该是"空"。任何想法将不胜感激

嘿，

伙计，你的问题的答案就在问题本身。

当您单击选择时触发事件，就像您说"选择一个选项"一样

单击选择

将是错误的，但是单击一个选项也是如此，在选择中，您要查找的是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"} 的内容

试试这段代码：

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