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教程