【发布时间】：2020-06-22 17:32:50
【问题描述】：
我正在学习 Web 开发，刚刚开始学习 AJAX；而这种学习 AJAX 的追求让我发疯了……
我在 stackoverflow 上使用 JQuery 看到了很多类似的帖子，但我希望使用纯 JS 来实现这一点。
我的要求是，我有一个通过 XMLHTTPRequest 对象发布表单数据的 HTML 页面。数据正确发送到服务器（节点）。我想要实现的是使用刚刚发布的数据（Like So）重新加载发送数据的同一页面。
我知道这可以通过 JQuery 来完成（即通过调用 location.reload()），但是我不能仅仅通过使用 XHMHTTPRequest 来实现它。甚至有可能用 XHR 实现这一目标吗？我可以看到 xhr 的 ResponseText 具有所需更新的整个 HTML (See Ref)。然后我怎样才能使用这个 html 来重新加载页面。
非常感谢任何方向。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm()
{
var formElement = document.getElementById("myForm");
var formData = new FormData(formElement);
var xhr = new XMLHttpRequest();
xhr.onreadystatechange=function(){
if (xhr.readyState == 4 && xhr.status == 200)
{
alert(xhr.responseText); //xhr.responseText has the entire desired HTML
window.location.reload; //Does nothing
}
}
xhr.open("POST", "/Test", true);
xhr.send(formData);
return false;
}
</script>
</head>
<body>
<form id="myForm" method="POST" action="/Test" onsubmit="return submitForm()">
<input type="text" value="John" name="name"/>
<input type="submit" value="Send Data"/>
</form>
<div class="">
<h4>Name entered was <%= data %></h4>
</div>
</body>
</html>
//Node JS
var express = require('express');
var bodyparser = require('body-parser');
var multer = require('multer');
var app = express();
app.use(express.static('./'));
app.set('view engine', 'ejs');
var mydata;
var urlencoded = bodyparser.urlencoded({extended:true});
var mult_handler = multer();
app.get('/Test', function(req, res){
res.render("Test", {data:mydata});
});
app.post('/Test',mult_handler.none(), function(req, res){
console.log("In POST");
console.log(req.body.name);
mydata = req.body.name;
res.render("Test", {data:req.body.name});
});
【问题讨论】：
-
这不是 AJAX 的用途，请使用常规表单重新加载页面。
location.reload()不是 jQuery，它只是一个纯 DOM 对象及其方法。 -
旁注：jQuery 是一个用 JavaScript 编写的库，所以用 jQuery 完成的任何事情都可以在 vanilla JavaScript 中完成。如果需要，可以使用Fetch API 代替 XMLHttpRequest。
-
你没有调用 reload 函数。你没有在
window.location.reload之后加上括号 -
window.location.reload只是重新加载页面，从 XHR 返回的任何内容在该新页面上均不可用。
标签： javascript html node.js xmlhttprequest