听起来您更像是在寻找关于 AJAX 如何与不同事物交互的基本概述。如果您在 CodeIgniter 中工作，那么您显然熟悉 MVC 编程模型，其中：
controller -> makes my decisions
model -> interacts with my database, etc
view -> displays my information
因此，您希望实现 AJAX 将您需要的内容加载回视图，而不是刷新页面并遵循该路径，更像是：
controller -> loads model and view
model -> interacts with database, etc
view -> displays my information
AJAX with JavaScript -> Loads a new controller path
secondary model -> loads new information
secondary view -> returns to be displayed on first view
您的出发点是设置您的控制器、模型和视图以创建您想要的访问点。
例如，您希望根据用户选择的测验动态加载一组呈现的问题。您将拥有一个主视图（我们可以称之为仪表板）。我们将使用一个控制器来加载名为dashboard.php的主视图
仪表板.php
Dashboard.php 控制器将默认加载我们的主视图。
class Dashboard extends CI_Controller {
/**
* Dashboard index() function loads by default
* and shows our dashboard view.
*/
public function index() {
$this->load->view('dashboard-view.php');
}
}
dashboard-view.php
我们将使用仪表板视图来做两件事。设置一个基本的页面架构，提供链接以通过 AJAX 加载我们的测验问题，并加载一个 loadQuiz.js，它将进行 AJAX 调用
<html>
<head>
<title>My Quiz</title>
<script type="text/javascript">jquery.min.js</script>
<script type="text/javascript">quizLoader.js</script>
</head>
<body>
<a href="javascript: void(0);" data-quiz="1" class="loader">Load Quiz 1</a>
<a href="javascript: void(0);" data-quiz="2" class="loader">Load Quiz 2</a>
<a href="javascript: void(0);" data-quiz="3" class="loader">Load Quiz 3</a>
<div id="questions">
[we will load our questions here]
</div>
</body>
</html>
loadQuiz.js
我们的 loadQuiz.js 将有一个事件监听器附加到我们的 .loader 锚标记。然后它将读取data-quiz 属性并发送AJAX 请求以加载该测验ID 的问题。处理程序完成后，我们会将数据放入<div id="questions" /> 以显示给用户。
$( document ).ready( function() {
// Event Listener for Anchor Tags with .loader class
$( document ).on('click', '.loader', function() {
var target = $( '#questions' );
var quizID = $( this ).attr( 'data-quiz' );
var datastring = '?quizID=' + quizID;
// Send our AJAX REQUEST
$.ajax({
url: '/path-to-ajax-controller',
type: 'POST',
data: datastring,
async: true,
success: function(response) { // put our response in our target
target.html(response);
},
error: function(e) { // Show an error if we got one
target.html( 'Failed to load: ' + e.responseText );
}
});
});
} );
现在我们需要解决加载实际测验内容的问题。所以我们将只使用第二个控制器和简单视图来创建我们想要返回给 AJAX 调用的数据。
ajax.php
控制器加载我们的问题并传递给一个简单的视图。这假设您有一个模型，可以将您的问题从数据库或其他方式中加载出来。最终结果是 $data['html'] 应该是 <html> 标记。
注意下面的$data['html'] 只是通过echo 语句获取输出，但您可以将其加载到另一个视图文件中进行格式化。这里的底线是，无论这个函数显示什么，都会在我们的$.ajax() 函数中作为response 返回。
class Ajax extends CI_Controller {
/*
* This function should be called by the url we specificed in our
* $.ajax() call in our loadQuiz.js
* you can do this with the CI routes if you need to
*/
function loadQuiz() {
$this->load->model('quiz_model'); // Have a function here for loading your quiz itself
$quiz_id = $_POST['quizID'];
$data['html'] = $this->quiz_model->renderQuestions($quiz_id);
echo $data['html'];
}
}
我希望这会有所帮助。祝你好运！