Ajax 使用 jQuery 和 CodeIgniter，ajax 调用不起作用

Question

我正在尝试在 CodeIgniter 中创建一个联系表单，使用 jQuery 和 ajax 在按下提交按钮时加载一条消息。我已经完成了来自 net.tutsplus.com 的教程CodeIgniter from Scratch: Day 8 – AJAX，但我无法让它工作。通过按下提交按钮，应该会出现文本“谢谢”而不是联系表单，这是一个单独的 php 文件（当我弄清楚如何做时，我将把它变成同一页面上的一个文本行那）。如果我按下提交按钮没有任何反应，但如果我在$.ajax({}) 内写了一个警报，或者如果我在data: form_data 之后删除逗号，视图将更改为“谢谢”视图，但“你输入了你的名字” -不进行检查。我是 Ajax 的新手，不知道为什么它不工作，如果有人能告诉我我做错了什么并解释为什么视图更改有效但不是名称检查我是否添加警报，我会很高兴或删除逗号。 （当然，这些操作会在 Chrome 控制台中显示错误消息，因为它不应该是这样的） 我正在使用一个模板来包含页眉、页脚和 main_content。

简而言之：为什么下面的 ajax 调用不起作用？

控制器：

    <?php
    class Contact extends CI_Controller{
        function index(){

        $data['main_content']='contact_form';
        $this->load->view('includes/template', $data);
    }

    function submit(){

        $name = $this->input->post('name');
        $is_ajax=$this->input->post('ajax');
        $data['main_content']='contact_form_thanks';

        if($is_ajax){
            $this->load->view($data['main_content']);
        }else{
            $this->load->view('includes/template', $data);
        }

    }
}

查看：

<div id="contact_form">
    <h2>Contact</h2>
        <?php
            echo form_open('contact/submit');
            echo form_input('name','Name', 'id="name"');
            echo form_input('email', 'Email', 'id="email"');
            $data = array(
                'name' => 'message', 
                'cols' => 30, 
                'rows' => 12
            );
            echo form_textarea($data, 'Message', 'id="message"');
            echo form_submit('submit', 'Send message', 'id="submit"');
            echo form_close();
        ?>
</div><!--end contact-form-->
<!--Dissable the submit function-->
<script type="text/javascript">
$('#submit').click(function(){
    var name = $('#name').val();
    if(!name || name == 'Name'){
        alert('Please enter your name');
        return false;
    }

    var form_data = {
        //csrf_token: $('input[name*="csrf_token"]').val(),
        name: $('#name').val(),
        email: $('#email').val(),
        message: $('#message').val(),
        ajax: '1'
    };
    //array
    $.ajax({
        url: "<?php echo site_url('contact/submit'); ?>",
        type: 'POST',
        data: form_data,
        success: function(msg){
            $('#main_content').html(msg);
        }
        //alert('bye'); //Why does it "work" when I write alert?


    });
    return false;
});
</script>

标题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="sv-se" lang="sv-se">
        <head>
            <title></title>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <link rel="stylesheet" href="<?php echo base_url();?>css/style.css" type="text/css" media="screen" charset="utf-8">
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
        </head>

        <body>

Answer 1

添加错误回调！

$.ajax({
    url: "<?php echo site_url('contact/submit'); ?>",
    type: 'POST',
    data: form_data,
    success: function(msg){
        $('#main_content').html(msg);
    },
    error: function (XHR, status, response) {
        alert('fail');
    }
});

准确的数据类型

$.ajax({
    url: "<?php echo site_url('contact/submit'); ?>",
    type: 'POST',
    dataType: 'text',
    data: form_data
}).done(function (msg, status, XHR) {
    // Manage the server response here !
    $('#main_content').html(msg);
}).fail(function (XHR, status, response) {
    // an error has occured, probably the CSRF protection.
    // console.log(XHR, status, response); to get more informations.
    // the "network" tab of the Google Chrome console should helps you too, as zeliboba suggested !
});