ajax 留言板

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言本</title>
    <link rel="stylesheet" href="css.css" type="text/css" />
    <script src="ajax.js"></script>
    <script>
    window.onload = function ()
    {
        //初始化
        var ouser = document.getElementById('user');
        var ouserinfo = document.getElementById('userinfo');
        var oreg = document.getElementById('reg');
        var ologin = document.getElementById('login');
        
        updata();
        
        function updata()
        {
            var uid = getCookie('uid');
            var username = getCookie('username');
            
            
            if(uid)
            {
                //登陆状态
                ouser.style.display = 'block';
                ouserinfo.innerHTML = username;
                oreg.style.display = 'none';
                ologin.style.display = 'none';
                
            }
            
            else
            {
                ouser.style.display = 'none';
                ouserinfo.innerHTML = '';
                oreg.style.display = 'block';
                ologin.style.display = 'block';
            }
            
        };
        
        showlist();//列出其中几条
        
        //验证用户名开始
        var ousername1 = document.getElementById('username1');
        var overifyUserNameMsg = document.getElementById('verifyUserNameMsg');
        ousername1.onblur = function ()
        {
            ajax('get','guestbook/index.php','m=index&a=verifyUserName&username='+this.value,function (data)
            {
                var d = JSON.parse(data);
                overifyUserNameMsg.innerHTML = d.message;
                if(d.code)
                {
                    overifyUserNameMsg.style.color = 'red';
                }
                else
                {
                    overifyUserNameMsg.style.color = 'green';
                }
            });
        }
        //验证用户名结束
        
        //用户注册开始
        var opassword1 = document.getElementById('password1');
        var obtnReg = document.getElementById('btnReg');
        
        obtnReg.onclick = function ()
        {
            ajax('post','guestbook/index.php','m=index&a=reg&username='+encodeURI(ousername1.value)+'&password=' + opassword1.value,function (data)
            {
                var d = JSON.parse(data);
                alert(d.message);
                
            });
        }
        //用户注册结束
        
        //用户登录开始
        var ousername2 = document.getElementById('username2');
        var opassword2 = document.getElementById('password2');
        var obtnLogin = document.getElementById('btnLogin');
        
        obtnLogin.onclick = function ()
        {
            ajax('post','guestbook/index.php','m=index&a=login&username='+encodeURI(ousername2.value)+'&password=' + opassword2.value,function (data)
            {
                
                    var d = JSON.parse(data);
                    alert(d.message);
                    if(!d.code)
                    {
                        updata();
                    }
                });
        }
        //用户登录结束
        
        //用户退出开始
        var ologout = document.getElementById('logout')
        ologout.onclick = function ()
        {
            ajax('get','guestbook/index.php','m=index&a=logout',function (data)
            {
                var d = JSON.parse(data);
                alert(d.message);
                if(!d.code)
                {
                    updata();
                }
            });
            
            return false;
        }
        //用户退出结束
        
        //用户留言开始
        var ocontent = document.getElementById('content');
        var obtnPost = document.getElementById('btnPost');
        obtnPost.onclick = function ()
        {
            ajax('post','guestbook/index.php','m=index&a=send&content='+encodeURI(ocontent.value),function (data)
            {
                var d = JSON.parse(data);
                alert(d.message);
                if(!d.code)
                {
                    createList(d.data,true);
                }
            })
        }
        //用户留言结束
        var olist = document.getElementById('list');
        
        function createList(data,insert)
        {
            var odl = document.createElement('dl');
            var odt = document.createElement('dt');
            var ostrong = document.createElement('strong');
            ostrong.innerHTML = data.username;
            odt.appendChild(ostrong);
            
            var odd1 = document.createElement('dd');
            odd1.innerHTML = data.content;
            
            var odd2 = document.createElement('dd');
            odd2.className = 't';
            var oa1 = document.createElement('a');
            oa1.href ='';
            oa1.innerHTML = '顶(<span>'+data.support+'</span>)';
            var oa2 = document.createElement('a');
            oa2.href = '';
            oa2.innerHTML = '踩(<span>'+data.oppose+'</span>)';
            
            odd2.appendChild(oa1);
            odd2.appendChild(oa2);
            
            odl.appendChild(odt);
            odl.appendChild(odd1);
            odl.appendChild(odd2);
            
            if(insert && olist.children[0])
            {
                olist.insertBefore(odl,olist.children[0]);
            }
            else
            {
                olist.appendChild(odl);
            }
        }
        
        //点击查看更多内容
        var oshowMore = document.getElementById('showMore');
        var ipage = 1;
        oshowMore.onclick = function ()
        {
            ipage++;
            showlist();
        }
        
        function showlist()
        {
            ajax('get','guestbook/index.php','m=index&a=getList&n=2&pages=' + ipage,function (data)
            {
                var d = JSON.parse(data);
                var data = d.data;
                
                if(data)
                {
                    for(var i = 0; i < data.list.length; i++ )
                    {
                        createList(data.list[i]);
                    }
                } 
                else
                {
                    if(ipage == 1)
                    {
                        olist.innerHTML = '现在还没有留言,快来请沙发...';
                    }
                    oshowMore.style.display = 'none';
                    
                }
            })
        }
        
        //获取cookie
        
        function getCookie(key) 
        {
            var arr1 = document.cookie.split('; ');
            for (var i=0; i<arr1.length; i++) 
            {
                var arr2 = arr1[i].split('=');
                if (arr2[0]==key) 
                {
                return arr2[1];
                }
            }
        }
    }
    </script>
