ThinkPHP+jQuery轻松ajax

使用ajax技术有利于提升用户体验,只要不盲目使用ajax即可。ThinkPHP对ajax的支持相当完善,支持所有的ajax类库,支持常见的数据类型(JSON,XML,JSONP,EVAL)。TP中Action类的ajaxReturn方法是进行ajax操作的关键,事实上我们在控制器中经常的操作success()与error()方法,系统会自动判断是否Ajax提交,如果是则返回ajax数据,否则则进行正常的POST,GET等操作,结合jQuery操作ajax简直是如鱼得水。

ThinkHP 3.1之后的版本对于ajax的操作更加灵活,因为之前版本ajax返回的数据只有status,info,data,不利于扩展,新版返回数据完全可以自定义,本文将直接介绍3.1的使用方法,流程很简单:1.前台发起ajax请求;2.后台进行数据处理;3.后台将处理后的数据返回给前台;4.前台进行相关操作。下面将根据流程详细的介绍使用方法。

HTML代码:

 

<div>
    <p id="content"></p>
    <button id="ajax">Ajax</button>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function() {
        $("#ajax").on("click", function() {
            $.ajax({
                success: function($data) {
                    $("#content").append("Name:" + $data.name + "<br />Age:" + $data.age);
                }
            });
        });
    });
</script>

当点击按钮时向当前url发起ajax请求,这里写的非常简要,对jquery ajax不太懂的同学可以去看下jquery的ajax使用方法。

 

PHP代码:

 

if (IS_AJAX) {
    $data = array(
        'name' => 'jack',
        'age' => 23
    );
    $this->ajaxReturn($data, 'json');
}
$this->display();

这里简单的演示一下,后台直接将$data数组返回给前台,前台接受后才会执行:

 

success: function($data) {
    $("#content").append("Name:" + $data.name + "<br />Age:" + $data.age);
}

向p标签中添加了接受到的数据:

 

 

前面说了ThinkPHP控制器基类Action.class中还有2个常用方法:success()与error()方法,这2个方法又调用了dispatchJump()方法,该方法中已经进行了AJAX判断,如果是AJAX提交则调用ajaxReturn方法进行返回数据,下面将模拟一个用户登录时候的AJAX处理,因为比较简单就不涉及数据库或模型自动验证机制了。

HTML代码:

<div>
    <form method="post">
        <input type="text" name="username" />
        <input type="password" name="password" />
        <button type="submit">Submit</button>
    </form>
    <p id="content"></p>
</div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
    $(function() {
        $("button[type=submit]").on("click", function() {
            $.ajax({
                type: "POST",
                data: {
                    username: $("input[name=username]").val(),
                    password: $("input[name=password]").val()
                },
                success: function($data) {
                    $("#content").html($data.info);
                }
            });
            return false;
        });
    });
</script>

简要说明:点击按钮后,使用异步提交,类型为POST,数据就是输入的值,成功接受数据后#content中将显示信息。

PHP代码:

if (IS_POST) {
    $data = I('post.');
    empty($data['username']) && $this->error('用户名不能为空');
    empty($data['password']) && $this->error('密码不能为空');
    $this->success('初步验证成功!');
}
$this->display();

效果如下: