#1 jake

SpeedPHP框架主要实现的是PHP后端的编程，所以对于前端实现的Ajax等相关技术，并无特殊的要求，也就是说在SpeedPHP中可以使用各种前端技术：Ajax，Flash等等。

Ajax实现，我们比较推荐的是jQuery这个Javascript框架，以下我们来讲述如果在SpeedPHP的应用程序中使用jQuery。

在jQuery + SpeedPHP的组合中，SpeedPHP的作用主要是：

• 接收在jQuery的Ajax提交的数据，并进行处理。
  
• 返回（显示）处理后的数据和结果给jQuery接收并回调执行。
  
• 由于jQuery比较推荐使用JSON数据格式，同时JSON格式也是较轻盈的选择，所以SpeedPHP中可以使用json_encode（编码）和json_decode（解码）来接收和发送JSON格式的数据。
  

以下分别有三个例子可以让大家体会jQuery和SpeedPHP的结合使用：ajax-example[1].zip

例子1. 通过jQuery的Ajax发送数据到SpeedPHP处理并返回结果

表单test.html，jQuery的onclick事件

// 例子一
$('ex1button').click(function(){ // “计算”按钮被点击
        var numval = $('numval').val(); // numval等于id=numval的输入框的值
        // 使用jQuery的$.get来发送数据到myajax/compute中，返回数据。
        $.get('<{spUrl c=myajax a=compute}>', 'num='+numval, function(result){
                $('ex1result').html(result); // 返回的数据直接显示在id=ex1result的span中。
        });
});

function compute(){
        // 接收ajax提交的num值
        $num = $this->spArgs('num');
        // 返回（显示）num的平方
        echo $num * $num;
}

步骤：

• 在页面中加载jQuery库
  
• 按钮触发时，使用jQuery的$.get来发送数据
  
• 控制器/动作 myajax/compute 接收数据，处理（计算平方），并返回（显示）
  
• jQuery接收到数据并显示结果
  

例子2. 检查用户名是否重复，使用JSON数据

表单test.html，jQuery的onclick事件

// 例子二
$('ex2button').click(function(){ // “检查用户名重复”的按钮被点击
        // 由于需要JSON数据，所以使用$.getJSON
        $.getJSON("<{spUrl c=myajax a=check}>", { 'username': $('username').val() }, function(json){
                // 这里是返回的数据，json变量就是json格式的数据，可以直接使用
                alert("JSON 结果: " + json.status); // 使用json.status，对应myajax/check中的$result['status']
                $('ex2result').html(json.message); // 使用json.message，对应myajax/check中的$result['message']
        }); 
});

function check(){
        // 接收提交的username值
        $username = $this->spArgs('username');
        // 检查用户名重名，通常这里是通过数据库检查，这里只是简单演示，如果username等于admin即已经重名
        if( $username == 'admin' ){
                $result = array(
                        'status' => 0, // 失败标志
                        'message' => '已经存在该用户名', // 提示信息
                );                
        }else{
                $result = array(
                        'status' => 1, // 成功标志
                        'message' => '用户名可用', // 提示信息
                );        
        }
        echo json_encode( $result ); // 返回（显示）JSON结果
}

步骤：

• 在页面中加载jQuery库
  
• 按钮触发时，使用jQuery的$.getJSON来发送数据，数据类型为JSON
  
• 控制器/动作 myajax/check 接收数据，处理（计算平方），并返回JSON数据（显示JSON数据）
  
• jQuery接收到数据，根据数据的结果，分别显示——弹出status，显示message
  

// 例子三
$("ex3button").click(function(){ // “提交”按钮被点击
        // 构造发送的数据，请注意如果获取表单各项的值
        var formdata = {
                'fname' : $('fname').val(),
                'fsex'  : $('input[@name=fsex]:checked').val(),
                'fclass': $('fclass').val(),
                'fphone': $('fphone').val()
        };
        // 用$.post发送数据
        $.post('<{spUrl c=theform a=mysubmit}>', formdata, function(result){
                $('resulttable').append(result); // 返回的数据直接追加到resulttable表格的后面
        });
});

function mysubmit(){
        $data = $this->spArgs(); // $data是提交上来的数据
        $data['ctime'] = date('Y-m-d H:i:s');  // 增加当前时间
        // 这里经过处理：入库等
        
        $this->data = $data; // 发送到模板
        // 返回（显示）结果HTML，该结果由Smarty模板提供
        $this -> display('mydata.html'); 
}

<{$data.fname}>
<{if 0 == $data.fsex}>男<{else}>女<{/if}>
<{$data.fclass}>
<{$data.fphone}>
<{$data.ctime}>

步骤：

• 在页面中加载jQuery库（通常可以将此代码写到header.html文件中）
  
• 表单提交时，使用jQuery的$.post来发送表单数据
  
• 控制器/动作 theform/mysubmit接收表单数据，（写入数据库），然后返回（显示），这里用到了Smarty模板（可以不用，本例只为演示）。
  
• jQuery接收到数据并进行回调处理。
  

以上可以看出，其实Ajax（jQuery）在SpeedPHP框架应用程序中的使用，和普通的Ajax没有什么不同，只是Ajax的地址，可以通过spUrl来进行构造，就此而已。

2012-08-04 14:34:35