</head>

<body>
    <div id="header"></div>

    <div id="container">

        <div id="list">
        <!--<dl>
                <dt>
                    <strong>zmouse</strong> 说 :
                </dt>
                <dd>内容</dd>
                <dd class="t">
                    <a href="javascript:;" id="support">顶(<span>0</span>)</a>
                     | 
                    <a href="javascript:;" id="oppose">踩(<span>0</span>)</a>
                </dd>
            </dl>-->
        </div>
        <div id="showMore">显示更多...</div>

        <div id="sidebar">
        
            <div id="user" style="margin-bottom: 10px;">
                <h4><span id="userinfo"></span> <a href="" id="logout">退出</a></h4>
            </div>
        
            <!-- 注册 -->
            <div id="reg">
                <h4>注册</h4>
                <div>
                    <p>用户名:<input type="text" name="username" id="username1"></p>
                    <p id="verifyUserNameMsg"></p>
                    <p>密码:<input type="password" name="password" id="password1"></p>
                    <p><input type="button" value="注册" id="btnReg" /></p>
                </div>
            </div>

            <!-- 登陆 -->
            <div id="login">
                <h4>登陆</h4>
                <div>
                    <p>用户名:<input type="text" name="username2" id="username2"></p>
                    <p>密码:<input type="password" name="password2" id="password2"></p>
                    <p><input type="button" value="登陆" id="btnLogin" /></p>
                </div>
            </div>
            
            <!-- 留言发表 -->
            <div id="sendBox">
                <h4>发表留言</h4>
                <div>
                    <textarea id="content"></textarea>
                    <input type="button" value="提交" class="btn1" id="btnPost" />
                </div>
            </div>
        </div>

    </div>
    
</body>
</html>
<?php
/**
 * @ controller Index.class.php
 * @ zmouse@vip.qq.com
 */

defined('IN_APP') or exit('Denied Access!');

class IndexController extends Controller {

    public function index() {
        echo '<p>欢迎</p>';
        //$result = $this->db->get("select * from users", 1);
        //dump($result);
    }

    /**
     * @ interface 用户名验证
     */
    public function verifyUserName() {
        
        $username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
        
        switch ($this->_verifyUserName($username)) {
            case 0:
                $this->sendByAjax(array('message'=>'恭喜你,该用户名可以注册!'));
                break;
            case 1:
                $this->sendByAjax(array('code'=>1,'message'=>'用户名长度不能小于3个或大于16个字符!'));
                break;
            case 2:
                $this->sendByAjax(array('code'=>2,'message'=>'对不起,该用户名已经被注册了!'));
                break;
            default:
                break;
        }
        
    }

    /**
     * @ interface 用户注册
     */
    public function reg() {
        $username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
        $password = trim(isset($_REQUEST['password']) ? $_REQUEST['password'] : '');
        $avatar = trim(isset($_REQUEST['avatar']) && in_array($_REQUEST['avatar'], array(1,2,3,4,5,6,7,8,9)) ? intval($_REQUEST['avatar']) : 1);

        if ($this->_verifyUserName($username) !== 0 || strlen($password)<3 || strlen($password) > 20) {
            $this->sendByAjax(array('code'=>1,'message'=>'注册失败!'));
        }
        $password = md5($password);
        if (false === $this->db->query("INSERT INTO `users` (`username`, `password`, `avatar`) VALUES ('{$username}', '{$password}', {$avatar})")) {
            $this->sendByAjax(array('code'=>1,'message'=>'注册失败!'));
        } else {
            $this->sendByAjax(array('message'=>'注册成功!'));
        }
    }


    /**
     * @ 用户登陆
     */
    public function login() {
        $username = trim(isset($_REQUEST['username']) ? $_REQUEST['username'] : '');
        $password = trim(isset($_REQUEST['password']) ? $_REQUEST['password'] : '');

        if (isset($_COOKIE['uid'])) {
            $this->sendByAjax(array('code'=>1,'message'=>'你已经登陆过了!'));
        }

        if ($rs = $this->db->get("SELECT * FROM `users` WHERE `username`='{$username}'")) {
            if ($rs['password'] != md5($password)) {
                $this->sendByAjax(array('code'=>1,'message'=>'登陆失败!'));
            } else {
                setcookie('uid', $rs['uid'], time() + 3600*60, '/');
                setcookie('username', $rs['username'], time() + 3600*60, '/');
                $this->sendByAjax(array('code'=>0,'message'=>'登陆成功!'));
            }
        } else {
            $this->sendByAjax(array('code'=>1,'message'=>'登陆失败!'));
        }
    }

