使用 Mootools 从选择器框中的“单击”事件触发 JSON 请求
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'));
})
});
相关文章:
- node.js请求数据事件未在CORS ajax调用中触发
- 处理第三方库发送的ajax请求的开始和结束事件
- 单击事件中的ajax请求后重定向
- 如何将事件绑定到从AJAX请求注入的HTML
- 在html/javascript中请求撤消/重做事件
- Ajax 请求正在取消页面上的其他 JS 事件
- 在 http 请求中添加事件侦听器 ( request.on ) 是什么意思?而笏就是它的用途
- 节点 js 中的请求和响应事件如何彼此不同
- 在完成加载angular js Scope元素、Directives和Http请求后是否发生任何事件
- 是否有任何事件在浏览器请求另一个资源(如图像)之前触发
- 确保通过绑定到链接的GET请求发生跟踪事件
- 了解 JavaScript 事件处理和 ajax 请求
- Javascript move 元素与鼠标移动事件 60 FPS 请求动画帧
- 如何从节点.js请求对象读取数据事件(块)
- 如何识别源自JS脚本的http请求与HTML
- jQuery AJAX 请求事件 - 完成,失败,成功
- 如何在 angularjs 中的简单获取请求 json 之后添加事件侦听器
- Ajax 请求生成具有后续 Ajax 请求潜力的 html.辅助请求返回 [对象鼠标事件] 而不是生成的值
- 如何为每个 AJAX 请求/响应事件添加回调
- 跟踪 Google 可视化 API 请求中的事件