使用Codeigniter和Ajax从数据库加载更多数据

我需要一个按钮来帮助从数据库加载更多数据。 我找到了例子，但是太糟糕了。 这是我到目前为止：

Ajax：

$('#revendas_conteudo .btn_carregar_mais').on('click', function(e) { $.ajax({ url: '/auto/carros/load_more', data: { offset: $('#offset').val(), limit: $('#limit').val() }, success: function(data) { $('#revendas_conteudo .lista_estoque').append(data); } }); }); 

我的Controller方法调用Model load_more ：

 public function load_more() { $offset = $this->input->get('offset'); $limit = $this->input->get('limit'); $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); $data['offset'] = $offset + 1; $data['limit'] = $limit + 1; echo json_encode($data); } 

Pesquisas_model::load_more() ：

 public function load_more($offset, $limit) { $this->db ->select( 'usuario.nome_razao_social AS nome_anunciante,' . 'modelo.modelo AS modelo,' . 'marca.marca AS marca,' . 'ano_modelo.ano AS ano,' . 'ano_modelo.valor AS valor,' . 'ano_modelo.combustivel AS combustivel,' . 'cambio.descricao_cambio AS descricao_cambio,' . 'estado.uf AS uf,' . 'cidade.nome_cidade AS nome_cidade,' . 'carro.*' ) ->join('usuario', 'usuario.id = carro.id_usuario') ->join('ano_modelo', 'ano_modelo.id = carro.id_ano_modelo') ->join('modelo', 'modelo.id = ano_modelo.id_modelo') ->join('marca', 'marca.id_marca = modelo.id_marca') ->join('cambio', 'cambio.id = carro.id_cambio') ->join('estado', 'estado.id = carro.id_estado') ->join('cidade', 'cidade.id = carro.id_cidade') ->order_by('marca.marca', 'ASC') ->limit($offset, $limit); $query = $this->db->get($this->table); if ($query) { $data = array(); foreach ($query->result_array() as $row) { $data[] = $row; } $query->free_result(); return $data; } } 

HTML：

 
  
 
 <img src="https://stackoverflow.com/uploads/carros/destaque/"/> 
 
 
 
    
  
 
  <a href="https://stackoverflow.com/comprar/detalhes/" class="bt_vejamais">Veja Mais 
 
  
   Mostrar mais resultados  

到目前为止，发生的是将JSON代码附加到div的末尾。 如何将此数据转换为HTML及其类？

Answer 1

将json文本转换为java

 var text = '{ "employees" : [' + '{ "firstName":"John" , "lastName":"Doe" },' + '{ "firstName":"Anna" , "lastName":"Smith" },' + '{ "firstName":"Peter" , "lastName":"Jones" } ]}'; var obj = JSON.parse(text); 

使用js对象

Answer 2

在视图文件夹中创建一个名为load_more.php的视图..您的Controller将是这样的

 public function load_more() { $offset = $this->input->get('offset'); $limit = $this->input->get('limit'); $data['pesquisas '] = $this->Pesquisas_model->load_more($offset, $limit); $data['offset'] = $offset + 1; $data['limit'] = $limit + 1; data['load_more']=$this->load->view('load_more',$data); } 

并在您的视图中load_more.php

  
 
  
 
 
 
    
  
 
  Veja Mais 
 
  

jQuery的

  success: function(data) { var res= JSON.parse(data); $('#revendas_conteudo .lista_estoque').append(data.load_more); $('.carregar_mais input[name=limit]').val(data.limit); $('.carregar_mais input[name=offset]').val(data.offset); }); 

Answer 3

在控制器的以下函数中，您需要添加一个视图，在该视图中使用您定义的html标记和类正确回显内容。 目前，您正在回显json_encode格式。 这就是它按原样打印的原因。

  public function load_more() { $offset = $this->input->get('offset'); $limit = $this->input->get('limit'); $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); $data['offset'] = $offset + 1; $data['limit'] = $limit + 1; //echo json_encode($data); $this->load->view('load-more',$data['res']); } 

Answer 4

这里的大多数答案都让我得到了解决方案。 可悲的是，我无法将所有这些标记为正确的答案，所以请允许我发布我所做的事情：

首先，这是完整的Ajax。 我无法按照建议使用外部文件，所以它是这样的：

 $('#revendas_conteudo .btn_carregar_mais').on('click', function(e) { $.ajax({ url: '/auto/carros/load_more', data: { 'offset': $('#offset').val(), 'limit': $('#limit').val() }, success: function(data) { var obj = JSON.parse(data); var i = 0; var max = obj.total === obj.offset; $('#limit').val(obj.limit); $('#offset').val(obj.offset); $.each(obj, function(k, v) { $('#revendas_conteudo .load_more').append( '
' + '
' + '' + '
' + '
' + '
' + obj.res[i].modelo + '
' + '
' + '' + obj.res[i].marca + ' | ' + obj.res[i].combustivel + ' | ' + obj.res[i].cor + '' + '' + obj.res[i].ano + '' + '' + obj.res[i].kilometragem + ' km' + '
' + '' + obj.res[i].nome_anunciante + '' + '
' + '
' + ' R$ ' + obj.res[i].preco + '' + 'Veja Mais' + '
' + '
' ).show('slow'); i++; if (max) { $('#revendas_conteudo .btn_carregar_mais').css({backgroundColor: '#999'}).html('Sem mais resultados').attr('disabled', true); } }); } }); }); 

在这里，我将每个新结果附加到div.load_more ，如果total与当前offset相同，则表示它已经显示了所有值，使button不可用于单击。

这里，控制器方法：

 public function load_more() { $offset = $this->input->get('offset'); $limit = $this->input->get('limit'); $data['res'] = $this->Pesquisas_model->load_more($offset, $limit); $data['total'] = $this->Pesquisas_model->count_all(); if ($data['res']) { $data['offset'] = $offset + 2; $data['limit'] = $limit; echo json_encode($data); } }