JavaScript/AJAX想要从留言簿条目中删除html类

Question

我正在为JS和Ajax中的大学项目编写留言簿。我已经能够发表留言条目。现在我的问题是，我不知道如何再次删除它们。

我的PHP文件看起来像

<?php 
 
########################################################### 
 
/* 
 
Developer: Not Important 
 
Version: \t 1.0 
 
Release: \t 08.12.2014 
 
*/ 
 
########################################################### 
 

 
error_reporting(0); 
 
include("config.php"); 
 

 
if ($_REQUEST["do"]=='add') { 
 
\t 
 
\t $sql = "INSERT INTO ".$SETTINGS["data_table"]." SET date_time=now(), name='".mysql_real_escape_string($_REQUEST["name"])."', email='".mysql_real_escape_string($_REQUEST["email"])."', comment='".mysql_real_escape_string($_REQUEST["comment"])."'"; 
 
\t $sql_result = mysql_query ($sql, $connection) or die ('request "Could not execute SQL query" '.$sql); 
 

 
} 
 

 
?> 
 

 
</div> 
 
<form id="GuestBookFrm" name="GuestBookFrm" onsubmit="return false;"> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="5"> 
 
    <tr> 
 
    <td colspan="2"><strong>Gästebuch Eintrag schreiben</strong></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Name</td> 
 
    <td><label> 
 
     <input type="text" name="your_name" id="your_name" /> 
 
    </label></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Email</td> 
 
    <td><input type="text" name="email" id="email" /></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Kommentar</td> 
 
    <td><label> 
 
     <textarea name="comment" id="comment" rows="5"></textarea> 
 
    </label></td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td><label> 
 
     <input type="button" name="button" id="button" value="Senden" onclick="SubmitComment()" /> 
 
\t <input type="reset" name="reset" id="reset" value="Reset" /> 
 
    </label></td> 
 
    </tr> 
 
</table> 
 
</form> 
 

 
<div id="Comments"> 
 

 
<?php 
 
$sql = "SELECT * FROM ".$SETTINGS["data_table"]." ORDER BY id DESC"; 
 
$sql_result = mysql_query ($sql, $connection) or die ('request "Could not execute SQL query" '.$sql); 
 
while ($row = mysql_fetch_assoc($sql_result)) { 
 
\t echo "<div><ul><li><h2>".stripslashes($row["name"])."</h2></li>"; 
 
\t echo "<li><span>gepostet am ".$row["date_time"]."</span><a class=\"delete\" href=\"#\">Löschen</a> <a class=\"edit\" href=\"#\">Editieren</a></li>"; 
 
\t echo "<li><p>".stripslashes(nl2br($row["comment"]))."</p></li></ul></div>"; 
 
} 
 
?>

和我的JavaScript看起来像这样：

var bustcachevar=1; //bust potential caching of external pages after initial request? (1=yes, 0=no) 
 
var bustcacheparameter=""; 
 

 
function createRequestObject(){ 
 
\t try \t { 
 
\t \t xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP"); 
 
\t } \t catch(e) \t { 
 
\t \t alert('Sorry, but your browser doesn\'t support XMLHttpRequest.'); 
 
\t }; 
 
\t return xmlhttp; 
 
}; 
 

 
function ajaxpage(url, containerid){ 
 
\t var page_request = createRequestObject(); 
 
\t 
 
\t if (bustcachevar) bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime() 
 
\t page_request.open('GET', url+bustcacheparameter, true) 
 
\t page_request.send(null) 
 

 
\t page_request.onreadystatechange=function(){ 
 
\t \t loadpage(page_request, containerid) 
 
\t } 
 

 
} 
 

 
function loadpage(page_request, containerid){ 
 
\t if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)) { 
 
\t  document.getElementById(containerid).innerHTML=page_request.responseText; 
 
\t }; 
 
} 
 

 

 
function LoadComments() { 
 
\t ajaxpage("guestbook.php", "GuestBook"); 
 
} 
 

 
function SubmitComment() { 
 
\t if (document.GuestBookFrm.your_name.value !== '' && document.GuestBookFrm.email.value !== '' && document.GuestBookFrm.comment.value !== '') { 
 
\t \t ajaxpage("guestbook.php?do=add&name=" + encodeURI(document.GuestBookFrm.your_name.value) + "&email=" + encodeURI(document.GuestBookFrm.email.value) + "&comment=" + encodeURI(document.GuestBookFrm.comment.value), "GuestBook"); 
 
\t } else { 
 
\t \t alert ("Fill in all fields."); 
 
\t } 
 
\t 
 
} 
 

 
LoadComments();

我的SQL DA tabase看起来很简单：

CREATE TABLE IF NOT EXISTS `guestbook` (
 
    `id` int(11) NOT NULL auto_increment, 
 
    `date_time` datetime NOT NULL, 
 
    `name` varchar(250) NOT NULL, 
 
    `email` varchar(250) NOT NULL, 
 
    `comment` text NOT NULL, 
 
    PRIMARY KEY (`id`) 
 
)

正如你可以在我的PHP文件中看到，有具有删除和编辑按钮与类“线

echo "<li><span>gepostet am ".$row["date_time"]."</span><a class=\"delete\" href=\"#\">Löschen</a> <a class=\"edit\" href=\"#\">Editieren</a></li>"; 

删除“和类”编辑“。现在我正在努力工作，我可以再次删除留言簿条目。如果我想删除或不删除，我不需要任何确认。我只需要点击删除，然后它应该消失。

有没有人可以提供的任何代码来帮助我使它工作？

问候

Answer 1

想想你的代码需要进行删除做的步骤：

1. 您需要捕获点击事件上的删除按钮
2. 在客户端的代码，你需要发送向您的服务器发送一个AJAX调用请求删除
3. 在服务器代码上，您需要标识此AJAX调用，然后构建DELETE语句并执行它。
4. DELETE语句的结果应该返回一个结果值到您的客户端代码
5. 根据收到的响应，您的客户端代码应该返回一条关于删除错误的警告或从页面的DOM中删除最近删除的元素。

尝试分离每个这些任务，看看你是否知道如何制作它们中的每一个。如果您不知道如何处理这些问题或者遇到任何问题，请特别咨询本网站的具体问题。

我希望这会有所帮助。