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調用不起作用

回答

相關問題