通过AJAX更新CI视图数据


Updating CI view data through AJAX

我很高兴地编码,认为我不会再遇到问题了(至少现在不会),直到我来到应用程序的AJAX部分。

首先介绍一下背景。我的控制器从模型加载数据(一个相当复杂的数组),并将其传递给我的index()函数中的视图。到那之前一切都好。现在,我想通过ajax更新数据。我将显示一系列日期,当用户点击"上一个"或"下一个"按钮时,我希望显示上一个月/下一个月。

在过去,我已经能够用超级混乱和简单的糟糕代码做到这一点。我现在从头开始重写代码,但现在我卡住了。我有一个AJAX调用以下函数:

    public function change_dates()
{
    $month = $this->input->post('month');
    $year = $this->input->post('year');
    $dates = $this->planner_model->create_date_list($month, $year);
    // echo $dates back to ajax? :(
}

我接受post值,将它们发送到我的模型,将数据保存在数组中,然后我卡住了。因为数据数组很复杂,所以在我的视图中有一个foreach循环。如果我只是将它回显到视图的ajax调用,我就不能对它做任何事情。我不能用.html()在视图中获取数据。我需要一种方法来更新整个数组在我的视图与新的值,如果这是有意义的?我试过$this->load->vars()之类的东西,但我是个新手,我甚至不知道这是不是正确的方法,哈哈。

简单可靠的方法:

确保你的页面使用$this->load->view()来加载一个视图片段(创建日历的html)从你的页眉,页脚等分开。

当您对change_dates()进行AJAX调用时,让它做它的事情,然后仅加载该视图文件,通过$this->load->vars()$this->load->view('calendar', $data)传递新数据。如果您只需要在视图是AJAX请求时加载视图,只需检测AJAX调用:

public function change_dates()
{
    $month = $this->input->post('month');
    $year = $this->input->post('year');
    $dates = $this->planner_model->create_date_list($month, $year);
    if ($this->input->is_ajax_request()) // Available as of CI 2.0
    {
        $data['dates'] = $dates;
        $this->load->view('calendar', $data);
        // You may need to load other data here, If so, consider a common function that
        // can be shared with your main view to render the calendar
    }
}

在jQuery中,您将期望html作为返回值。只需获取该值并将其加载到div或使用html()或load() jQuery函数显示日历的任何地方。你基本上只是重新加载整个东西,这确保你得到正确的输出。

$.get(url, function(response) {
    $('#main_content').html(response);
}, 'html');// will usually use auto detection
// Or when you KNOW you're expecting HTML
$('#main_content').load(url);
// Or without the ajax detect (slower, less recommended)
$('#main_content').load(url + ' #main_content');

精确、困难的方法:

使用上面的方法,但是将json_encode()返回到你需要的任何形式的数据,然后确保期望从jQuery返回一个json值。现在您将得到一个数组,您可以任意选择使用该数组来操作文档。


如果你使用的是比2.0更旧的版本-是时候升级了!,但这里是他们用于ajax检测的函数(不多):

public function is_ajax_request()
{
    return ($this->server('HTTP_X_REQUESTED_WITH') === 'XMLHttpRequest');
}