Question

codeigniter MVC如何与AJAX协同工作？

更具体地说，什么是最基本的AJAX功能，允许用户将数据发送到模型，然后返回到视图？你能解释一下深入涉及的大部分组件吗？

Answer 1

作为PHP / JS / Codeigniter和Web开发的新手，理解AJAX背后的概念以及它与codeigniter的连接是一个比较困惑的事情。

SO和其他教程网站上的大多数答案似乎都来自于经验丰富的人的观点，而这对外行人员来说没什么意义。

因此，我决定做一个非常'基本'的答案，希望能够帮助大多数新手，他们试图了解这段代码的工作原理和原因。请记住，这应该是一个非常基本的解释。随意编辑，但尽量保持简单，没有行话。

我不打算详细介绍定义，因为你可以通过谷歌这样做。我将从第一步开始，即javascript。

在您的页面上，您需要找到实际AJAX的位置。一定要加载JQUERY。有关这方面的更多信息，请使用Google“Jquery”，并尽快加载库。

对于这种情况，我们会将我们的脚本直接添加到HTML中，因为它更容易。或者，您可以加载外部JS脚本，类似于加载样式表的方式。

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<meta property="og:image" content="<?php echo base_url()?>img/logo/logo-big.jpg"/> 
<!--[if lt IE 10]>You are living in the past...Upgrade you Browser!! OMFG (google chrome/fire fox)<![endif]-->
<html lang="en">
    <head>
    <script src="/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript" src="1.8.21/jquery-ui.min.js"></script>
    <link href="<?php echo base_url()?>css/account.css" rel="stylesheet" type="text/css"  
</head>
<body>
<div class="ajaxContainer">
    <form id="ajaxForm" method="get">
        <input type="text" id="ajax_input" name="q" placeholder="Type Here"/>
        <input type="submit" id="ajax_submit" value="" />
    </form>
</div>
</body>

在HTML中，添加以下脚本（在任何地方，但我通常将其添加到顶部）：

<script>
$('.ajaxContainer').delegate('#ajaxForm', 'submit', function() {
    $.ajax({
        var submitdata = $('#ajax_input').val();
        type: "POST",
        url: '/ajax/getdata',
        dataType: 'json', 
        data: { submitdata: submitdata },
        success: function(data){
            $('#ajax').html(data['content']);
        }
    });  
    return false;
});
</script>

至于解释：

1 $('.ajaxContainer').delegate('#ajaxForm', 'submit', function() {

我使用jqueries delegate函数来提取提交点击。很简单。它扫描指定div / class（.ajaxContainer）内的所有id /类。

2 $.ajax({

这就是魔术开始的地方。

3 var submitdata = $('#ajax_input').val();

在这里，您只需“抓取”要在控制器/模型中使用的数据。这不是必要的，但它肯定有助于这种解释。在这里，我们将#ajax_input中的值添加到javascript变量submitdata中以供稍后使用。

4 type: "POST",

希望您熟悉post / get和典型的html表单提交。在此示例中，我们指定POST以提交数据的方式。如果您愿意，可以更改为GET。玩弄它。

注意每个部分是如何用,分隔的。不要过于复杂，只需注意一些事项。实际上，您可以在此代码中添加许多其他内容。查看jquery AJAX文档以获取更多信息并进行游戏。 http://api.jquery.com/jQuery.ajax/

5 url: '/ajax/getdata,

这是您正在呼叫的控制器。我稍后会解释，但是，你想创建一个ajax控制器和一个名为getdata的函数。再一次，你只需将ajax指向一个URL。理论上，您可以通过在地址栏中键入页面来手动访问该页面。将数据传递给该控制器后，您将使用PHP / codeigniter，并且更接近成功执行AJAX调用。

6

dataType: 'json', 
data: { submitdata: submitdata },

使用dataType指定您希望返回的数据类型。

data:将POSTED数据发送到您的控制器，以便在模型中选取并使用。第一个submitdata:是我们之前创建的变量，第二个代表您将在控制器中搜索的名称。

此时，我们将转移到控制器。如果您还记得，我们将AJAX调用定向到url: - /ajax/getdata,

我提到创建一个镜像该URL的控制器/功能。下面是它的样子：

<?php if (!defined('BASEPATH')) exit('No direct script access allowed');

class Ajax extends CI_Controller
{
    function __construct()
    {
        parent::__construct();
        $this->load->model('logic_model');
    }

    public function getdata()
    {
        //First, grab the data being passed via AJAX through post
        $submitteddata = $this->input->post('submitdata');
        //Then send that data to your model to do whatever you want.
        $data['content'] = $this->logic_model->dosomething($submitteddata);
        // you need to echo the data.  json_encode turns an array into a JSON formatted string.  Without this, you will not receive a success, and you lose sir, goodday. 
        echo json_encode($data);
    }
}

我们的模型，又名：logic_model - ＆gt;

公共功能dosomething（submitteddata） { 回归“成功！” }

它会返回Success!而不会反馈到控制器$data['content']，然后会回显。

我们现在返回到javascript，它会检查发生的所有事情并执行success:或failure:函数（有关失败的详细信息，请阅读文档）。

7

success: function(data){
    alert(data['content']);
}

如您所见，该函数包含参数data这表示我们在ajax控制器中回显的JSON。它就像一个数组一样工作。如果成功，它应该提醒返回的字符串'Success！'

这很简单。显然，随着您的任务发生变化，一些步骤也会发生变化，但通常只会扩展上述方案。

希望人们发现这对于那些不熟悉PHP / AJAX的人来说很有帮助，但已经走了很长的路。

在codeigniter中通过AJAX请求数据

1 个答案: