李南江老师Ajax的微博案例学习

前端通过简单逻辑把数据显示在网页上，想要真正的保存在服务器上，通过李老师提供的PHP后端代码，通过简单的文档分析KPI知道Ajax参数要传什么。（补充下--获取点赞数和剩余评论数都是通过ajax请求给服务器，然后根据返回来的值显示出来）

 //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: 2, time: 1595076431, acc: 0, ref: 0}
                //     返回：{error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞
                //: Unexpected token e in JSON at position 1 at JSON.parse (<anonymous>)--非标准json格式
              var obj=eval("("+msg+")");
                // console.log("msg"+msg);//json字符串
                // console.log("obj"+obj);//json对象
                obj.content=$text;

                //根据内容创建节点
                var $weibo=createEle(obj);

                $weibo.get(0).obj=obj;
                console.log($weibo);
                //插入微博
                $(".messageList").prepend($weibo);

                //清空输入框的内容
                $(".comment").val("");

            },
            error:function (xhr) {
                alert(xhr.status);
            }
        });


 

2. 通过

  data:"act=add&content="+$text,

把文本内容当成参数传给后端，如果成功则会根据文档显示的json字符串

//  返回：{error: 0, id: 新添加内容的ID, time: 添加时间, acc: 点赞

3.通过eval("("+msg+")")方法转化为json对象

4.点赞数和点踩数通过给当前页面的list（评论记录）添加一个obj属性，这个属性里面就是原生的这个DOM对象

    getMsgList(1);
    // weibo.php?act=get&page=1        获取一页数据
    // 返回：[{id: ID, content: "内容", time: 时间戳, acc: 顶次数, ref: 踩次数}, {...}, ...]
    function getMsgList(num){
       $.ajax({
           type:"get",
           url:"weibo.php",
           data: "act=get&page="+num,
           success:function (msg) {

               var Jsonobj=eval("("+msg+")");

               $.each(Jsonobj, function (key,value) {
                   console.log(value);
                   var $weibo=createEle(value);
                   $weibo.get(0).obj=value;
                   //插入微博
                   $(".messageList").append($weibo);

               })
           },
           error :function (xhr) {
               alert(xhr.status);
           }

       })
    }

5.在通过返会回来的json对象创建结点时，访问这个节点的jquery对象.get(0).obj这个原生DOM对象添加一个obj属性=这个本身的json对象，根据文档需要id来确定他点击是哪个评论

//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            顶某一条数据
        //                 返回：{error:0}
        $.ajax({
            type:"get",
            url:"weibo.php",
            data:"act=acc&id="+obj.id,
            success:function (msg) {
                console.log(msg);
            },
            error:function (xhr) {
                alert(xhr.status);
            }
        })
    })