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

Question

我需要有关从数据库加载更多数据的按钮的帮助。我找到了例子，但太糟糕了。这是我目前所拥有的：

阿贾克斯：

$('#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);
        }
    });
});

我的控制器方法调用模型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：

<div class="lista_estoque">
    <?php foreach ($pesquisas as $p) { ?>
        <div class="item_estoque">
            <div class="avatar">
                <img src="/uploads/carros/destaque/<?php echo $p['imagem_destaque']; ?>"/>
            </div>
            <div class="texto_anuncio">
                <h4><?php echo $p['modelo']; ?></h4>

                <div class="detalhes">
                    <span><?php echo $p['marca'] . ' | ' . $p['combustivel'] . ' | ' . $p['cor']; ?></span>
                    <span><?php echo $p['ano']; ?></span>
                    <span><?php echo number_format($p['kilometragem'], 2) . 'km'; ?></span>
                </div>

                <span class="anunciante"><?php echo $p['nome_anunciante']; ?></span>
            </div>
            <div class="texto_anuncio_right">
                <span class="preco"><?php echo 'R$ ' . $p['preco']; ?></span>
                <a href="/comprar/detalhes/<?php echo $p['id'] ?>" class="bt_vejamais">Veja Mais</a>
            </div>
        </div>
    <?php } ?>
    <div class="carregar_mais">
        <input type="hidden" name="limit" id="limit" value="1"/>
        <input type="hidden" name="offset" id="offset" value="1"/>
        <button class="btn btn_carregar_mais" data-val="0">Mostrar mais resultados</button>
    </div>

到目前为止，发生的情况是将 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对象

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>

Answer 2

在您的视图文件夹中创建一个名为 load_more.php 的视图.. 你的控制器会是这样的

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

<?php foreach ($pesquisas as $p) { ?>
        <div class="item_estoque">
            <div class="avatar">
                <img src="/uploads/carros/destaque/<?php echo $p['imagem_destaque']; ?>"/>
            </div>
            <div class="texto_anuncio">
                <h4><?php echo $p['modelo']; ?></h4>

                <div class="detalhes">
                    <span><?php echo $p['marca'] . ' | ' . $p['combustivel'] . ' | ' . $p['cor']; ?></span>
                    <span><?php echo $p['ano']; ?></span>
                    <span><?php echo number_format($p['kilometragem'], 2) . 'km'; ?></span>
                </div>

                <span class="anunciante"><?php echo $p['nome_anunciante']; ?></span>
            </div>
            <div class="texto_anuncio_right">
                <span class="preco"><?php echo 'R$ ' . $p['preco']; ?></span>
                <a href="/comprar/detalhes/<?php echo $p['id'] ?>" class="bt_vejamais">Veja Mais</a>
            </div>
        </div>
    <?php } ?>

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(
                    '<div class="item_estoque">' +
                        '<div class="avatar">' +
                            '<img src="/uploads/carros/destaque/' + obj.res[i].imagem_destaque + '"/>' +
                        '</div>' +
                        '<div class="texto_anuncio">' +
                            '<h4>' + obj.res[i].modelo + '</h4>' +

                            '<div class="detalhes">' +
                                '<span>' + obj.res[i].marca + ' | ' + obj.res[i].combustivel + ' | ' + obj.res[i].cor + '</span>' +
                                '<span>' + obj.res[i].ano + '</span>' +
                                '<span>' + obj.res[i].kilometragem + ' km</span>' +
                            '</div>' +

                            '<span class="anunciante">' + obj.res[i].nome_anunciante + '</span>' +
                        '</div>' + 
                        '<div class="texto_anuncio_right">' + 
                            '<span class="preco"> R$ ' + obj.res[i].preco + '</span>' +
                            '<a href="/comprar/detalhes/' + obj.res[i].id + '" class="bt_vejamais">Veja Mais</a>' +
                        '</div>' + 
                    '</div>'
                ).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);
    }
}