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）如果在脚本加载后添加元素，则不会附加侦听器，因此它不会触发您的代码。

您需要做的是使用event delegation。这意味着您必须将您的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();
     }
    });

从jQuery / AJAX请求执行PHP文件

2 个答案: