前端通过简单逻辑把数据显示在网页上,想要真正的保存在服务器上,通过李老师提供的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); } }) })