Codeigniter AJAX 示例

Posted 2023-02-24

【中文标题】Codeigniter AJAX 示例

【英文标题】：Codeigniter AJAX Example

【发布时间】：2012-12-02 22:49:52

【问题描述】：

我一直在寻找一个完整的工作示例，了解如何将 AJAX 与 Codeigniter 结合使用（我是 AJAX 新手）。我看到的帖子/tuts 都很老了——所有的编程语言都在发展。

我想在页面上有一个输入表单，它可以向页面返回一些内容（例如变量、数据库查询结果或 html 格式的字符串），而无需刷新页面。在这个简单的示例中，是一个带有输入字段的页面，它将用户输入插入到数据库中。提交输入后，我想加载不同的视图。如果我能理解如何做到这一点，我就可以对其进行调整以做我需要的任何事情（希望它也能帮助其他人！）

我的“测试”控制器中有这个：

function add()
    $name = $this->input->post('name');
    if( $name ) 
        $this->test_model->put( $name );
    


function ajax() 
    $this->view_data["page_title"] = "Ajax Test";
    $this->view_data["page_heading"] = "Ajax Test";

    $data['names'] = $this->test_model->get(); //gets a list of names
    if ( $this->input->is_ajax_request() )  
        $this->load->view('test/names_list', $data);
     else 
        $this->load->view('test/default', $data);
    

这是我的视图，名为“ajax”（所以我通过 URL www.mysite.com/test/ajax 访问它）

<script type="text/javascript">
    jQuery( document ).ready( function() 
       jQuery('#submit').click( function( e ) 
           e.preventDefault();
           var msg = jQuery('#name').val();
           jQuery.post("
               <?php echo base_url(); ?>
               test/add", name: msg, function( r ) 
                   console.log(r);
               );
           );
       );
</script>

<?php echo form_open("test/add"); ?>
<input type="text" name="name" id="name">
<input type="submit" value="submit" name="submit" id="submit">
<?php echo form_close(); ?>

目前发生的所有事情都是我输入一个输入，更新数据库并显示视图“test/default”（它不会刷新页面，但不会根据需要显示“test/names_list”。很多提前感谢您的帮助，让我摆脱痛苦！

【问题讨论】：

真的你的控制器只设置数组值。你在哪里加载你的视图？ （我只将 jQuery 用于 ajax，这会将您的 js 代码减少到现在的 1/10）

这次，我推荐jquery。或者，在浏览器中打开 js 控制台，查看错误。

视图会自动加载到我的控制器中，因为我在主控制器中有此功能： // 设置默认内容视图 if ( $this->content_view !== FALSE && empty( $this->content_view) ) $this->content_view = $this->router->class . '/' 。 $this->路由器->方法； // 渲染内容视图 $yield = file_exists(APPPATH . 'views/' . $this->content_view . EXT) ? $this->load->view($this->content_view, $this->view_data, TRUE) : FALSE;

请你建议适当的 jQuery 代码来实现我在这个例子中想要做的事情？我在其他网站上尝试过的 jQuery 示例有缺陷，但我自己写得不够好

看jquery这个问题的答案：***.com/questions/12352404/…

【参考方案1】：

为表单设置唯一ID：

echo form_open('test/add', array('id'=>'testajax'));

我假设您想用视图替换表单：

jQuery(document).ready(function()
var $=jQuery;
$('#testajax').submit(function(e)
    var $this=$(this);
    var msg = $this.find('#name').val();
    $.post($this.attr('action'), name: msg, function(data) 
      $this.replace($(data));
    );
    return false;
);

如果你在 json 响应中返回视图的 url，更好的方法：

$.post("<?php echo base_url(); ?>test/add", name: msg, function(data) 
  $this.load(data.url);
,"json");

---

从您的上一条评论来看 - 我

强烈

不建议替换正文，支持此类代码将非常困难。

但这里是分析器：

$.post("<?php echo base_url(); ?>test/add", name: msg, function(data) 
      $('body').replace(data);
    );

【讨论】：

感谢您的帮助和讨论！

而不是var $=jQuery;，您可以打开将$ 作为参数传递的就绪语句，例如jQuery(document).ready(function($) :)

试试这个教程w3code.in/2015/10/…