october cms数据API

数据属性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;
    }
}

1. onHandlerRequest提交表单时触发处理程序。

"'game/game1': '#result'"

使用部件 game/game1 更新带#result的容器元素

  <form class="form-inline" data-request="onHandlerRequest" data-request-update="'game/game1': '#result'">

2. 在发送请求之前单击删除按钮时请求确认：

 <button data-request="onDelete" data-request-confirm="Are you sure?">Delete</button>

3. 成功请求后重定向到另一页：

<form data-request="onLogin" data-request-redirect="/admin">

4. 请求成功后显示一个弹出窗口：

<form data-request="onLogin" data-request-success="alert('Yay!')">

5. 发送相应的请求参数

<form data-request="onUpdate" data-request-data="mode: 'update'">

6. 发送一个请求参数为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>