保持聊天刷新

I have a problem making my chat refresh constantly.

This is how I built it:

I save all messages in a MySQL database connected with PHP, loading the messages with PHP and post messages with PHP, I have jQuery making the message when clicked on submit send it to the chatbox.

My website with the chat

JSFIDDLE

My problem is that when me and a friend chat, we have to refresh the site everytime someone writes something. I want to make the chatbox refresh constantly. I have tried $('#example').load(document.URL + ' #example'); but it doesn't work, can someone please help me.

[HTML]

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>ChatBox</title>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js" charset="utf-8"></script>
    <script>
        $(document).ready(function(){
            $("#content").load("ajaxload.php");

            $("a.btn").click(function(){
                $.post('ajaxPost.php', $('#userarea').serialize(), function(data){
                        $('#content').append('<p>'+data+'</p>');
                });
                return false;
            });

        });
    </script>
    <script src="chatbox.js" charset="utf-8"></script>
    <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="chatbox.css" title="ChatBox" type="text/css" media="screen" charset="utf-8">
</head>
<body>
    <h1 id="swegre">
        SWEGRE<span>&copy;</span>
    </h1>
    <div id="wrapper">
        <h1>Leave a comment!</h1>
        <div id ="content">
            <p style="background-color: #b7b7b7">Admin: Here's our chatbox</p>
        </div>

        <div id="message">
            <form id="userarea">
            <textarea id="textareamsg" name="messages" rows="2" cols="30" required=""></textarea>
            <a href="#" class="btn">POST</a>
            </form>
        </div>

    </div>
</body>
</html>

[CSS not important] [jQuery]

$(document).ready(function(){
            $( "a.btn" ).click(function() {
                var textValue = $('textarea#textareamsg').val();
                if(textValue == "" || textValue == " " || textValue == "  " || textValue == "   "){
                    alert('You have to write something in the textarea to post a message');
                    return false;
                }else{
            $('#content').append("<p>You: " + textValue + "</p>");
            $('textarea#textareamsg').val('');
            }
            });
        });

[AjaxLoad.php]

<?php
//conection:
$link = mysqli_connect("localhost","root","123","chat") or die("Error " . mysqli_error($link));

//consultation:

$query = "SELECT * FROM messages" or die("Error in the consult.." . mysqli_error($link));

//execute the query.

$result = mysqli_query($link, $query);

//display information:

while($row = mysqli_fetch_array($result)) {
  echo '<p class="other">';
  echo $row ["message"] . '</p>';
}
?> 

[AjaxPost]

<?php
$link = mysqli_connect("localhost","root","123","chat") or die("Error " . mysqli_error($link));

//consultation:

$query = "SELECT * FROM messages" or die("Error in the consult.." . mysqli_error($link));

//execute the query.

$result = mysqli_query($link, $query);

//Code goes here

$message = $_POST['messages'];

mysqli_query($link,"INSERT INTO messages (message)
VALUES ('$message')");
?>
查看全部
weixin_33695450
weixin_33695450
2015/07/13 17:56
  • php
  • html
  • mysql
  • ajax
  • jquery
  • 点赞
  • 收藏
  • 回答
    私信

2个回复