以下列出了本节 ThinkPHP Ajax 实例的完整源代码，您也可以 点击此处 下载完整的源代码压缩包。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThinkPHP Ajax 实现示例</title>
<load href="/Public/Js/Base.js" />
<load href="/Public/Js/prototype.js" />
<load href="/Public/Js/mootools.js" />
<load href="/Public/Js/Ajax/ThinkAjax.js" />
<script language="JavaScript">
<!--
function checkName(){
ThinkAjax.send('-Article/checkName','ajax=1&username='+$('username').value,'','result');
}
function loginCheck(){
ThinkAjax.sendForm('form1','-Article/checkLogin',complete,'result');
}
function complete(data,status){
if (status==1)
{
// 提示信息
$('list').innerHTML = '<span style="color:blue">'+data+'你好!</span>';
}
}
//-->
</script>
</head>
<body>
<div>
<div id="result"></div>
<div id="list"></div>
<form name="login" id="form1" method="post">
用户名: <input type="text" name="username" />
<input type="button" value="检查用户名" onClick="checkName()"><br />
密 码: <input type="password" name="password" /><br />
<input type="button" onClick="loginCheck()" value="提 交" />
</form>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ThinkPHP JQuery Ajax 实现示例</title>
<load href="/Public/Js/Jquery/jquery.js" />
<load href="/Public/Js/Jquery/jquery.form.js" />
<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>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
<?php
class PublicAction extends Action{
public function login(){
$this->display();
}
public function checkName(){
if ($_POST['username'] == 'admin'){
$this->success('用户名正确~');
}else{
$this->error('用户名错误！');
}
}
public function checkLogin(){
if($_POST['username'] == 'admin'){
$this->ajaxReturn($_POST['username'],'用户名正确~',1);
// success 方法返回
//$this->success('用户名正确~',true);
// 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素
//$this->success('用户名正确~');
}else{
$this->ajaxReturn('','用户名错误！',0);
// error 方法返回
//$this->error('用户名错误！',true);
// 加载了 Js/Form/CheckForm.js 类库或提交了 ajax=1 隐藏表单元素
//$this->error('用户名错误！');
}
}
}
?>