Fatal编程技术网
  • javascript/
  • Javascript 重新加载通过XMTHTTPRequest对象发布数据的页面

Javascript 重新加载通过XMTHTTPRequest对象发布数据的页面

javascript html node.js

Javascript 重新加载通过XMTHTTPRequest对象发布数据的页面,javascript,html,node.js,xmlhttprequest,Javascript,Html,Node.js,Xmlhttprequest,我正在学习web开发，刚刚开始学习AJAX；学习AJAX的这种追求让我发疯 我已经看到很多关于使用JQuery的stackoverflow的类似文章，但我希望使用普通JS实现这一点 我的要求是，我有一个通过XMLHTTPRequest对象发布表单数据的HTML页面。数据被正确地发送到服务器（节点）。我想要实现的是，用刚刚发布的数据重新加载发送数据的同一页面（） 我知道这可以通过JQuery实现（即通过调用location.reload（）），但是我不能简单地通过使用XHMHTTPRequest来

我正在学习web开发，刚刚开始学习AJAX；学习AJAX的这种追求让我发疯

我已经看到很多关于使用JQuery的stackoverflow的类似文章，但我希望使用普通JS实现这一点

我的要求是，我有一个通过XMLHTTPRequest对象发布表单数据的HTML页面。数据被正确地发送到服务器（节点）。我想要实现的是，用刚刚发布的数据重新加载发送数据的同一页面（）

我知道这可以通过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>
这是一个基于蒂姆评论的高层次答案。我同意这一点，因为这不是AJAX的使用方式。使用AJAX的全部目的是，您无需刷新页面即可从请求加载数据。相反，您可以动态显示来自每个请求的数据/内容

目前，在您的代码中，您有以下内容：

alert(xhr.responseText); //xhr.responseText has the entire desired HTML
window.location.reload; //Does nothing
尝试删除
窗口.location.reload
并以适合您的应用程序的方式解析
xhr.responseText
。这意味着您应该根据端点返回的内容来解析它。在
/Test
端点中返回JSON的一种快速方法是编写
res.send（{data:req.body.name}）在你的
app.post（）语句的末尾。还有其他方法可以返回json，这与Express.js比这个问题更相关，所以我不会详细介绍

一旦解析了返回到客户端的XHR对象中的数据，就可以按id在页面上选择不同的元素并更新它们的值。有很多方法可以更新值，但这只是其中之一

例如，您可以这样编写示例div：


<div>
  <h4 id="some_text"></h4>
</div>






并使用vanilla JS向statechanged处理程序中的
h4
标记添加一个值。也许是这样的：

document.getElementById（“一些文本”）.innerHtml=JSON.parse（xhr.responseText）.data
这不是AJAX的用途，请使用常规表单重新加载页面
location.reload（）
不是jQuery，它只是一个纯DOM对象及其方法。旁注：jQuery是一个用JavaScript编写的库，所以用jQuery做的任何事情都可以用普通JavaScript完成。如果您愿意，可以使用代替XMLHttpRequest的函数，而不是调用重载函数。您没有在
window.location.reload
window.location.reload
之后放置参数，只需重新加载页面，从XHR返回的任何内容在新页面上都不可用。@Teemu:谢谢您的评论。由于我知道这可以通过jOquery实现，而且由于jQuery基本上是隐藏的vanilla JS，所以我对尝试使用vanilla JS和XHR来解决这个问题有点好奇。如果XHR.responseText返回需要加载的HTML，那么如何使用它呢？@Domino:我会给FetchAPI一个机会，即使在location.reload（）周围有一个括号，我也无法让它工作。Jackson，非常感谢你的评论。这为我澄清了很多事情。因此，如果我要将帖子重定向到另一个页面，并使用更新的数据，那么res.render（“someotherpagewithupdatedata”，{data:req.body.name}）会不会出现错误；如果action属性也指向同一个页面，jQuery也不会使用获取的数据加载新页面。如果响应是一个HTML字符串，那么您可以直接将其用作
innerHTML
的值，XHR的思想就是，只有页面的一部分会重新填充一些新内容。如果您真的必须从响应中创建一个全新的页面，尽管我不建议在任何情况下都大量滥用XHR，因为使用简单的表单提交而不是AJAX调用可以实现这一点。再次，我同意Teemu的响应，只有在您真的必须创建一个全新的页面时，然后应该使用表单提交而不是XHR。因为我假设您正在创建自己的自定义端点来调用，所以您只需返回一个JSON对象，它将使您的
xhr.responseText
保存一个JSON值。我认为在这里使用
res.render（）
不起作用，因为在我的理解中，
res.render（）
用于呈现整个页面/视图。文档：
呈现视图并将呈现的HTML字符串发送到客户端
，但您可以尝试
res.json（）
：

<div>
  <h4 id="some_text"></h4>
</div>