Codeigniter AJAX示例

Question

我一直在寻找一个关于如何使用AJAX和Codeigniter(我是一个AJAX新手)的完整工作示例.我见过的帖子/帖子很旧 - 所有的编程语言都已经开始了.

我想在页面上有一个输入表单,它返回页面的内容(例如变量,数据库查询结果或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".非常感谢提前任何帮助,并让我摆脱痛苦!

Answer 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");

从你最后的评论 - 我强烈建议不要替换正文,这将很难支持这样的代码.

但这是anser:

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