Я нахожусь в процессе изучения веб-разработки и только собираюсь AJAX; и этот квест по изучению AJAX сводит меня с ума ...
Я видел много похожих постов по stackoverflow с использованием JQuery, но я стремлюсь добиться этого с помощью простого JS.
Мое требование заключается в том, что у меня есть страница HTML, которая публикует данные формы через объект XMLHTTPRequest. Данные правильно отправляются на сервер (узел). Чего я хотел бы добиться, так это перезагрузить ту же страницу, на которой были отправлены данные, с данными, которые они только что опубликовали ( Like So ).
Я знаю, что это можно сделать через JQuery (ie. Через вызов location.reload ()), однако я не могу заставить это работать просто с помощью XHMHTTPRequest. Можно ли даже достичь этого с помощью XHR? Я вижу, что ResponseText xhr имеет весь HTML с желаемым обновлением ( См. 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});
});