【发布时间】：2014-05-07 15:07:37
【问题描述】：
所以我正在关注本教程：
我的目标是加载视图的实际内容并更改浏览器 URL 而无需重新加载页面。但是，因为我使用 CodeIgniter 作为我的应用程序的框架，所以我无法让它正常工作。我有一个控制器，我在其中加载所有仪表板的视图，我希望在名为 content_container 的 div 中显示这些视图。
问题是，每次我单击另一个锚标记以通过 ajax 请求加载不同的视图时，它都会在我的 url 中添加另一个“仪表板”，当然之后它不会显示视图。因此，单击几次后，URL 将如下所示：“dashboard/dashboard/dashboard/profile”。我尝试使用 Javascript 拆分 URL，但这对我没有帮助。
一种解决方案是为每个视图创建一个控制器，但我认为这是一种不好的做法，而且代码更简洁，只有一个控制器来处理所有视图。
这是控制器：
<?php
class Dashboard extends CI_Controller {
public function __construct()
{
parent::__construct();
$this->output->nocache();
$this->load->model('subject_model');
$this->load->model('user_model');
}
public function index()
{
$this->load->view('header');
$this->load->view('dashboard');
$this->load->view('footer');
}
public function users()
{
$data['users'] = $this->user_model->getUsers();
$this->load->view('staff_users', $data);
}
public function lomake()
{
$this->load->view('lomake');
}
public function profile()
{
$data['userinfo'] = $this->user_model->getUserInformationById($this->session->userdata('user_id'));
$this->load->view('myprofile', $data);
}
public function subjects()
{
$this->load->view('subjects');
}
}
?>
这是我的仪表板视图（部分）：
<aside id="left_control_panel">
<ul id="left_control_links">
<li>
<a href="home" id="ajax" class="active">Home</a>
</li>
<li>
<a href="dashboard/subjects" rel="tab">Subjects</a>
<span class="list_total_count"><?=$total_subjects?></span>
</li>
<li>
<a href="dashboard/lomake" id="ajax">Query</a>
</li>
<?php if($this->session->userdata('user_type') == 'admin'):?>
<span class="left_control_heading">User management</span>
<li>
<a href="dashboard/users" rel="tab">Users</a>
<span class="list_total_count"><?=$total_users?></span>
</li>
<li>
<a class="add_user" href="add_user">Add User</a>
</li>
<?php endif;?>
<span class="left_control_heading">Account management</span>
<li>
<a href="dashboard/profile" rel="tab">My Profile</a>
</li>
<li>
<a href="<?=base_url()?>users/logout">Sign Out</a>
</li>
</ul>
</aside> <!-- end of left_control_panel -->
<div id="wrapper_loggedin">
<div class="content_container">
<! -- I will display all the data from different views in here -->
</div>
</div> <!-- end of wrapper_loggedin -->
最后是 JS 部分，也可以在教程中找到：
$(function(){
$("a[rel='tab']").click(function(e){
//e.preventDefault();
pageurl = $(this).attr('href');
$.ajax({url:pageurl+'?rel=tab',success: function(data){
$('.content_container').html(data);
}});
//to change the browser URL to 'pageurl'
if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl);
}
return false;
});
});
/* the below code is to override back button to get the ajax content without reload*/
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('.content_container').html(data);
}});
});
Application/config/routes.php
$route['dashboard'] = 'dashboard/index';
$route['dashboard/(:any)'] = 'dashboard/$1';
【问题讨论】：
-
有人可以帮我解决这个问题吗？
标签： javascript jquery ajax codeigniter url