Ajax div освежающий - PullRequest
Новая
       0

Ajax div освежающий

0 голосов
/ 02 января 2012

У меня проблема с AJAX, я не могу найти хорошее решение, чтобы обновлять только мое "окно чата" div каждую секунду. Я перепробовал много постов из stackoverflow и из Google. Может ли кто-нибудь помочь мне ... сделать это. Пока мой код 

<!DOCTYPE HTML>
<?php
    include 'config.php';
?>
<html>
<head>
    <title>JavaScript Chat</title>
    <link href="style.css" rel="stylesheet" type="text/css"/>


</script>
</head>
<body>
    <div class="container">
        <div id="chatwindow">
            <?php
                $result = mysql_query("select * from Message");
                while($row = mysql_fetch_array($result))
                {
                    echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
                }
            ?>  
        </div>

        <div class="inputMessage">
            <form method="post">
                <hr></hr>
                <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                <input type="submit" value="verstuur" name="submit"/>
                <input type="text" value="" name="username" />
            </form>
        <?php
            if(isset($_POST['submit'])) 
            {
                if (!empty($_POST['username']))
                {
                    if(!empty($_POST['message']))
                    {
                        $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                        $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                        $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                        mysql_query($query);
                    }
                    else
                    {
                         echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
                    }
                }
                else
                {
                    echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
                }
            }
            ?>      
        </div>
    </div>
</body>
</html>


  [1]: http://chaotix.nl/chat/ "chat"

Ответы [ 3 ]

3 голосов
/ 02 января 2012

сначала вы должны загрузить последний файл jquery из http://code.jquery.com/jquery-1.7.1.js

, поставить это 

<script type="text/javascript" src="jquery-1.7.1.js"></script>

в разделе заголовка

, теперь поставить код под <script type="text/javascript" src="jquery-1.7.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){

window.setInterval(function(){

 $.ajax({
   url: 'chat.php',
   type: "POST",
   data: "",
   cache: true,
   success: function(response){
       $("#chatwindow").html(response);           
   }

}, 1000);


});
</script>
0 голосов
/ 13 сентября 2013

Попробуйте это 

<html>  
<head>  
    <script langauge="javascript">  
        var counter = 0;  
        window.setInterval("refreshDiv()", 5000);  
        function refreshDiv(){  
            counter = counter + 1;  
            document.getElementById("test").innerHTML = "Testing " + counter;  
        }  
    </script>  
</head>  
<body>  
    <div id="test">  
        Testing  
    </div>  
    <div id="staticBlock">  
        This is a static block  
    </div>  
</body>

0 голосов
/ 02 января 2012

Вы должны извлечь php-код формы chatwindow div в другой файл и вызывать его с помощью функций AJAX и setInterval каждую секунду ... если вы хотите сделать это таким образом.

Это будет chat.php 

<?php
            $result = mysql_query("select * from Message");
            while($row = mysql_fetch_array($result))
            {
                echo '<p>' . $row['username'] . " : " . $row['message'] . '</p>';
            }
        ?>

Тогда у вас будет ваш основной файл, из которого вы бы назвали ajax и обновите div: 

        <!DOCTYPE HTML>
    <?php
        include 'config.php';
    ?>
    <html>
    <head>
        <title>JavaScript Chat</title>
        <link href="style.css" rel="stylesheet" type="text/css"/>


    </script>
    </head>
    <body>
        <div class="container">
            <div id="chatwindow">

            </div>

            <div class="inputMessage">
                <form method="post">
                    <hr></hr>
                    <textarea name="message" rows="1" cols="55"></textarea><br/>Fill username here<br/>
                    <input type="submit" value="verstuur" name="submit"/>
                    <input type="text" value="" name="username" />
                </form>
            <?php
                if(isset($_POST['submit'])) 
                {
                    if (!empty($_POST['username']))
                    {
                        if(!empty($_POST['message']))
                        {
                            $message =  mysql_real_escape_string(htmlentities($_POST['message']));
                            $username =  mysql_real_escape_string(htmlentities($_POST['username']));
                            $query = "INSERT INTO Message (`username`,`message`) VALUES ('".$username."','".$message."')";
                            mysql_query($query);
                        }
                        else
                        {
                             echo '<script type="text/javascript">alert(\'Je kan niet niks sturen\')</script>'; 
                        }
                    }
                    else
                    {
                        echo '<script type="text/javascript">alert(\'Vul een gebruikresnaam in!\')</script>';
                    }
                }
                ?>      
            </div>
<script type="text/javascript">
  $(document).ready(function(){
    setInterval ( "get()", 1000 );
  });
  function get(){
     $.ajax({
       type: 'GET',
       url: 'chat.php',
       success: function(data){
         $("#chatwindow").html(data);
       }
     });
  }
</script>
        </div>
    </body>
    </html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...