使用jquery处理一个页面中的多个页面请求


Handling multiple page request in one page with jquery

我正在使用Codeigniter,我一直试图在一个页面中加载多个分页。。然而,在搜索了许多不同的论坛和网页后,我决定创建多个方法和视图,并使用jquery将它们加载到一个页面中。我正在使用这段代码,它运行得很好。。我可以在一个页面中加载多个页面,但不能在特定的div标记中处理它们的请求。

例如,城市在我的索引页面中加载了分页,但当我单击Page 2链接时,它将归因于分页生成的链接,而area/get_all_cities/5不在区域/索引内。我希望该请求加载到city-div标记中。我是Jquery的新手,所以不知道该写哪个函数来处理div标记内一个页面中的多个请求。

我的index.php

<script>
$(document).ready(function() {
$('#division').load('<?=site_url('area/get_all_divisions')?>');
$('#city').load('<?=site_url('area/get_all_cities')?>');
});
</script>
<div id="division"></div>
<div id="city"></div>

我的区域控制器

function get_all_divisions($start = 0){
$data['divisions']=$this->mdl_area->get_all_divisions(5,$start);
$this->load->library('pagination');
$config['base_url']=base_url().'area/get_all_divisions';
    $config['total_rows']= $this->mdl_area->get_division_count();
    $config['per_page']= 5;
    $this->pagination->initialize($config);
$this->load->view('area/get_division',$data);
}
function get_all_cities($start = 0){
$data['cities']=$this->mdl_area->get_all_cities(5,$start);
$this->load->library('pagination');
$config['base_url']=base_url().'area/get_all_cities';
    $config['total_rows']= $this->mdl_area->get_city_count();
    $config['per_page']= 5;
    $this->pagination->initialize($config);
$this->load->view('area/get_city',$data);
}

get_city.php

<div class="fwrapper">
    <table class="table">
      <thead>
        <tr>
          <th>Cities</th>
        </tr>
      </thead>
      <tbody>
<?php foreach ($cities as $row) { ?>
        <tr>
          <td><?=$row['name']?></td>
        </tr>
<? } ?>
      </tbody>
    </table>
    <?php echo $this->pagination->create_links();?>
</div>

对于您的特定问题,您所做的一切都很好,但可能会添加一个自定义处理程序服务器端,以便能够将两者结合起来。

$(function() {
    //tiny bit more optimized to call one function when the document is ready instead of 2.
    $('#division').load('<?=site_url('area/get_all_divisions')?>');
    $('#city').load('<?=site_url('area/get_all_cities')?>');
    //assuming the paginate links have the class 'paginate'.
    $('#division').on('click', 'a.paginate', function() {
        $('#division').load($(this).attr('href'));
    return false;
    });
    $('#city').on('click', 'a.paginate', function() {
        $('#city').load($(this).attr('href'));
    return false;
    });
});

我的意思是:

$(function() {
    $.getJSON('<?=site_url('api.php')?>?get=all_divisions,all_cities', function(data) {
        $('#division').html(data.division);
        $('#city').html(data.all_cities);
    });
});

在服务器端:

<?php
///code to handle both requests and getting the result
header('content-type: application/json');
echo json_encode(array('cities' => get_all_cities(), 'division' => get_all_divisions()));