dtfo55908
2016-10-17 09:19 阅读 45

如何在codeigniter中使用ajax?

I am trying to make a very simple php chat for my website with CodeIgniter and Ajax. The messages are saved in a html file, not in a database table. Whenever I click the send button, the page refreshes, even though it's not supossed to and I don't know what's wrong. Here is my code: My 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;
    }

}

Part of my view:

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

//The script

<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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    duanji7881 duanji7881 2016-10-17 11:13

    Well actually you really do have a few errors. You are just not looking at them. When you are performing anything JQuery/Javascript related you need to be able to view what is going on.

    Look up how to debug using your browser

    Personally, I like to you use firefox with the plugin called firebug.

    So I have taken your code and simplified it ( I wont comment about the rest of the php) , found the mistakes, fixed them and I've had a little play with it to help demonstrate a couple of things. There are many more to learn...

    But so you don't end up tearing your hair out, this is what I came up with to debug this.

    The Controller

    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. Please compare this against what you had so you can see what mistakes you had made and ask yourself, "why weren't they leaping out of my screen at me?" (I like to be overly dramatic at times).

    There's more I can say, but hopefully this will show you how to at least debug something like this, and remember to go and find out how to use your browsers developers console. It will help in every way.

    Cheers.

    点赞 评论 复制链接分享
  • duangai1916 duangai1916 2016-10-17 09:56
    1. var postData = $(#message).serializeArray(); should be:
      var postData = $("#message").serializeArray();
    2. If issue still not get resolved then try to debug by putting alert() or console.log() before e.preventDefault() and then debug your js code.
      For example alert('dummy text for debug');
    点赞 评论 复制链接分享
  • dqalnwuci494308 dqalnwuci494308 2016-10-17 11:21

    this is working for me, check out

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

    点赞 评论 复制链接分享

相关推荐