评论系统-Ajax,Php&;MySql


Commenting System - Ajax, Php & MySql

我已经成功地编写了一个简单的注释系统,它有两个字段:name和comment。当用户插入值并按下submit时,它只需使用Ajax将注释添加到当前页面(而不加载整个页面)。

现在,我还需要添加"删除注释"的功能,但我不知道如何实现。

如果你看一下我下面的代码,你会注意到,当加载页面时,我打印了所有现有的注释,当添加新的注释时,我只是通过以下子代码将它们添加到HTML代码中:

document.getElementById("result").innerHTML += 
        "<font color='red' size='5'>" + str + "</font>";;

我想声明一个数组,该数组包含所有注释的值,每个注释都有一个额外的值"active"。当这个值是逃学时,我打印当前的评论,否则我不会。

我还没有成功地实现这一点,此外,这是一个好的解决方案吗?因为这个解决方案在每次用户按下submit时都会重新打印所有的注释。

有什么建议吗?

我将感谢你的帮助。

这是我的代码:

main.php

<html>
    <head>
    <title> </title>
    <script language="Javascript" src="ajax.js"> </script>
  </head>

  <body>
   <h1 align="center"><font color="#000080">Welcome, </font></h1>
   <p  align="center"><font color="#000080">Enter your name &amp; comment then press 
   "Submit Button"</font></p>
    <form name="f1" method="post">
       <p align="center"><font color="#000080">&nbsp;
        Enter your name: <input type="text" name="username" id="username">
        <font color="#000080">&nbsp;
        Enter your comment: <input type="text" name="comment" id="comment">
        <input value="Submit" type="button" 
       onclick='JavaScript:postRequest()' name="showdate"></font></p>

     </form>
     </br></br>
     <?php
     include_once("config.php");
     $query = "SELECT * FROM `comments` ORDER BY 'id'"; 
    //Execute query
     $qry_result = mysql_query($query) or die(mysql_error());
    // Insert a new row in the table for each person returned
     while($row = mysql_fetch_array($qry_result)){
        echo ' <p align="center">';
        echo "<font color='red' size='5'> name: </br>".$row['added_by'];
        echo " </br>comment: </br>".$row['comment'];
        echo "</font></p>";}
     ?>
    <div id="result" align="center">  </div>
</body>
</html>

showcomments.php

名称:'$名称echo"comment:"$所容纳之物回声''?>

ajax.js

   function postRequest() {
    var xmlHttp;
          try{
   // Opera 8.0+, Firefox, Safari
   xmlHttp = new XMLHttpRequest();
 }
             catch (e)
             {
               // Internet Explorer Browsers
               try{
                  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
               }
               catch (e) {
                  try
                  {
                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  catch (e)
                  {
                     // Something went wrong
                     alert("Your browser broke!");
                     return false;
                  }
               }
             }
        var usr=window.document.f1.username.value;
        var cmnt=window.document.f1.comment.value;
        var url = "showcomments.php?username=" + usr +"&comment=" + cmnt;
        xmlHttp.open('GET', url, true);
        xmlHttp.setRequestHeader
              ('Content-Type', 'application/x-www-form-urlencoded');
        xmlHttp.onreadystatechange =function(){
            if(xmlHttp.readyState == 4){
                updatepage(xmlHttp.responseText);
            }
        }

        xmlHttp.send(url);
        }
     function updatepage(str){
        document.getElementById("result").innerHTML += 
            "<font color='red' size='5'>" + str + "</font>";;
        }

(附言:我使用MySql创建了一个名为"comments"的表,其中包含以下列:Id、Added_by、comment。)

我不仅会在PHP文件中打印名称和注释,还会打印一个包含ID的隐藏字段的表单。或者,更好的是,打印一个带有onClick="deleteComment(ID)"的按钮。更重要的是:将每个注释都放在一个带有ID的p-tag中,ID=注释ID。您的main.php php文件将用以下内容展开:

while($row = mysql_fetch_array($qry_result)){
    echo ' <p align="center" id="'.$row['id'].'>';
    echo "<font color='red' size='5'> name: </br>".$row['added_by'];
    echo " </br>comment: </br>".$row['comment'];
    echo "</font></p>";}

这个(ajax)函数deleteComment(ID)然后将要删除的注释的ID发送到另一个PHP脚本。这会将其从数据库中删除。

现在您有两个选项:您可以根据页面上的p-tag的ID删除它(这对于带有函数$('IDofP').empty()的jQuery来说非常容易)或者重新加载所有注释。