无需刷新页面如何在 codeigniter 中使用 ajax/jquery 替换和显示数据库中的更新值答案

【问题标题】：without refreshing the page how to replace and display the updated values from database using ajax/jquery in codeigniter无需刷新页面如何在 codeigniter 中使用 ajax/jquery 替换和显示数据库中的更新值
【发布时间】：2018-05-03 08:52:52
【问题描述】：

在这里，当通过 ajax 调用 likes() 函数时，该函数会在不刷新页面的情况下正确执行，但在视图中用户的喜欢保持不变。刷新页面时，会显示更新后的点赞值。我希望更新喜欢也应该显示而不刷新页面。

before refresh, but likes() function executed

after refreshing the page

控制器：

public function likes()
    {
        if(!$this->session->userdata('logged_in_user'))
        {   
            $this->session->set_flashdata('like','Please login to like.');
            redirect('login');
        }

        $user_id = $this->input->post('user_id');
        $events_id = $this->input->post('events_id');

        // $permalink = $this->input->post('permalink');
        $data = array(
                'user_id' => $this->input->post('user_id'),
                'events_id' => $this->input->post('events_id'),
                'likes' => 1
        );

        $check_likes = $this->events_model->check_likes($user_id,$events_id);

        if(empty($check_likes))
        {
            $this->events_model->create_likes($data);
            // redirect('events/view/' .$permalink);
        }
        else
        {
            if($check_likes['likes'] == 1)
            {
                    $this->events_model->unlike($events_id,$user_id);
                    // redirect('events/view/' .$permalink);
            }
            else
            {
                    $this->events_model->update_like($events_id,$user_id);
                    // redirect('events/view/' .$permalink);
            }
        }
    }

型号：

public function create_likes($data){
        return $this->db->insert('flix_likes',$data);
    }
public function get_likes($events_id)
    {   
        $this->db->select('flix_profiles.name,flix_likes.*');
        $this->db->from('flix_profiles');
        $this->db->join('flix_likes','flix_likes.user_id = flix_profiles.user_id');
        $this->db->where('flix_likes.events_id',$events_id);
        $query = $this->db->get();
        return $query->result_array();
    }

查看：

<form id="form">
                    <?php 
                    $cnt=0;
                    foreach ($likes as $value)
                    { 
                        $cnt += $value['likes'];
                    } ?>
                    <input type="hidden" id="user_id" name="user_id" value="<?php echo $this->session->userdata('id'); ?>">
                    <input type="hidden" id="events_id" name="events_id" value="<?php echo $events['events_id']; ?>">
                    <input type="hidden" id="permalink" name="permalink" value="<?php echo $events['permalink']; ?>">
                    <button class="fa fa-thumbs-up fa-2x"></button> <b style="font-size:'20';"><?php if(!empty($likes)) { echo $cnt." Likes."; } ?></b>
                </form>

Jquery/ajax：

$(function () {
 $("#form").submit(function(e){
  var user_id = $('#user_id').val();
  var events_id = $('#events_id').val();
  var permalink = $('#permalink').val();

  $.ajax({
          type:'POST',
          url:'<?php echo base_url('events/likes'); ?>',
          data:{'user_id':user_id,'events_id':events_id,},
          success:function(data){
               console.log('success');
          }
      });
  return false;
 });
});

【问题讨论】：

您可以在控制器上的点赞函数中返回当前点赞数，并在 javascript 中对其进行解析，以更新显示点赞按钮的页面部分
如何在javascript中解析？ @Pratansyah
ajax成功完成后echo结果在哪里？
在 ajax 成功后我没有显示任何内容...@AnandPandey
为什么不显示意味着你必须显示点赞数。如果不显示为什么叫ajax，可以提交代替。

标签： php jquery html ajax codeigniter

【解决方案1】：

首先停止表单提交，然后在 ajax 成功后反映值。

$(function () {
 $("#form").submit(function(e){
  e.preventDefault(); //-------------------
  var user_id = $('#user_id').val();
  var events_id = $('#events_id').val();
  var permalink = $('#permalink').val();

  $.ajax({
          type:'POST',
          url:'<?php echo base_url('events/likes'); ?>',
          data:{'user_id':user_id,'events_id':events_id,},
          success:function(data){
              var jsonData = JSON.parse(data);  //--------
                $('#likes').text(jsonData.likes); 
               console.log('success');
          }
      });
  return false;
 });
});

【讨论】：