我遇到了AJAX的问题,我找不到一个很好的解决方案,每秒只刷新我的div“chatwindow”。我尝试过stackoverflow和谷歌的很多帖子。 有人能帮助我......做到这一点。 到目前为止我的代码
<!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"
答案 0 :(得分:3)
首先,你必须从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>
答案 1 :(得分:0)
你应该将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>
答案 2 :(得分:0)
试试这个
<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>