新京葡娱乐场6122hh

ThinkPHP Ajax 实例源代码



ThinkPHP Ajax 实例源代码

以下列出了本节 ThinkPHP Ajax 实例的完整源代码,您也可以 点击此处 下载完整的源代码压缩包。

Public/login.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 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>

Public/loginJquery.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>

Public 模块相关操作

<?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('用户名错误!');
}
}
}
?>
    ThinkPHP Ajax 使用详解及实例
    ThinkPHP success/error 方法返回 Ajax 信息
    ThinkPHP JQuery Ajax 的实现实例
    ThinkPHP Ajax 实例源代码

zgguan.com(it学习网) — 提供最好的 XHTML教程DIV+CSS教程JavaScript教程PHP教程ThinkPHP教程