Question

我有这个按钮，当我点击这个按钮时，不喜欢会自动改变。喜欢的数量显示在按钮上方。为此，我使用了ajax来实现这个功能。

这是我在视图中的代码：

<p id='state'>
   <i class='fa fa-thumbs-up'></i> <?php echo $countLike;?> likes &bull; 
   <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes</p>

   <button class='detailButton' name='like_name' id='click_like' value='<?php echo $link;?>' title='Like this post'><i class='fa fa-thumbs-up'></i> Like</button>

视图上方的Javascript代码：

<script type="javascript/text">
$(document).ready(function){
  $("#click_like").click(function(event){
    event.preventDefault();
    var id = document.getElementById("click_name").value;
    jQuery.ajax({
      type:"GET",
      url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
      dataType:'json',
      data: {like_id = id},
      success: function(res){
        if(res){
          jQuery("div#state").html(res.no_likes);
        }      
      }
    });
  });
});

我的控制器：

public function like_total(){
        $id = $this->session->userdata('userID');
        $upload = $_GET['like_id'];
        $data = array('like' => 1,
                        'userID'=>$id,
                        'uploadID'=>$_GET['like_id']);

        $this->photoCheese_model->get_like_total($data,$upload);

        return json_encode($data);
    }

型号：

public function get_like_total($data,$uplaod){
        $success = $this->db->insert('tbl_like',$data);

        if($success){
            $this->db->select('uploadID,SUM(`like`) as no_likes',false);
            $this->db->where('uploadID',$upload);
            $this->db->where('like !=',2);

            $query = $this->db->get();


        }
        return $query->result_array();
    }

当我尝试运行此代码时，它没有任何效果。我的意思是，它根本没有显示任何结果。我是ajax的新手，也是我第一次实现这个。请帮帮我。非常感谢。

Answer 1

这在您的代码中是错误的。也可以从jQuery.ajax()

获取参考

data: {like_id = id},

它将是

data: {like_id:id},

Answer 2

更改以下数据，使用:代替=

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

jQuery.ajax({
      type:"GET",
      url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
      dataType:'json',
      data: {like_id : id},
      success: function(res){

          $("#like").html(res);

      }
    });

和您的HTML显示如下的计数

<p id='state'>
   <i class='fa fa-thumbs-up'></i> <b id="like"><?php echo $countLike;?></b> likes &bull; 
   <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes</p>

Answer 3

如saty所述，您的数据对象不正确。

此外，更重要的是，这一行失败了：

jQuery("div#state").html(res.no_likes);

您的#state是p元素而不是div，因此选择器不应该选择任何内容。因此导致没有看到任何变化。该行中的下一个错误是它用数字替换完整的HTML，而不是仅更新数字。请尝试使用此HTML和JS：

HTML：

<p id='state'>
    <i class='fa fa-thumbs-up'></i><span id="state_likes"><?php echo $countLike;?></span> likes &bull; 
    <i class='fa fa-thumbs-down'></i> <?php echo $countDisLike;?> dislikes
</p>

<button class='detailButton' name='like_name' id='click_like' value='<?php echo $link;?>' title='Like this post'><i class='fa fa-thumbs-up'></i> Like</button>

的javascript：

jQuery.ajax({
  type:"GET",
  url: "<?php echo base_url();?>index.php/photoCheese/like_total/",
  dataType:'json',
  data: {like_id: id},
  success: function(res){
    if(res){
      jQuery("#state_likes").html(res.no_likes);
    }      
  }
});

这应该让你朝着正确的方向前进。如果你愿意，我可以更多地重构你的代码以便于阅读。

Answer 4

您需要更新代码

data: {like_id = id},

到

data: {like_id : id},

或者您也可以像

那样传递它

data: "like_id ="+id,

<强>图片的标题说明

1）在你的控制器内。您使用$_GET['like_id']的原因您可以使用CI功能

$upload = $this->input->get('like_id');

2）在您的控制器中，您似乎返回了编码$data而不是result

return json_encode($data);

应该是

$result = $this->photoCheese_model->get_like_total($data,$upload);

return json_encode($result);

您可以使用console.log（）作为

检查您的控制台

success: function(res){
        console.log(res);
        if(res){
          jQuery("div#state").html(res.no_likes);
        }      
      }

Answer 5

通过在Chrome中打开Inspect元素来调试代码，然后按＆＃39; like_name＆＃39;按钮，看看是否有新的链接添加到网络选项卡，如果否，那么你的只是没有调用该功能，如果是的话有新的链接点击它并检查响应和标题， BTW仅删除event.preventDefault();仅用于提交按钮

enter image description here

请将图像模拟器上传到包含结果的图像

enter image description here

使用此图片作为如何上传图片的参考

在CodeIgniter中使用Ajax动态更改数据

5 个答案: