数据属性API
october实现了不通过ajax的方式，实现表单的ajax提交的方式
<script src="{{ 'assets/javascript/jquery.js'|theme }}"></script>
{% framework %}
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Calculator</h3>
</div>
<div class="panel-body">
<form class="form-inline" data-request="onHandlerRequest" data-request-update="'game/game1': '#result'">
<input type="text" class="form-control" value="15" name="value1" style="width:100px">
<select class="form-control" name="operation" style="width: 70px">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" class="form-control" value="5" name="value2" style="width:100px">
<button type="submit" class="btn btn btn-primary">Calculate</button>
</form>
</div>
<div class="panel-footer" id="result">
{% partial "game/game1" %}
</div>
</div>
</div>
代码区域
function onHandlerRequest()
{
$value1 = input('value1');
$value2 = input('value2');
$operation = input('operation');
switch ($operation) {
case '+' :
$this['result'] = $value1 + $value2;
break;
case '-' :
$this['result'] = $value1 - $value2;
break;
case '*' :
$this['result'] = $value1 * $value2;
break;
default :
$this['result'] = $value1 / $value2;
break;
}
}
- onHandlerRequest提交表单时触发处理程序。
"'game/game1': '#result'"
使用部件 game/game1 更新带#result的容器元素
<form class="form-inline" data-request="onHandlerRequest" data-request-update="'game/game1': '#result'">
- 在发送请求之前单击删除按钮时请求确认：
<button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>
- 成功请求后重定向到另一页：
<form data-request="onLogin" data-request-redirect="/admin">
- 请求成功后显示一个弹出窗口：
<form data-request="onLogin" data-request-success="alert('Yay!')">
- 发送相应的请求参数
<form data-request="onUpdate" data-request-data="mode: 'update'">
- 发送一个请求参数为id，参数值为7的数据
<div data-request-data="id: 7">
<button data-request="onDelete">Delete</button>
<button data-request="onSave">Update</button>
</div>
<script>
$('button').on('ajaxSuccess',function(event,context,response){
console.log(context);
console.log(response);
});
</script>
