如何在codeigniter中使用ajax？

Question

我想用CodeIgniter和Ajax爲我的網站做一個非常簡單的php聊天。這些消息保存在一個html文件中，而不是保存在數據庫表中。無論何時點擊發送按鈕，頁面都會刷新，即使它沒有被刪除，我也不知道什麼是錯誤的。 這裏是我的代碼： 我的控制器代碼：

class Chat_con extends CI_Controller{ 

function construct(){ 
    parent::_construct(); 

} 

public function index(){ 
    $this->load->model('login_model'); 

$d['info']=$this->login_model->display_user_data();//this info is sent to view to display the username of the person who is using the chat 
$d['message']=$this->read_conv(); 
$this->load->view('chat_view',$d); 
} 
function write_conv() { 
    $this->load->helper('directory'); 
     $this->load->helper('url'); 
     $this->load->helper('file'); 
     $this->path = "application" . DIRECTORY_SEPARATOR . "files" 
      . DIRECTORY_SEPARATOR; 
     $this->file = $this->path . "log.html"; 
     $m=$this->input->post('usermsg'); 
     $u=$this->session->userdata('username'); 
     write_file($this->file,"<div class='msgln'>(".date("g:i A").")  <b>".$u."</b>: ".stripslashes(htmlspecialchars($m))."<br></div>",'a'); 
     $this->index(); 

    } 

    function read_conv(){ 
     $this->load->helper('directory'); 
     $this->load->helper('url'); 
     $this->load->helper('file'); 
     $this->path = "application" . DIRECTORY_SEPARATOR . "files" 
      . DIRECTORY_SEPARATOR; 
     $this->file = $this->path . "log.html"; 
     $string = read_file($this->file); 
     return $string; 
    } 

} 

我的部分觀點：

<div id="chatbox">//this is the div where the messages are displayed 
<?php echo $message; ?></div> 

//this is the form 
<form name="message" id="message"action="<?php echo base_url();? 
>chat_con/write_conv" method='post'> 
    <input name="usermsg" type="text" id="usermsg" size="63" /> <input 
     name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
</form> 

//腳本

<script type="text/javascript"> 
    $(document).ready(function() { 
    $("#message").submit(function(e) { 
     e.preventDefault(); 
     var postData = $(#message).serializeArray(); 
     var formActionURL = $(this).attr("action"); 
     $.ajax({ 

      url: formActionURL, 
      type: "POST", 
      data: postData, 
     }).done(function(data) { 
      alert("success"); 
     }).fail(function() { 
      alert("error"); 
     }).always(function() { 
      $("#submitmsg").val('submit'); 
     }); 
    }); 
} 
</script> 

Answer 1

那麼其實你確實有一些錯誤。你只是沒有看着它們。當您執行任何與JQuery/Javascript相關的任何事情時，您需要能夠查看正在發生的事情。

查一查如何debug using your browser

就個人而言，我喜歡你使用Firefox插件叫螢火蟲。

所以我已經把你的代碼和簡化它（我不會評論其餘的PHP），發現了錯誤，修復了它們，並且我已經有一些小小的玩法來幫助展示幾件事情。還有更多的學習...

而是讓你最終不會撕裂你的頭髮，這是我想出了調試此。

的控制器

class Chat_con extends CI_Controller { 

    public function __construct() { // This didn't have any __ at all 
     parent::__construct(); // error here only one _ not two __ 
     $this->load->helper('url'); 
    } 

    public function index() { 
     $d['info'] = 'Dummy Info'; 
     $d['message'] = 'What are you going to say?'; 
     $this->load->view('chat_con_view', $d); // 
    } 

    /** 
    * Process the AJAX Call and send back an HTML Response 
    * 
    */ 
    public function write_conv() { 
     echo "I said " .$this->input->post('usermsg'); 
    } 
} 

觀

<div id="chatbox"> 
    <?php echo $message; ?> 
</div> 

<form name="message" id="message" action="<?php echo base_url(); ?>chat_con/write_conv" method="post"> 
    <input name="usermsg" type="text" id="usermsg" size="63"/> 
    <input name="submitmsg" type="submit" id="submitmsg" value="Send"/> 
</form> 

<script src="<?= base_url(); ?>assets/js/jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#message").submit(function (e) { 
      console.log("The Submit button was pressed - that is a good sign."); 
      e.preventDefault(); 
      var postData = $('#message').serializeArray(); 
      var formActionURL = $(this).attr("action"); 
      console.log("postData = " + JSON.stringify(postData)); 
      console.log("formActionURL = " + formActionURL); 
      $.ajax({ 
       url: formActionURL, 
       type: "POST", 
       data: postData, 
      }).done(function (data) { 
       $('#chatbox').html(data); 
       alert("success"); 
      }).fail(function() { 
       alert("error"); 
      }).always(function() { 
       $("#submitmsg").val('submit'); 
      }); 
     }); 
    }); 
</script> 

PS。請把它與你所擁有的相比較，這樣你就可以看到你所犯的錯誤，並問自己：「爲什麼他們沒有跳出我的屏幕？」 （我喜歡有時過於戲劇化）。

還有更多我能說的，但希望這將告訴你如何至少調試這樣的事情，記得去了解如何使用瀏覽器的開發者控制檯。這將有助於各方面。

乾杯。

Answer 2

1. var postData = $(#message).serializeArray();應該是：
   var postData = $("#message").serializeArray();
2. 如果問題還是沒有得到解決，然後嘗試調試通過把alert()或console.log()e.preventDefault()之前，然後調試你的js代碼。
   例如alert('dummy text for debug');

Answer 3

，這是爲我工作，檢查出

$(document).ready(function() { 
    $("#message").submit(function(e) { 
     e.preventDefault(); 
    var postData = $(this).serialize(); 
    var formActionURL = $(this).attr("action"); 
    $.ajax({ 
     url: formActionURL, 
     type: "POST", 
     data: postData, 
    }).done(function(data) { 
     console.log(data); 
    }).fail(function() { 
     alert("error"); 
    }).always(function() { 
     $("#submitmsg").val('submit'); 
    }); 
}); 
}); 

HTML：

<form name="message" id="message"action="demo.php" method='post'> // edit ur form action properly here 
<input name="usermsg" type="text" id="usermsg" size="63" /> 
<input name="submitmsg" type="submit" id="submitmsg" value="Send" />