在Javascript / jQuery中使用HTML標簽

Question

我有一些可以正常工作的代碼，但是我想向其中添加兩件事，我不知道該怎么做。

這是一種簡單的表單，可將數據發送到我的數據庫（jQuery / AJAX），然后在網頁上顯示數據。

問題一：
當我刷新頁面時，所有消息都顯示在單獨的行中（這是我想要的），但是當我添加新消息並單擊“提交”按鈕時，所有新消息都顯示在同一行中。 有什么辦法可以放一個
還是強制注釋顯示在新行上？

問題2：當我刷新index.php時，僅顯示10條消息，這很好，因為我在查詢中使用了“ LIMIT 0，10”。 當我鍵入一條新消息並單擊按鈕提交到數據庫時，消息列表本身就是“更新中”，但是將新消息添加到列表中，而不是用新消息替換第十條消息。

index.php

<html>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<head>
<title>Untitled Document</title>

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

    <script type="text/javascript">

        function sendMessage()
        {
            $.ajax({
                url: "ajax.php",
                type: "POST",
                data: {comment : document.getElementById('message').value},
                dataType:"html",
                success: function(data, textStatus, xhr) {
                    $("#output").append(document.getElementById('message').value);
                    document.getElementById('message').value = "";  
                }
            }); 
        }
    </script>

</head>

<body>

<form name="addComment">
    <input type="text" name="message" id="message" />
    <input type="button" name="submitBtn" id="submitBtn" value="Envoyer" onclick="sendMessage();" />
</form>

<div id="output">
</div>

<?php
include("class.php");

$object1 = new Shootbox();

try {
    $object1->showMessage();
}
catch(Exception $e) {
    echo "Exception : ".$e->getMessage();
}


?>

</body>
</html>

ajax.php

<?php

mysql_connect("localhost", "root", "root");
mysql_select_db("PFtest");

$message = $_POST['comment'];

if (strlen($message) > 0)
{
mysql_query("INSERT INTO comments VALUES ('NULL', '".$_POST['comment']."', CURRENT_TIMESTAMP)");
echo "Message enregistré !";   
}
elseif(strlen($message) < 0)
{
   echo "Nothing here";     
}

?>

class.php

<?php

    class Shootbox {
    public function showMessage() {
        mysql_connect("localhost", "root", "root"); 
        mysql_select_db("PFtest");

        $query = mysql_query("SELECT * FROM comments ORDER BY date DESC LIMIT 0 , 10");

        if(mysql_num_rows ($query)>0){
            while($result = mysql_fetch_object($query)){
                echo $result->message."<br />"; 
            }
        }
        else{
            throw new Exception("Aucune donnée dans la base de données");
        }
    }
}
?>

Answer 1

您可以簡單地添加一個換行符。 但是，要制作更好的 html，請在新消息周圍添加ap（段落）元素。 它的顯示默認為塊，因此不需要換行：

jQuery的：

$("#submitBtn").click(function () {
  $("#output p:last-child").html($('#message').val());
  $.ajax({
    url: "ajax.php",
    type: "POST",
    data: {
        comment: document.getElementById('message').value
    },
    dataType: "html",
    success: function (data, textStatus, xhr) {
        $("#output").append(document.getElementById('message').value);
        document.getElementById('message').value = "";
    }
  });
});

身體：

<body>

<form name="addComment">
    <input type="text" name="message" id="message" />
    <input type="button" name="submitBtn" id="submitBtn" value="Envoyer" />
</form>

<div id="output">
<?php
include("class.php");

$object1 = new Shootbox();

try {
    $object1->showMessage();
}
catch(Exception $e) {
    echo "Exception : ".$e->getMessage();
}


?>
</div>

</body>
</html>

對於第二個問題，php應該稍作更改：

    if(mysql_num_rows ($query)>0){
        while($result = mysql_fetch_object($query)){
          echo "<p>" . $result->message."</p>"; 
          }
        }

Answer 2

只是對您的每個問題可能是什么的一些猜測。

問題1-消息僅在刷新時才顯示在單獨的行中的原因是因為您僅在頁面加載時在showMessage函數的服務器端添加了break標簽。

在提交時添加新消息時，您的JS中缺少break標簽。 因此，對於您的JS，這是在AJAX調用后添加新消息時使用的標記，將break標記放在最后。

$("#output").append(document.getElementById('message').value + '<br>');

問題2-不會替換提交時的第十條消息，因為您要追加到輸出中。 因此，您需要在添加后刪除最舊的消息。

在Javascript / jQuery中使用HTML標簽

問題描述

2 個解決方案

解決方案1
0 2013-12-13 00:46:51

解決方案2
0 2013-12-13 00:56:07

在Javascript / jQuery中使用HTML標簽

問題描述

2 個解決方案

解決方案1 0 2013-12-13 00:46:51

解決方案2 0 2013-12-13 00:56:07

解決方案1
0 2013-12-13 00:46:51

解決方案2
0 2013-12-13 00:56:07