Ajax div 刷新答案

【问题标题】：Ajax div refreshingAjax div 刷新
【发布时间】：2012-01-31 12:52:19
【问题描述】：

我有一个 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"

【问题讨论】：

标签： ajax html refresh

【解决方案1】：

你应该将 php 代码从 chatwindow div 提取到另一个文件中，然后每秒用 AJAX 和 setInterval 函数调用它。如果你想这样做的话。

这将是聊天.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>

【讨论】：

附注我忘了提到你应该在 head 中包含 jquery 脚本才能让它工作

【解决方案2】：

首先你必须从http://code.jquery.com/jquery-1.7.1.js下载最新的jquery文件

放这个

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

【讨论】：

【解决方案3】：

试试这个

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

【讨论】：