Question

我正在尝试用CodeIgniter开发的网站替换经典的分页系统，并使用AJAX进行动态分页，但我不确定正确的方法，我对AJAX很新。

当前系统

我的页面如下：

site.com/client/*

带*用于查询的偏移量。
在我的客户端控制器中，index（）从数据库中获取10个客户端（如果参数存在，则它开始从中获取），然后加载视图以显示数据。它看起来像这样：

site.com/client/
site.com/client/10
site.com/client/20 
and so on

我想从这个解决方案转向基于ajax的解决方案，以便通过点击按钮加载10个下一个客户端。

假设我们有

一个Ajax事件处理程序，在按下按钮时调用。它会通过检查DOM发送当前的“偏移量”。
一个从数据库中获取数据的php文件，比如index（）方法。
HTML模板以正确显示客户的数据。

考虑到使用MVC模式，我应该如何组织这些文件？例子将受到高度赞赏。

Answer 1

计划是在视图中设置“#trigger”按钮和“#content”div。然后，当您单击“#trigger”时，将执行jQuery处理程序并执行AJAX请求，并将结果放在“#container”中。一种方法，非常简单，就是使按钮存储一个值，每次点击都会增加10。数据库中的表必须有一个字段，用于识别页面中的显示顺序，我将此字段命名为“id”。

你可以从一个名为client.php的控制器开始：

function __construct() {
    parent::__construct();
}

function index() {

    $data['title'] = 'Client';  

    $this->load->view('templates/header', $data);

    //I try to keep scripts and views in different files,
    //but you can have just one view file with both codes.
    $this->load->view('client/client_script');
    $this->load->view('client/client_view', $data);

    $this->load->view('templates/footer', $data);
}

//this function will be called via ajax, when you click the button #trigger
function get() {
    if ( ! $this->input->is_ajax_request()) show_error('No direct access allowed');

    $start = $this->input->post('start');
    $this->load->model('client_model');

    $clients = $this->client_model->get($start);

    print_r($clients);
}

}

然后，您需要视图正文（'client / client_view.php'），其中包含您的'#trigger'按钮和'#content'div，简单如下：

<button id='trigger' value='1'>Click me for loading the next 10 objects</button>
<div id='content'>
</div>

当然，您需要jQuery处理程序（'client / client_script.php'）：

<script type='text/javascript'>
    var data = {
        //I have enabled the csrf protection in my CodeIgniter,
        //so I need this var in every AJAX request
        csrf_test_name: '<?php echo $this->security->get_csrf_hash(); ?>'
    };

    $(document).on('click', '#trigger', function() {

        data['start'] = parseInt($(this).val());

        var posting = $.post('client/get', data);
        //success function
        posting.done( function(data) {
            $('#content').html(data);
        });
        $(this).val(data['start']+10);
    });
</script>

最后，模型（'client_model.php'）：

class Client_model extends CI_Model {

    function __construct() {
        parent::__construct();
    }

    function get($start) {
        $sql = "SELECT c.name
                FROM clients c
                WHERE c.id BETWEEN ? AND ?
                ORDER BY c.id";
        $query = $this->db->query($sql, array($start, $start+9));
        return $query->result_array();
    }
}

希望有所帮助

CodeIgniter中的Ajax分页：要遵循的最佳模式？

当前系统

假设我们有

1 个答案: