jQuery与后台联系的微博练习代码

最新推荐文章于 2021-06-08 12:37:15 发布

大白林

最新推荐文章于 2021-06-08 12:37:15 发布

阅读量225

点赞数

文章标签： jQuery ajax wampserver

本文链接：https://blog.csdn.net/weixin_40619833/article/details/89103190

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>新浪微博</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jquery-1.12.4.js"></script>
    <script src="js/jquery.cookie.js"></script>
    <script src="js/index.js"></script>
</head>
<body>
<div class="nav">
    <img src="images/nav.png" alt="">
</div>

<div class="content">
    <img src="images/left.png" alt="" class="left">
    <div class="center">
        <textarea class="comment"></textarea>
        <input type="button" value="发布" class="send" disabled>
    </div>
    <img src="images/right.png" alt="" class="right">
    <div class="messageList"></div>
</div>
<div class="page">
    <a href="javascript:;" class="cur">1</a>
    <a href="javascript:;">2</a>
    <a href="javascript:;">3</a>
</div>
</body>
</html>

*{
    margin: 0;
    padding: 0;
}
html,body{
    width: 100%;
    height: 100%;
}
body{
    background: url("../images/body_bg.jpg") no-repeat center 0;
}
.nav{
    width: 100%;
    height: 48px;
}
.nav>img{
    width: 100%;
}
.content{
    width: 1000px;
    height: auto;
    overflow: hidden;
    background: #ebdbd4;
    margin: 200px auto 0 auto;
}
.content>.left{
    float: left;
    width: 150px;
}
.content>.right{
    float: right;
    width: 240px;
}
.content>.center{
    float: left;
    width: 600px;
    height: 168px;
    background: url("../images/comment.png") no-repeat 0 0;
    background-size: 600px 168px;
}
.center>.comment{
    width: 570px;
    height: 73px;
    margin-top: 45px;
    margin-left: 15px;
    /*background: red;*/
    resize: none;
    border: none;
    outline: none;
}
.center>.send{
    width: 82px;
    height: 30px;
    margin-top: 4px;
    margin-left: 506px;
    border: none;
    background: #fd8040;
    color: white;
}
.content>.messageList{
    width: 600px;
    background: white;
    float: left;
}
.messageList>.info{
    padding: 10px 20px;
    border-bottom: 2px solid #ccc;
}
.info>.infoText{
    line-height: 25px;
    margin-bottom: 10px;
}
.info>.infoOperation{
    width: 100%;
    overflow: hidden;
}
.infoOperation>.infoTime{
    float: left;
    font-size: 13px;
    color: #ccc;
}
.infoOperation>.infoHandle{
    float: right;
    font-size: 13px;
}
.infoHandle>a{
    text-decoration: none;
    color: #ccc;
    background: url("../images/icons.png") no-repeat 0 0;
    padding-left: 25px;
    margin-left: 10px;
}
.infoHandle>a:nth-child(2){
    background-position: 0 -17px;
}
.infoHandle>a:nth-child(3){
    background-position: 0 -33px;
}
.page{
    width: 1000px;
    height: 40px;
    background: #9f5024;
    margin: 0 auto;
    text-align: right;
    padding: 10px;
    box-sizing: border-box;
}
.page>a{
    text-decoration: none;
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #ccc;
    text-align: center;
    line-height: 20px;
    color: #2b2b2b;
}
.page>a:hover{
    background-color: #ff072f;
}
.page>.cur{
   background-color: #ff072f;
}

