Question

因此，我正在开发一个To Do App，当单击任务以将其标记为已完成时，我使用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扩展，则这样做会容易得多。

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

2 个答案: