我正在为 child 开发一个测验。我需要帮助添加 ajax 和 jquery 来处理数据而不是获取整个页面。只需在一页内获取。问题是更改 $quiz 以加载到 JSON，然后加载到 ajax 添加事件处理程序等等。帮助将不胜感激......编程新手......
最佳答案
听起来您更想了解 AJAX 如何与不同事物交互的基本概述。如果您使用 CodeIgniter，那么您显然熟悉 MVC 编程模型，其中:
controller -> makes my decisions
model -> interacts with my database, etc
view -> displays my information
因此，您不想刷新页面并遵循该路径，而是希望实现 AJAX 将所需的内容加载回 View 中，更像是:
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
您的起点是设置 Controller 、模型和 View 以创建您想要的接入点。
例如，您希望根据用户选择的测验动态加载一组呈现的问题。您将有一个主视图(我们可以将其称为仪表板)。我们将使用一个 Controller 来加载名为 dashboard.php 的主视图。
仪表板.php
Dashboard.php Controller 将默认加载我们的主视图。
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');
}
}
仪表板 View .php
我们将使用仪表板 View 来做两件事。设置基本页面架构，提供通过 AJAX 加载测验问题的链接，并加载将进行 AJAX 调用的 loadQuiz.js
<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 anchor 标签。然后它将读取 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 );
}
});
});
} );
现在我们需要解决加载实际测验内容的问题。因此，我们只需使用第二个 Controller 和简单 View 来创建我们想要返回到 AJAX 调用的数据。
ajax.php
Controller 加载我们的问题并提供一个简单的 View 。这假设您有一个模型可以从数据库或其他方式加载您的问题。最终结果是$data['html']应该是<html>标记。
注意下面的 $data['html']只是通过 echo 获取输出语句，但您可以将其加载到另一个 View 文件中进行格式化。这里的底线是，此函数显示的内容将作为 response 返回。在我们的$.ajax()功能。
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'];
}
}
希望这对您有一点帮助。祝你好运!
关于php - Codeigniter + Ajax(jquery) 测验，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34445246/