Wie benutzt man Ajax im Codezeichner?

Question

Ich versuche einen sehr einfachen PHP-Chat für meine Website mit CodeIgniter und Ajax zu machen. Die Nachrichten werden in einer HTML-Datei und nicht in einer Datenbanktabelle gespeichert. Immer wenn ich auf den Senden-Button klicke, wird die Seite aktualisiert, obwohl sie nicht angezeigt wird und ich weiß nicht, was falsch ist. ist hier mein Code: Mein Controller-Code:

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

} 

Teil meiner Ansicht:

<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> 

// Das Skript

<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

Nun man eigentlich wirklich ein paar Fehler haben. Du siehst sie einfach nicht an. Wenn Sie irgendetwas mit JQuery/Javascript durchführen, müssen Sie in der Lage sein zu sehen, was vor sich geht.

nachschlagen, wie man debug using your browser

Persönlich mag ich Ihnen firefox mit dem Plugin namens Firebug verwenden.

Also habe ich Ihren Code genommen und vereinfacht (ich werde nicht über den Rest des PHP kommentieren), fand die Fehler, reparierte sie und ich hatte ein wenig damit zu spielen, um ein paar Dinge zu demonstrieren. Es gibt viel mehr zu lernen ...

Aber damit Sie nicht am Ende Ihre Haare reißen, das ist, was ich mit dem Debugging dies kam.

Der Regler

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

The View

<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. Bitte vergleichen Sie dies mit dem, was Sie hatten, damit Sie sehen können, welche Fehler Sie gemacht haben und fragen Sie sich: "Warum springen sie nicht aus meinem Bildschirm auf mich?" (Ich mag manchmal zu dramatisch sein).

Es gibt mehr, was ich sagen kann, aber hoffentlich wird es Ihnen zeigen, wie man zumindest so etwas debuggt, und denken Sie daran, herauszufinden, wie Sie Ihre Browser-Entwicklerkonsole verwenden. Es wird in jeder Hinsicht helfen.

Prost.

Answer 2

1. var postData = $(#message).serializeArray(); sollte sein:
   var postData = $("#message").serializeArray();
2. Wenn das Problem immer noch nicht gelöst wird, versuchen Sie zu debuggen, indem Sie alert() oder console.log() vor e.preventDefault() setzen und dann Ihren js-Code debuggen.
   Zum Beispiel alert('dummy text for debug');

Answer 3

das für mich arbeitet Besuche

$(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" />