从jQuery / AJAX请求执行PHP文件

Question

我正在创建一个聊天功能，具​​有适当特权的工作人员可以删除已发布到聊天室的一行。

我希望该功能在不刷新页面的情况下就可以工作，但是我似乎无法正确理解jQuery / AJAX部分吗？ 什么都没发生。

作为jQuery新手，我希望有人可以指出我必须要看的那一行？

需要单击以删除行的href：

for (var i in json.lines) {
    lines.push("[<a class='delete' href='#' data-lineID='" + json.lines[i].id + "'>x</a>] " + json.lines[i].user + json.lines[i].divide + " " + json.lines[i].message);
}

jQuery的：

$('a.delete').on('click', function(event) {
var id = $(this).data('lineID');

    /* Request to .php file */
    var request = $.ajax({
    url: "/communications/chat.php?page=delete",
    type: "POST",
    data: { id : id },
    dataType: "html"
    });

  event.preventDefault();
  return false;

}）;

要执行的PHP脚本的一部分：

case 'delete' :

if(isset($_POST['id']) && !empty($_POST['id'])) {
    $id = $_POST['id'];

    try {
        $query = $udb->prepare("UPDATE `chat_lines` SET `deleted` = '1' WHERE `id` = ?");
        $query->bindValue(1,$id);
        $query->execute();
    } catch (Exception $e) {
        die($e->getMessage());
    }
}

break;

任何帮助表示赞赏:)

Answer 1

这可能需要花费很长时间，但是我认为您的问题是由加载Javascript时HTML元素不存在引起的。
加载脚本时，jQuery将附加一个事件侦听器（在本例中为click事件）。
如果在脚本加载后添加了元素，则不会附加侦听器，因此不会触发您的代码。

您要做的就是使用事件委托 。 这意味着您必须将javascript代码更改为此：

$('#mainContainerOfYourChat').on('click', 'a.delete', function(event) {
    var id = $(this).data('lineID');

    /* Request to .php file */
    var request = $.ajax({
            url: "/communications/chat.php?page=delete",
            type: "POST",
            data: { id : id },
            dataType: "html"
        });

  event.preventDefault();
  return false;
});

这样，jQuery将侦听页面的主容器，当触发单击时，如果它与a.delete选择器匹配，它将触发您的代码。

Answer 2

如果您的PHP正在从数据库中删除帖子，则唯一的问题是它会一直加载在客户端，直到您重新加载页面为止。 如果是这样，那么只要ajax调用成功，您只需添加一行即可删除注释：

var request = $.ajax({
    url: "/communications/chat.php?page=delete",
    type: "POST",
    data: { id : id },
    dataType: "html",
    success: function(){
      $("a.delete[data-lineID="+id+"]").parent().remove();
     }
    });