重新加载通过 XMTHTTPRequest 对象发布数据的页面
我正在学习 Web 开发，刚刚开始学习 AJAX；这种学习 AJAX 的追求让我发疯......
我在 stackoverflow 上看到了很多使用 JQuery 的类似帖子，但我希望使用普通 JS 来实现这一点。
我的要求是，我有一个 HTML 页面，通过 XMLHTTPRequest 对象发布表单数据。数据正确发送到服务器（Node）。我想要实现的是重新加载发送数据的同一页面以及刚刚发布的数据（就像这样）。
我知道这可以通过 JQuery 来完成（即通过调用 location.reload()），但是我无法仅通过使用 XHMHTTPRequest 来使其工作。使用 XHR 是否有可能实现这一目标？我可以看到 xhr 的 ResponseText 具有完整的 HTML 和所需的更新（请参阅参考文献）。然后我如何使用这个 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});
});
噜噜哒1回答
-
MMTTMM
我同意这不是 AJAX 的使用方式。使用 AJAX 的全部目的是让您无需刷新页面即可从请求加载数据。相反，您可以动态显示每个请求的数据/内容。目前，在您的代码中，您有以下内容：alert(xhr.responseText); //xhr.responseText has the entire desired HTMLwindow.location.reload; //Does nothing尝试以适合您的应用程序的方式删除window.location.reload并解析。xhr.responseText这意味着您应该根据端点返回的内容来解析它。在端点中返回 JSON 的一种快速方法是在语句末尾/Test写入。还有其他方法可以返回 json，这比这个问题与 Express.js 更相关，所以我不会详细介绍。res.send({ data: req.body.name });app.post()一旦解析了返回到客户端的 XHR 对象的数据，您就可以通过 id 选择页面上的不同元素并更新它们的值。更新值的方法有很多，但这只是其中之一。例如，您可以像这样编写示例 div：<div> <h4 id="some_text"></h4></div>h4并使用 vanilla JS向 statechanged 处理程序中的标记添加一个值。也许是这样的： document.getElementById("some_text").innerHtml = JSON.parse(xhr.responseText).data;
随时随地看视频慕课网APP
相关分类
Html5
