ThinkPHP JQuery Ajax 的实现实例

Posted 2020-10-15 一阙梅曲香素笺

 

Thinkphp JQuery Ajax

ThinkPHP 框架和客户端是完全分离的，没有任何的依赖，而服务端返回 ajaxReturn 方法也是通用的。在《ThinkPHP Ajax 使用详解及实例》一文中，讲述的是 ThinkAjax 类库结合 prototyep 和 mootools 来实现的 Ajax 。事实上可以使用任何 Js 类库来实现 ThinkPHP Ajax ，本文就以 JQuery 来实现《ThinkPHP Ajax 使用详解及实例》一文中同样的功能。

Js 类库

要使用 ThinkPHP JQuery Ajax，需要加载的 Js 类库有：

<load href="/Public/Js/Jquery/jquery.js" />
<load href="/Public/Js/Jquery/jquery.form.js" />

说明：jquery.form.js 类库是一个 JQuery 的插件，在这里用于简化表单的 ajax 交互，可根据实际情况决定是否加载。

这些 Js 类库可以在ThinkPHP 2.1 版本官方示例的 Public/Js/Jquery 下获得，在本节实例代码下载包也提供，请确认在进行 Ajax 测试之前，正确加载了以上 Js 类库。

AJAX 返回

使用 ajaxReturn 与 success/error 这两种方法返回。

关于 ajaxReturn 方法返回具体细节请参阅《ThinkPHP Ajax 使用详解及实例》一文，success/error 返回请参阅《ThinkPHP success/error 方法返回 Ajax 信息》一文。

ThinkPHP JQuery Ajax 实例

例子功能与《ThinkPHP Ajax 使用详解及实例》一样，点击（实际使用中也可以使用其他事件来替代） “检测用户名” 按钮检测用户名是否符合要求，点击 “提交” 按钮根据输入的用户名返回不同的信息。

html 文件

Public/loginJauery.html 模板，Js 处理函数及 form 表单：

<script language="javascript">
<!--
function checkName(){
    $.post(‘-Article/checkName‘,{‘username‘:$(‘#username‘).val()},function(data){
        $(‘#result‘).html(data.info).show();
        $("#result").fadeOut(4000);
    },‘json‘);
}

$(function(){
    $(‘#form1‘).ajaxForm({
        beforeSubmit:  checkForm,  // 表单提交执行前检测
        success:       complete,  // 表单提交后执行函数
        dataType: ‘json‘
    });
    function checkForm(){
        if( ‘‘ == $.trim($(‘#username‘).val())){
            $(‘#result‘).html(‘用户名不能为空！‘).show();
            $("#result").fadeOut(4000);
            $(‘#username‘).focus();
            return false;
        }
        // 可以在此添加其它判断
    }
    function complete(data){
        if(data.status==1){
            $(‘#result‘).html(data.info).show();
            // 更新列表
            username = data.data;
            $(‘#list‘).html(‘<span style="color:blue">‘+username+‘你好!</span>‘);
        }else{
            $(‘#result‘).html(data.info).show();
            // 隐藏上次遗留的信息
            $(‘#list‘).hide();
        }
    }
});
//-->
</script>
<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post" action="-Article/checkLogin">
用户名: <input type="text" name="username" id="username" />
<input type="button" value="检查用户名" onClick="checkName()"><br />
密 码: <input type="password" name="password" /><br />
<input type="hidden" name="ajax" value="1">
<input type="submit" value="提 交">
</form>

说明

1. 点击“检查用户名”按钮触发 checkName() 函数，该函数是 JQuery 一个简单的 POST 请求功能以取代复杂 $.ajax。
2. $(‘#form1‘).ajaxForm 用于替代原本的按钮 click 事件 + $.ajax() 实现，这是 jquery.form.js 插件对 form 提交的简化。
3. 与《ThinkPHP Ajax 使用详解及实例》相比，本文增加了 checkForm() 判断。
4. 返回的数据 data 中，data.data 表示返回的数据，data.info 表示提示信息，data.status 表示状态，分别与 ajaxReturn 前三个参数对应。
5. 由于加载了 jquery.form.js 插件，表单须按一般格式提供 action 值及提交按钮 type="submit" 。
6. 要利用 JQuery 操作更多 html（如追加 html 元素为 append()），请参考 JQuery 手册。

服务端操作

输出 loginJquery.html 模板：

public function loginJquery(){
    $this->display();
}

checkName 及 checkLogin 操作与《ThinkPHP Ajax 使用详解及实例》一文完全一致，为便于查看下面再行列出：

public function checkName(){
    if ($_POST[‘username‘] == ‘admin‘){
        $this->success(‘用户名正确~‘);
    }else{
        $this->error(‘用户名错误！‘);
    }
}
public function checkLogin(){
    if ($_POST[‘username‘] == ‘admin‘){
        $this->ajaxReturn($_POST[‘username‘],‘用户名正确~‘,1);
    }else{
        $this->ajaxReturn(‘‘,‘用户名错误！‘,0);
    }
}

当表单中输入的用户名是 admin 的时候，返回正确信息，否则返回用户名错误的提示。更进一步的，可以将上述 checkLogin 方法进行扩展成为用户登陆检测功能模块。

以上是 ThinkPHP JQuery Ajax 的实现过程及关键代码部分，如果您对 ThinkPHP Ajax 还不是很熟悉，还请同时参考本节前面两篇文章《ThinkPHP Ajax 使用详解及实例》与《ThinkPHP success/error 方法返回 Ajax 信息》。

要查看该实例完整代码，请参阅《ThinkPHP Ajax 实例代码》，或者点击此处下载完整代码。