Javascript/AJAX 想要从留言簿条目中删除一个 html 类

Question

我正在为我的大学项目使用 JS 和 Ajax 编写留言簿。我已经可以发布留言簿条目了。现在我的问题是我不知道如何再次删除它们。

我的 PHP 文件是这样的

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

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

if ($_REQUEST["do"]=='add') {
	
	$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"])."'";
	$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()" />
	  <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)) {
	echo "<div><ul><li><h2>".stripslashes($row["name"])."</h2></li>";
	echo "<li><span>gepostet am ".$row["date_time"]."</span><a class=\"delete\" href=\"#\">Löschen</a> <a class=\"edit\" href=\"#\">Editieren</a></li>";
	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(){
	try	{
		xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
	}	catch(e)	{
		alert('Sorry, but your browser doesn\'t support XMLHttpRequest.');
	};
	return xmlhttp;
};

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

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

}

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


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

function SubmitComment() {
	if (document.GuestBookFrm.your_name.value !== '' && document.GuestBookFrm.email.value !== '' && document.GuestBookFrm.comment.value !== '') {
		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");
	} else {
		alert ("Fill in all fields.");
	}
	
}

LoadComments();

我的 SQL 数据库看起来很简单：

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 中删除最近删除的元素。

试着把这些任务分开，看看你是否知道如何完成每一个任务。如果您不知道如何处理其中的任何一个，或者与任何人有任何问题，请在本网站上询问具体问题。

我希望这会有所帮助。