數(shù)據(jù)屬性API
october實現(xiàn)了不通過ajax的方式拖云，實現(xiàn)表單的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>
代碼區(qū)域
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提交表單時觸發(fā)處理程序。
"'game/game1': '#result'"
使用部件 game/game1 更新帶#result的容器元素
<form class="form-inline" data-request="onHandlerRequest" data-request-update="'game/game1': '#result'">
- 在發(fā)送請求之前單擊刪除按鈕時請求確認：
<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!')">
- 發(fā)送相應(yīng)的請求參數(shù)
<form data-request="onUpdate" data-request-data="mode: 'update'">
- 發(fā)送一個請求參數(shù)為id既峡，參數(shù)值為7的數(shù)據(jù)
<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>
