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

我想在CodeIgniter中做一个联系表单，使用jQuery和Ajax在提交按钮被按下时加载消息。我已经从net.tutsplus.com完成了教程CodeIgniter from Scratch: Day 8 – AJAX，但我无法正常工作。通过按提交按钮，文本“谢谢你”应该出现，而不是联系人表单，这是一个单独的PHP文件（当我想出如何做时，我将使它只是一个文本行在同一页上那）。如果我按提交按钮什么都没有发生，但是如果我在$.ajax({})内写入了一个警报，或者如果我在data: form_data之后删除了逗号，则视图将更改为“谢谢”视图，但“您键入了您的名称” - 未执行检查。我是新来的Ajax，不知道为什么它不工作，如果有人能告诉我我做错了什么，并解释视图更改为什么会起作用，而不是名称检查，我是否会添加警报或删除逗号。（当然这些操作会在Chrome控制台中给出错误消息，因为它不应该是这样）我正在使用模板来包含页眉，页脚和main_content。Ajax使用jQuery和CodeIgniter，Ajax调用不起作用

总之：为什么下面的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>

来源

2013-05-05 Jonie

那么你的嗅探说？我的意思是Chrome中的开发人员面板，“网络”选项卡，其中记录了所有服务器请求。在这里，我们可以看到您真正的ajax请求和原始服务器响应。 – zeliboba 2013-05-05 16:33:18

OT直接回答你的问题，但这将是值得一读的，我认为：http://codebyjeff.com/blog/2013/04/how-do-i-use-ajax-with-frameworkx – jmadsen 2013-05-06 03:15:52

谢谢！该链接很有帮助。有这么多的学习！ – Jonie 2013-05-08 18:48:42

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

来源

2013-05-05 16:30:53

您在混合'$ .ajax'参数和jXHR链接。这些是不同的事情。 'jXHR.success（）'被弃用，'$ .ajax（{success：...}） - 不是。 – zeliboba 2013-05-06 18:31:40

Ahmmm也许是啊，没有看到那样的文档！谢谢！但无论如何，一个错误回调应该始终在任何ajax请求中捕获。 – 2013-05-06 18:56:13

随时解决不适当的时态。 – zeliboba 2013-05-06 19:06:45

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

回答

相关问题