從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();
     }
    });