Ajax div刷新

我有一个AJAX的问题，我找不到一个很好的解决方案，每秒只刷新我的div“chatwindow”。我已经尝试了很多来自stackoverflow和谷歌的帖子。有人可以帮助我...做到这一点。到目前为止我的代码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"> 
      <?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"

来源

2012-01-01 JochemQuery

首先你必须下载最新的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>

来源

2012-01-02 05:09:02 MAK

你应该提取的PHP代码形式chatwindow格到另一个文件，并与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>

来源

2012-01-01 22:51:56 kjurkovic

附：我忘了提及你应该在头部包含jquery脚本才能工作 – kjurkovic 2012-01-01 22:53:47

谢谢kjurkovic，我明天去看看吧！ – JochemQuery 2012-01-01 23:28:05

现在把下面的代码试试这个

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

来源

2013-09-13 11:36:17 Ravi

回答

相关问题