$(function () {
    // 0.监听内容的时时输入
    $("body").delegate(".comment","propertychange input", function () {
        // 判断是否输入了内容
        if($(this).val().length > 0){
            // 让按钮可用
            $(".send").prop("disabled", false);
        }else{
            // 让按钮不可用
            $(".send").prop("disabled", true);
        }
    });

    // var number = $.getCookie("pageNumber") || 1;
    var number = window.location.hash.substring(1) || 1;
    getMsgPage();
    function getMsgPage(){
        $(".page").html("");
        // weibo.php?act=get_page_count	获取页数
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=get_page_count",
            success: function (msg) {
                // console.log(msg);
                var obj = eval("("+msg+")");
                for(var i = 0; i < obj.count; i++){
                    var $a = $("<a href=\"javascript:;\">"+(i+1)+"</a>");
                    if(i === (number-1)){
                        $a.addClass("cur");
                    }
                    $(".page").append($a);
                }
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
    }

    // console.log(number);
    getMsgList(number);
    function getMsgList(number){
        $(".messageList").html("");
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=get&page="+number,
            success: function (msg) {
                var obj = eval("("+msg+")");
                $.each(obj, function (key, value) {
                    // console.log(value);
                    // 根据内容创建节点
                    var $weibo = createEle(value);
                    $weibo.get(0).obj = value;
                    // 插入微博
                    $(".messageList").append($weibo);
                });
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
    }

    // 1.监听发布按钮的点击
    $(".send").click(function () {
        // 拿到用户输入的内容
        var $text = $(".comment").val();
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=add&content="+$text,
            success: function (msg) {
                /*
                {error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞数, ref: 点踩数}
                非标准的JSON字符串: {error: 0, id: 1, time: 1526541587, acc: 0, ref: 0}
                标准的JSON字符串: {"error": "0", "id": "1", "time": "1526541587", "acc": "0", "ref": "0"}
                VM179:1 Uncaught SyntaxError: Unexpected token e in JSON at position 1
                */
                var obj = eval("("+msg+")");
                obj.content = $text;
                // console.log(obj);
                // 根据内容创建节点
                var $weibo = createEle(obj);
                $weibo.get(0).obj = obj;
                // 插入微博
                $(".messageList").prepend($weibo);
                // 清空输入框的内容
                $(".comment").val("");
                // 重新获取一下页码
                getMsgPage();
                // 删除最前面一条微博
                if($(".info").length > 6){
                    $(".info:last-child").remove();
                }
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
    });
    // 2.监听顶点击
    $("body").delegate(".infoTop", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
        var obj = $(this).parents(".info").get(0).obj;
        // weibo.php?act=acc&id=12			顶某一条数据
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=acc&id="+obj.id,
            success: function (msg) {
                console.log(msg);
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
    });
    // 3.监听踩点击
    $("body").delegate(".infoDown", "click", function () {
        $(this).text(parseInt($(this).text()) + 1);
        var obj = $(this).parents(".info").get(0).obj;
        // weibo.php?act=ref&id=12			踩某一条数据
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=ref&id="+obj.id,
            success: function (msg) {
                console.log(msg);
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
    });
    // 4.监听删除点击
    $("body").delegate(".infoDel", "click", function () {
        $(this).parents(".info").remove();
        var obj = $(this).parents(".info").get(0).obj;
        // weibo.php?act=del&id=12			删除一条数据
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=del&id="+obj.id,
            success: function (msg) {
                console.log(msg);
            },
            error: function (xhr) {
                alert(xhr.status);
            }
        });
        // 重新获取当前这一页数据
        // console.log($(".cur").html());
        getMsgList($(".cur").html());
    });
    // 5.监听页码点击
    $("body").delegate(".page>a", "click", function () {
        $(this).addClass("cur");
        $(this).siblings().removeClass("cur");
        // console.log($(this).html());
        getMsgList($(this).html());
        // 保存当前点击的页码
        // $.addCookie("pageNumber", $(this).html());
        window.location.hash = $(this).html();
    });
    // 创建节点方法
    function createEle(obj) {
        var $weibo = $("<div class=\"info\">\n" +
            "            <p class=\"infoText\">"+obj.content+"</p>\n" +
            "            <p class=\"infoOperation\">\n" +
            "                <span class=\"infoTime\">"+formartDate(obj.time)+"</span>\n" +
            "                <span class=\"infoHandle\">\n" +
            "                    <a href=\"javascript:;\" class='infoTop'>"+obj.acc+"</a>\n" +
            "                    <a href=\"javascript:;\" class='infoDown'>"+obj.ref+"</a>\n" +
            "                    <a href=\"javascript:;\" class='infoDel'>删除</a>\n" +
            "                </span>\n" +
            "            </p>\n" +
            "        </div>");
        return $weibo;
    }
    // 生成时间方法
    function formartDate(time) {
        var date = new Date(time * 1000);
        // 2018-4-3 21:30:23
        var arr = [date.getFullYear() + "-",
            date.getMonth() + 1 + "-",
            date.getDate() + " ",
            date.getHours() + ":",
            date.getMinutes() + ":",
            date.getSeconds()];
        return arr.join("");
    }
});

大白林

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery与后台联系的微博练习代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>新浪微博</title> <link rel="stylesheet" href="css/index.css"> <script sr...
复制链接

扫一扫