這是使用Ajax的正確方法嗎？

Question

因此，我正在開發一個待辦事項應用程序，當單擊任務以將其標記為已完成時，我使用Ajax將數據發送到PHP。 然后，PHP向MySQL發送SQL查詢，並將完成列中的值從1更改為0或Visa Vera。 最初，我嘗試發送一個PHP標頭返回該頁面，但是它不起作用，因此在發送請求后，我編寫了一些JavaScript代碼來刷新頁面，並且該任務現在標記為已完成，並且具有css樣式為了那個原因。 我想知道，我以為Ajax的目的是不必重新加載整個頁面，如果我使用Ajax錯誤，則可以重新加載idk，還有更好的方法嗎？ 該項目有效，但我只想對我的代碼提供一些反饋。

main.js：

for(i=0; i < div.length; i++){
    div[i].addEventListener("click", function(e){ 
        let xhr = new XMLHttpRequest();

        xhr.open('POST', 'process_complete.php', true);
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
        let task_num = e.target.getAttribute("id");
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 && xhr.status === 200){
                location.reload(); 
            }
        }
        xhr.send(JSON.stringify(task_num));
    });
}

process_complete.php：

if(isset($_SERVER['HTTP_X_REQUESTED_WITH'])){

    $data = file_get_contents('php://input');
    $id = json_decode($data);


    $sql = mysqli_query($conn, "SELECT * FROM tasks WHERE Num = '$id'"); 

    if($sql === false){
        printf("error: %s\n", mysqli_error($conn));
    }

    while($row = mysqli_fetch_row($sql)){
        if($row[3] === "1") {
            $mysqli_update = mysqli_query($conn, "UPDATE tasks SET Completed = 0 WHERE Num = '$id';");
        } else {
            $mysqli_update = mysqli_query($conn, "UPDATE tasks SET Completed = 1 WHERE Num = '$id';");
        }
    }
}

Answer 1

我以為Ajax的目的是不必重新加載整個頁面

它是。

您應該編寫JavaScript，在具有location.reload()修改當前頁面的DOM。

Answer 2

因此，您可能缺少第三步。 您已經傳遞了數據並將其提取到PHP頁面，但是您需要將其傳遞回。 為了做到這一點，您首先要在PHP頁面中放置一個echo ，該回顯的工作方式與return一起使用PHP中的函數的方式相同。 完成此操作后，您需要確保AJAX接受該返回值，然后確保您具有一個包含此AJAX並使用該值替換，附加或刪除AJAX使用的任何內容的函數。 如果使用JQUERY框架中的.post()類的AJAX擴展名，則這樣做會容易得多。