    /**
     * @ 用户退出
     */
    public function logout() {
        if (!isset($_COOKIE['uid'])) {
            $this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆!'));
        } else {
            setcookie('uid', 0, time() - 3600*60, '/');
            $this->sendByAjax(array('code'=>0,'message'=>'退出成功!'));
        }
    }

    /**
     * 用户留言保存
     */
    public function send() {
        if (!isset($_COOKIE['uid'])) {
            $this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆!'));
        } else {
            $content = trim(isset($_POST['content']) ? $_POST['content'] : '');
            if (empty($content)) {
                $this->sendByAjax(array('code'=>1,'message'=>'留言内容不能为空!'));
            }
            $dateline = time();
            $this->db->query("INSERT INTO `contents` (`uid`, `content`, `dateline`) VALUES ({$_COOKIE['uid']}, '{$content}', {$dateline})");
            $returnData = array(
                'cid'        =>    $this->db->getInsertId(),
                'uid'        =>    $_COOKIE['uid'],
                'username'    =>    $_COOKIE['username'],
                'content'    =>    $content,
                'dateline'    =>    $dateline,
                'support'    =>    0,
                'oppose'    =>    0,
            );
            $this->sendByAjax(array('code'=>0,'message'=>'留言成功!','data'=>$returnData));
        }
    }

    /**
     * @ 顶
     */
    public function doSupport() {
        if (!isset($_COOKIE['uid'])) {
            $this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆!'));
        } else {
            $cid = isset($_REQUEST['cid']) ? intval($_REQUEST['cid']) : 0;
            if (!$cid) $this->sendByAjax(array('code'=>1,'message'=>'无效留言cid!'));
            $content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
            if (!$content) $this->sendByAjax(array('code'=>1,'message'=>'不存在的留言cid!'));
            $this->db->query("UPDATE `contents` SET `support`=support+1 WHERE `cid`={$cid}");
            $this->sendByAjax(array('code'=>0,'message'=>'顶成功!'));
        }
    }

    /**
     * @ 踩
     */
    public function doOppose() {
        if (!isset($_COOKIE['uid'])) {
            $this->sendByAjax(array('code'=>1,'message'=>'你还没有登陆!'));
        } else {
            $cid = isset($_REQUEST['cid']) ? intval($_REQUEST['cid']) : 0;
            if (!$cid) $this->sendByAjax(array('code'=>1,'message'=>'无效留言cid!'));
            $content = $this->db->get("SELECT cid FROM `contents` WHERE `cid`={$cid}");
            if (!$content) $this->sendByAjax(array('code'=>1,'message'=>'不存在的留言cid!'));
            $this->db->query("UPDATE `contents` SET `oppose`=oppose+1 WHERE `cid`={$cid}");
            $this->sendByAjax(array('code'=>0,'message'=>'踩成功!'));
        }
    }

    /**
     * @ 获取留言列表
     */
    public function getList() {
        $page = isset($_REQUEST['page']) ? intval($_REQUEST['page']) : 1;    //当前页数
        $n = isset($_REQUEST['n']) ? intval($_REQUEST['n']) : 10;    //每页显示条数
        //获取总记录数
        $result_count = $this->db->get("SELECT count('cid') as count FROM `contents`");
        $count = $result_count['count'] ? (int) $result_count['count'] : 0;
        if (!$count) {
            $this->sendByAjax(array('code'=>1,'message'=>'还没有任何留言!'));
        }
        $pages = ceil($count / $n);
        if ($page > $pages) {
            $this->sendByAjax(array('code'=>2,'message'=>'没有数据了!'));
        }
        $start = ( $page - 1 ) * $n;
        $result = $this->db->select("SELECT c.cid,c.uid,u.username,c.content,c.dateline,c.support,c.oppose FROM `contents` as c, `users` as u WHERE u.uid=c.uid ORDER BY c.cid DESC LIMIT {$start},{$n}");
        $data = array(
            'count'    =>    $count,
            'pages'    =>    $pages,
            'page'    =>    $page,
            'n'        =>    $n,
            'list'    =>    $result
        );
        $this->sendByAjax(array('code'=>0,'message'=>'','data'=>$data));
    }

    /**
     * @ 用户名验证
     */
    private function _verifyUserName($username='') {
        if (strlen($username) < 3 || strlen($username) > 16) {
            return 1;
        }
        $rs = $this->db->get("SELECT `username` FROM `users` WHERE `username`='{$username}'");
        if ($rs) return 2;
        return 0;
    }
}
原文地址:https://www.cnblogs.com/mayufo/p/4297827.html