october页面ajax操作

october处理页面上ajax请求或提交数据处理

初始化

在页面，布局、或者partials中页面增加jquery

october 增加了框架自带的jquery扩展

{% framework %}

ajax处理数据

表单提交请求，在页面的php代码区

function onProcess()
{
    return request()->all();
}

通过chrome网络查看请求头信息

X-OCTOBER-REQUEST-HANDLER:onProcess
X-OCTOBER-REQUEST-PARTIALS:
X-Requested-With:XMLHttpRequest
Form Data
view source
view URL encoded
shaizi:1

返回数据

{shaizi: "1"}

具体查看各种请访问http://octobercms.com/docs/ajax/javascript-api

实现一个石头剪子布的小游戏

创建一个partials
game/game1.htm 内容如下：

{% if result %}
    
        {{ result }}
    
{% endif %}

创建一个页面game1.htm

{% framework %}


    

        

            
石头剪子布游戏
        
        

            
                
                    请选择
                    石头
                    剪子
                    布
                
                开始
            
        
    
    
    
     

                {% partial "game/game1" %}
     

在php区添加下面内容

function onGame()
{
    $data = [1=>'石头',2=>'剪子',3=>'布'];
    $shaizi = post('shaizi');
    $rnd = rand(1,3);
    $result[12] = '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'您胜';
    $result[13] =  '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'电脑胜';
    $result[21] = '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'电脑胜';
    $result[23] = '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'您胜';
    $result[32] = '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'电脑胜';
    $result[31] = '您'. $data[$shaizi]. '电脑'.$data[$rnd] .'您胜';
    $this['result'] = isset($result[$shaizi.$rnd]) ? $result[$shaizi.$rnd):'同时出' . $data[$shaizi] . ',平局';
}

效果如下：

游戏