Codeigniter AJAX 示例 [英] Codeigniter AJAX Example

问题描述

我已经找了一个星期的时间来寻找有关如何将 AJAX 与 Codeigniter 一起使用的完整工作示例(我是 AJAX 新手).我看到的帖子/tuts 已经过时了——所有的编程语言都在进步.

I've been looking for a week now for a decent full working example of how to use AJAX with Codeigniter (I'm an AJAX novice). The posts / tuts I've seen are old - all the programming languages have moved on.

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

I want to have an input form on a page which returns something to the page (e.g. a variable, database query result or html formatted string) without needing to refresh the page. In this simple example is a page with an input field, which inserts the user input into a database. I'd like to load a different view once the input is submitted. If I could understand how to do this I'd be able to adapt it to do whatever I needed (and hopefully it would help others too!)

我的测试"控制器中有这个:

I have this in my 'test' controller:

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 访问它)

Here is my view, named 'ajax' (so I access this through the 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".许多提前感谢您的帮助，让我摆脱痛苦！

All that happens currently is that I type in an input, updates the database and displays the view "test/default" (it doesn't refresh the page, but doesn't display "test/names_list" as desired. Many thanks in advance for any help, and for putting me out of my misery!

推荐答案

给表单设置唯一id:

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

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

I assume that you want replace a form with a view:

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 的更好方法:

better way if you return url of view in json response:

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

<小时>从你的最后一条评论来看 - 我强烈不建议替换 body，支持这样的代码会很困难.

---

from your last comment - I strongly not suggest to replace body, it will be very hard to support such code.

但这里有一个分析器:

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

这篇关于Codeigniter AJAX 示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！