我正在學習 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 JSvar 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
TA貢獻1869條經驗 獲得超4個贊
我同意這不是 AJAX 的使用方式。使用 AJAX 的全部目的是讓您無需刷新頁面即可從請求加載數據。相反，您可以動態顯示每個請求的數據/內容。
目前，在您的代碼中，您有以下內容：
alert(xhr.responseText); //xhr.responseText has the entire desired HTML
window.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;
- 1 回答
- 0 關注
- 152 瀏覽
添加回答
舉報
0/150
提交
取消