Question

我正在为儿童开展测验。我需要帮助来添加ajax和jquery来处理数据而不是获取整页。只需在一页内抓取。问题是将$ quiz更改为加载到JSON然后加载到ajax添加事件处理程序等等。帮助将不胜感激......编程新手......

Answer 1

听起来你更像是在寻找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的主视图

Dashboard.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');
    }

}

仪表板view.php

我们将使用仪表板视图执行两项操作。设置基本页面架构，提供链接以通过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锚标记上附加一个事件监听器。然后它会读取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语句输出，但您可以将其加载到另一个视图文件中进行格式化。这里的底线是，此函数显示的内容将作为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'];

    }

}

我希望这会有所帮助。祝你好运！

Codeigniter + Ajax（jquery）测验

1 个答案:

Dashboard.php

仪表板view.php

loadQuiz.js

ajax.php