• 李南江老师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);
                }
            })
        })
     
  • 相关阅读:
    有耗介质中波的传播
    介质分界处的反射
    TFSF边界条件
    吸收边界条件
    .apk的MIME类型
    Java instanceof
    Java toString()方法的自动调用
    整理一系列优秀的Android开发源码
    GOOGLE CODE ANDROID 开源项目 集合
    imsdroid 学习(初认识)
  • 原文地址:https://www.cnblogs.com/xcj-zzp/p/13340601.html
Copyright © 2020-2023  润新知