ajax之点赞

最新推荐文章于 2021-03-12 01:54:09 发布

牛先森家的牛奶

最新推荐文章于 2021-03-12 01:54:09 发布

阅读量141

点赞数

分类专栏： ajax php 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_42681295/article/details/105275638

版权

ajax 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

php

6 篇文章 1 订阅

订阅专栏

ajax之点赞

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    ul li{
      list-style: none;
    }
    #list{
      margin: 50px 0 0 50px;
      width: 600px;
      height: 600px;
    }
    ul li{
      width: 500px;
      height: 100px;
      background: #cccc;
      position: relative;
      margin-bottom: 5px;
    }
    li .title{
      color: black;
    }

    li .name{
      float: left;
      width: 80px;
      height: 40px;
      color: black;
      font-size: 18px;
      text-align: center;
      line-height: 40px;
      position: absolute;
      bottom: 0;
      left: 0;

    }
    li .good{
      float: right;
      /* width: 180px; */
      height: 40px;
      position: absolute;
      bottom: 5px;
      right: 5px;
    }
    .good span{
      display: inline-block;
      font-size: 16px;
      color: #fff;
      text-align: center;
      line-height: 40px;
      width:80px;
      height: 40px;
      border-radius: 10px;
      cursor: pointer;
      
    }
    .dianzan{
      float: left;
      margin-right: 10px;
      border: 1px solid skyblue;
      background-color: skyblue;
    }
    .dis{
      float: right;
      border: 1px solid red;
      background-color: red;
    }


  </style>
</head>
<body>
  <ul id="list">
    <!-- <li data-id="">
      <h3 class="title">文本文本文本文本文本文本文本。。。</h3>
      <p class="name">fqniu</p>
      <p class="good">
        <span class="dianzan">点赞：15</span>
        <span class="dis">评论：22</span>
      </p>
    </li> -->
  </ul>
</body>
<script src="common.js"></script>
<script>
  (function(){
    /*
    需求：
      1、数据渲染：ajax调取数据进行渲染
      2、点赞：需要接口实现该功能
    */

    //数据渲染：ajax调取数据进行渲染
    let list=document.getElementById('list');

    function init(){
      // 初始化：渲染数据
      ajax2({
        type:'get',
        url:'api/weibo.json',
        data:'',
        success:str=>{
          // console.log(str);
          //字符串转成对象
          let arr=JSON.parse(str);
          let html=arr.map(item=>{
            return `<li data-id="${item.id}">
                      <h3 class="title">${item.content}</h3>
                      <p class="name">${item.username}</p>
                      <p class="good">
                        <span class="dianzan">点赞：${item.good}</span>
                        <span class="dis">评论：${item.con}</span>
                      </p>
                    </li>`;
          }).join('');
          // console.log(arr);
          list.innerHTML=html;//渲染数据
        }
      });
    }

    init();

    //点赞功能的实现：事件委托绑定事件
    list.onclick =ev=>{
      if(ev.target.className=='dianzan'){
        // console.log(ev.target);
        let id=ev.target.parentNode.parentNode.dataset.id;//获取指定li的id  dataset 获取自定义属性值的使用
        console.log(id);
        ajax2({
          type:'get',
          url:'api/04dianzan.php',
          data : 'id=' + id, //数据是id ，然后拼接上面的let id
          success:function(str){
            console.log(str);
            ev.target.innerHTML='点赞：'+str;
          }
        });
      }
    }


  })()
</script>
</html>

PHP代码（后缀名为.php文件）

<?php
  //需求：点赞功能
  $id =isset($_GET["id"]) ? $_GET["id"] : "";

  // echo $id;

  //修改文件的点赞数量
  $path='weibo.json';

  //打开文件
  $file=fopen($path,'r');  //r只读模式

  //读取文件内容
  $content=fread($file,filesize($path)); //读到的内容是字符串

  // echo $content;
  //字符串转为对象
  $arr=json_decode($content,true); //true : [{},{},{}]  false : {{},{},{}}
  
  //  var_dump ($arr);

  for($i=0; $i<count($arr); $i++){
    if($id==$arr[$i]['id']){
      $arr[$i]['good']++;
      echo $arr[$i]['good'];//把修改后的点赞数量给前端
    }
  }

  //写入文件之前修改法开模式，变成可写入的状态
  $file=fopen($path,'w+');//从头写入 覆盖旧的文件

  //写入文件
  fwrite($file,json_encode($arr,JSON_UNESCAPED_UNICODE));


  //关闭文件
  fclose($file);

?>

json代码（后缀名为.json文件）

[{"id":1,"content":"文本文本文本问问文本","good":26,"con":100,"username":"fqniu1"},
  {"id":2,"content":"文本文本文本问问文本","good":31,"con":100,"username":"fqniu2"},
  {"id":3,"content":"文本文本文本问问文本","good":36,"con":100,"username":"fqniu3"},
  {"id":4,"content":"文本文本文本问问文本","good":41,"con":100,"username":"fqniu4"},
  {"id":5,"content":"文本文本文本问问文本","good":46,"con":100,"username":"fqniu5"}]