1

codeigniter MVC 如何与 AJAX 一起工作？

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

4

1 回答 1

3

作为 PHP/JS/Codeigniter 和一般 Web 开发的新手，了解 AJAX 背后的概念以及它如何与 codeigniter 连接是让我头疼的事情之一。

SO和其他教程网站上的大多数答案似乎都来自经验丰富的人的观点，外行人没有多大意义。

因此，我决定做一个非常“基本”的答案，希望能帮助大多数试图理解这段代码如何以及为什么工作的新手。请记住，这应该是一个非常基本的解释。随意编辑，但尽量保持简单且没有行话。

我不打算深入了解有关定义的详细信息，因为您可以通过 google 做到这一点。我将从第一步开始，即 javascript。

在您的页面上，您需要为实际的 AJAX 找到一个位置。确保已加载 JQUERY。有关这方面的更多信息，请谷歌“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() {

我使用 jqueriesdelegate函数来获取提交点击。很简单。它扫描指定 div/class ( .ajaxContainer) 中的所有 ids/classes。

2$.ajax({

这就是魔术开始的地方。

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

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

4type: "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->

public function dosomething(submitteddata) { return "Success!" }

它返回Success!没有将反馈到控制器，$data['content']然后将被回显。

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

7

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

可以看到，函数中包含参数，data这个代表我们在ajax控制器中回显的JSON。它就像一个数组一样工作。如果成功，它应该提醒返回的字符串“成功！”

它就这么简单。显然，随着您的任务发生变化，一些步骤也会发生变化，但它通常只会扩展上述场景。

希望人们发现这对那些还不是很擅长 PHP/AJAX 但已经走了很长一段路的人有所帮助。

于 2013-03-25T18:23:48.400 回答