[英]Is this the right way to use Ajax?
因此,我正在开发一个待办事项应用程序,当单击任务以将其标记为已完成时,我使用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';");
}
}
}
我以为Ajax的目的是不必重新加载整个页面
它是。
您应该编写JavaScript,在具有location.reload()
修改当前页面的DOM。
因此,您可能缺少第三步。 您已经传递了数据并将其提取到PHP页面,但是您需要将其传递回。 为了做到这一点,您首先要在PHP页面中放置一个echo
,该回显的工作方式与return一起使用PHP中的函数的方式相同。 完成此操作后,您需要确保AJAX接受该返回值,然后确保您具有一个包含此AJAX并使用该值替换,附加或删除AJAX使用的任何内容的函数。 如果使用JQUERY框架中的.post()
类的AJAX扩展名,则这样做会容易得多。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.