Question

我正在尝试在CodeIgniter中创建一个联系表单，使用jQuery和ajax在按下提交按钮时加载消息。我已经从net.tutsplus.com完成了教程CodeIgniter from Scratch: Day 8 – AJAX，但我无法让它工作。通过按下提交按钮，应该出现文本“谢谢”，而不是联系表单，这是一个单独的php文件（当我弄清楚如何做时，我将在同一页面上使它只是一个文本行那）。如果我按下提交按钮没有任何反应，但是如果我在$.ajax({})内写了警告，或者如果我在data: form_data之后删除逗号，则视图会更改为“谢谢”视图但是“你输入了吗？你的名字“-check没有执行。我是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');
    }
});

精确的dataType

$.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 !
});

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

1 个答案: