jquery+tp3实现评论的页面无刷新展示

需求图解：

html代码：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *>div>ul>li{
            list-style: none;
            border: 1px solid red;
            width: 200px;
            height: 50px;
        }

        .men{
            border: 1px solid red;
            width: 300px;
            height: 100px;
            margin-top: 10px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
<textarea name="lan" id="lan" cols="30" rows="10"></textarea>
<button id="sub">发表</button>
<foreach name="list" item="v">
<div class="{$v.id} men">
    <p>{$v.add_user} {$v.add_time|date="Y-m-d H:i:s",###}  <a href="javascript:void(0);">删除</a></p>
    <p>{$v.content}</p>
</div>
</foreach>

<script src="__PUBLIC__/js/jquery.js"></script>
<script>
    $("#sub").click(function () {
        var lan = $("#lan").val();
        if(lan.length==0){
            alert('内容不能为空');
            return  false;
        }

        //请求提交
        $.post("__URL__/lansub",
            {
                content:lan
            },
        function (data) {
            if(data==2){
                alert('发表失败');
                return false;
            }else{
                alert('发表成功');
                var arr = JSON.parse(data);
                // console.log(arr);
                //然后进行div的填充
                $("div:first").before("<div class='"+arr.id+" men'><p>"+arr.add_user+arr.add_time+"<a href='javascript:void(0);'>删除</a></p><p>"+arr.content+"</p></div>");
            }
        });
    });
</script>
</body>
</html>

php代码：

//留言页面
    public function GetLan(){
        $res = M("comment")->order('id desc')->select();
        $this->assign('list',$res);
        $this->display();
    }

    //提交留言
    public function lansub(){
        $data['content'] = I('post.content');
        $data['add_time'] = time();
        $data['add_user'] = '张三';
        if($id = M("comment")->add($data)){
            //把最新添加的数据返回给前台
            $arr['id'] = $id;
            $arr['content'] = $data['content'];
            $arr['add_time'] = date("Y-m-d H:i:s",$data['add_time']);
            $arr['add_user'] = $data['add_user'];
            echo json_encode($arr);
        }else{
            echo 2; //发表失败
        }

    }

备注：只是提供一部分思路，少部分代码需要自己修改和完成，感谢认可！

posted @ 2018-07-14 17:01 车车大人阅读(310) 评论(0) 收藏举报

刷新页面返回顶部