Codeigniter 刷新区

Posted 2023-02-22

【中文标题】Codeigniter 刷新区

【英文标题】：Codeigniter Refresh Div

【发布时间】：2016-11-27 16:49:59

【问题描述】：

我不明白如何使用 jQuery 刷新 div 中的数据，我知道它的外观，但我不知道如何将它包含在我的代码中。

这是我的控制器：

$data['chats'] = $this->core_model->getLastChats();
$this->loadTemplate('pages', 'index_view', $data);

这是我的看法：

public function getLastChats()

    $this->db->select('*');
    $this->db->limit(150);
    $this->db->order_by('c_date', 'DESC');
    $this->db->join('users', 'users.u_id = chat.c_author');
    $query = $this->db->get('chat');

    return $query->result();

这是我的观点：

<?php foreach($chats as $chat)  ?>
    <div class="media">
        <div class="media-left">
            <img class="media-object" style="width: 32px;" src="<?php echo $chat->u_avatar; ?>">
        </div>
        <div class="media-body">
            <h5 class="media-heading"><strong><?php echo $chat->u_name.' '.$chat->u_surname; ?></strong></h5>
            <?php echo $chat->c_message; ?><br />
        </div>
    </div>
<?php  ?>

【问题讨论】：

PHP 在页面之前加载，如果你想读取数据并显示在页面上，你必须使用 XMLHttpRequest (XHR) 在后台检索所需的数据。

谢谢你的回复，你能给我举个例子吗？

看看这个函数，想想你怎么能使用在你的站点中检索到的数据：api.jquery.com/jquery.get

【参考方案1】：

这是一个老问题，但由于这个基本问题没有答案，我决定回答它。

首先，要使用 jQuery 从 DB 中获取数据，应该在您的视图中调用 Ajax。

因此您可以在视图中添加以下 javascript 代码，包括要显示数据的 div。

或者你可以添加一个额外的js文件。

你的看法：

<script type="text/javascript" src="your_jsfile.js"></script>

还有你的_jsfile.js：

$(function() 
    
    ......
    var controller_function_url = site_url + 'your_controller/your_function'
    $.post(controller_function_url, function(resp)
        resp = JSON.parse(resp);
        var html = "";
        if(resp.status)
             for(I = 0; I < resp.body.chat.length; i++)
                 var item = resp.body.chat[i];
                 HTML += "<div class="media">";
                 html += "<div class="media-left">";
                 HTML += "<img class='media-object' style='width: 32px;' src='" + item['u_avatar'] + "'></div>";
                 HTML += "</div>"
                 ...............
             

             $(your_parent_div).html(html);
        
       
    );
    
    ........
);

您的控制器：（通过 ajax 调用）

   public function your_function()
        $data['chats'] = $this->core_model->getLastChats();
        $resp['status'] = true;
        $resp['body'] = $data;
        echo json_encode($resp);
    

你的初始控制器（显示视图）

   $data['chats'] = array();//empty array
   $this->loadTemplate('pages', 'index_view', $data);

这样您在页面的初始加载时显示一个空列表。

页面加载后，我们通过 ajax 调用从数据库中获取数据列表并显示它而不是空列表。

您可以通过在需要刷新时调用此 ajax 调用来保持列表最新。