使用Ajax Codeigniter更新表或div数据

时间:2018-04-13 07:04:23

标签: php jquery ajax codeigniter datatable

我正在尝试创建一个页面,其中显示客户端进行的当前聊天。 现在我使用Openfire作为服务器,使用PHP Ajax进行脚本编写。

Openfire将数据转储到MySQL Table中。 我使用Codeigniter-PHP检索所有记录:

 public function get_chats()
    {
        $this->db->select('*');
        $this->db->from('ofMessageArchive');
        $query = $this->db->get();
        $result = $query->result();


        $this->data['messages'] = $result;


        $this->data['subview'] = 'dashboard/test';
        $this->load->view('_layout_main', $this->data);
    }

现在我认为我有桌子:

<table class="table table-striped table-bordered table-hover" >
         <thead>
             <th>From</th>
             <th>To</th>
             <th>Message</th>
             <th>Time</th>
         </thead>

         <tbody>
            <?php if(count($messages)): foreach($messages as $key => $message): ?> 
            <tr> 
                <td><?php  $users =  explode("__", $message->fromJID); echo $users[0];?></td>
                <td><?php $tousers =  explode("__", $message->toJID); echo $tousers[0];  ?></td>
                <td><i class="material-icons">play_circle_filled</i>Message</td>
                <td><?php echo $date->format('d-m-y H:i:s'); ?></td>
            </tr>
            <?php endforeach; ?>

            <?php endif; ?>
    </tbody>
    </table>           

现在我不想重新加载整个页面而只是每隔5秒刷新一次表格内容。

我正在使用 DataTables

我还以为我可以将json传递给我,但我不知道如何每隔5秒更新一次。

public function get_chats()
    {
        $this->db->select('*');
        $this->db->from('ofMessageArchive');
        $query = $this->db->get();
        $result = $query->result();


        if (count($result)) {
            $response =  json_encode($result);
        }
        else
        {
            $response = false;
        }

        echo $response;
    }

此外,这将发送新旧消息。 所以我只想将新闻消息附加到表旧消息中,不应该重复

1 个答案:

答案 0 :(得分:1)

你的后端功能:

 public function get_chats()
    {
        $this->db->select('*');
        $this->db->from('ofMessageArchive');
        $query = $this->db->get();
        $result = $query->result();


        if (count($result)>0) {
            $response['status']= true;
            $response['messages']= $result;
            $response['date']= date("d-m-y H:i:s", strtotime($your-date-here));
        }
        else
        {
            $response['status']=false;
        }

        echo json_encode($response);
    }

你必须像这样制作javascript函数:

<script>

function myAJAXfunction(){
 $.ajax({
     url:'your url here',
     type:'GET',
     dataType:'json',
     success:function(response){
         console.log(response);

         var trHTML='';
         if(response.status){
           for(var i=0;i<response.messages.length;i++){

              users =response.messages[i]fromJID.slice('--');
              touser=response.messages[i]toJID.slice('--');

              trHTML=trHTML+
              '<tr>'+
               '<td>'+users[0]+'</td>'+
               '<td>'+touser[0]+'</td>'+
               '<td><i class="material-icons">play_circle_filled</i>Message</td>'+
               '<td>'+response.date+'</td>'+
               </tr>';
         }

           $('tbody').empty();
           $('tbody').append(trHTML);

         }else{
           trHTML='<tr><td colspan="4">NO DATA AVAILABLE</td></tr>';
           $('tbody').empty();
           $('tbody').append(trHTML);
         }

     },
     error:function(err){
        alert("ERROR LOADING DATA");
     }
 });
}


// calling above ajax function  at every 5 seconds

setInterval(myAJAXfunction,5000);

</script>