php jquery 实例教程,ThinkPHP JQuery Ajax 实例

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

html 文件

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

用户名:

密 码:

说明

点击“检查用户名”按钮触发 checkName() 函数，该函数是 JQuery 一个简单的 POST 请求功能以取代复杂 $.ajax。

$('#form1').ajaxForm 用于替代原本的按钮 click 事件 + $.ajax() 实现，这是 jquery.form.js 插件对 form 提交的简化。

与《ThinkPHP Ajax 使用详解及实例》相比，本文增加了 checkForm() 判断。

返回的数据 data 中，data.data 表示返回的数据，data.info 表示提示信息，data.status 表示状态，分别与 ajaxReturn 前三个参数对应。

由于加载了 jquery.form.js 插件，表单须按一般格式提供 action 值及提交按钮 type="submit" 。

要利用 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 实例代码》，或者点击此处下载完整代码。