这是使用 Ajax 的正确方法吗？

Question

所以我正在开发一个待办事项应用程序，并在单击任务以标记为已完成时使用 Ajax 将数据发送到 PHP。然后 PHP 向 MySQL 发送一个 SQL 查询，并将完成列中的值从 1 更改为 0 或 Visa vera。最初，我尝试发送一个 PHP 标头以返回该页面，但它没有工作，所以在发送请求后我编写了一些 JavaScript 代码来刷新页面，任务现在被标记为已完成，我有一个 css 样式为了那个原因。我想知道，我认为 Ajax 的目的是不必重新加载整个页面，所以如果我使用错误的 Ajax 并且有更好的方法来做到这一点？该项目有效，但我想我只想对我的代码进行一些反馈。

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

因此，您可能缺少第三步。您已经传递了数据并将其提取到 PHP 页面中，但是您需要将其传递回来。为此，您首先在 PHP 页面中放置一个echo，它的工作方式与 PHP 中的函数 return 的工作方式非常相似。完成此操作后，您需要确保 AJAX 接收该返回值，然后确保您有一个包含此 AJAX 并使用该值替换、附加或删除 AJAX 正在使用的任何内容的函数。如果您使用 JQUERY 框架中的 .post() 之类的 AJAX 扩展，这会容易得多。

Answer 2

我认为 Ajax 的目的是不必重新加载整个页面

是的。

您应该编写 JavaScript 来修改当前页面的 DOM 在您拥有 location.reload() 的位置。