仅通过刷新整个页面显示新的数据库元素

时间:2014-06-01 14:47:46

标签: javascript php jquery html mysql

我已经为我的主页设置了一个shoutbox / chat,但每次我提交一条消息时,都会存储在mysql数据库中,我必须刷新页面才能在div框中看到提交的消息。

div的代码:

<form method="post" action="startseite.php">
<div id="message">
<input type="text" name="spind" value="" size="55" maxlength="90">
<button>Senden</button>
</div></form>

我的div-container的Javascript代码:

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

    $("#content").scrollTop($("#content")[0].scrollHeight);     
    $("button").click(function(){
        var message = $("input").val();
        var old = $("#content").html();

        $("#content").scrollTop($("#content")[0].scrollHeight);

    }); 
});

mysql数据库代码:

<?php
$verbindung = mysql_connect("localhost", "hallo", "123")
or die("Fehler im System");

mysql_select_db("hallo")
or die("Verbindung zur Datenbank war nicht erfolgreich");


$user = $_SESSION['username'];
$message = $_POST['spind'];

$eintrag = "INSERT INTO chat
(user, message)

VALUES
('$user', '$message')";

mysql_query($eintrag);

mysql_close($verbindung);
?>

当我想在提交时自动在div上显示新消息时,我该怎么做?

2 个答案:

答案 0 :(得分:0)

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

    $("#content").scrollTop($("#content")[0].scrollHeight);     
    $("button").click(function(){
        var message = $("input").val();
        var old = $("#content").html();

        $("#content").append(message);

        $("#content").scrollTop($("#content")[0].scrollHeight);

    }); 
});

您也可以在一些HTML代码中包装消息,然后尝试附加消息。

答案 1 :(得分:0)

假设所有内容都在一个文件中,这是发布消息后更新div框的一种方法。

startseite.php

<?php

$spind = '';

$verbindung = mysql_connect("localhost", "hallo", "123")
or die("Fehler im System");

mysql_select_db("hallo")
or die("Verbindung zur Datenbank war nicht erfolgreich");

if ( isset($_POST['spind']) ) {
  $spind = $_POST['spind'];

  $user = $_SESSION['username'];
  $message = $spind;

  $eintrag = "INSERT INTO chat
  (user, message)

  VALUES
  ('$user', '$message')";

  mysql_query($eintrag);

  mysql_close($verbindung);

}

?>

<div id="content">
<?php

$eintrag = "SELECT * FROM chat";
$mysql_content = mysql_query($eintrag);
while($into = mysql_fetch_array($mysql_content)) {
  echo '<p><span style="font-variant:small-caps"><span style="font-size:1.5em"><b><span style="text-transform:capitalize">'.$into['user'].'</span> denkt: </b></span><span style="font-size:1.6em">'.$into['message'].'</span></span></p>';
} 

?>
</div>

<form method="post" action="startseite.php">
<div id="message"><?=$spind?>
<input type="text" name="spind" value="" size="55" maxlength="90">
<button>Senden</button>
</div></form>

(当然这里还有很多遗漏,比如数据库安全,session_start,会话检查等等,仅供娱乐之用,不供公众使用。:)不知道其他要求,我认为XHR会更优雅做法。 )

而且我不知道为什么要将一个事件附加到表单按钮并捕获&#34; spind&#34;的值。和&#34;内容&#34;。