問題：我正在使用 StackOverflow members提供的以下代碼。我喜歡這段代碼，我希望它有效，但它沒有，我將解釋：
目的：從客戶端獲取輸入，使用 JavaScript 對其進行修改，然后將修改后的變數發布到服務器端（Node.js/Express）。
守則（貸記kwh）：
<body>
<script type="text/javascript">
function customSubmit() {
const name = document.getElementById('name').value ' mock';
const city = document.getElementById('city').value ' mock';
fetch('/posty', {
method: 'POST',
body: JSON.stringify({ name, city })
})
}
</script>
<form onsubmit="event.preventDefault(); customSubmit()">
<label for="name">Name: </label>
<input id="name" name="name" type="text">
<label for="city">City: </label>
<input id="city" name="city" type="text">
<button type="submit">submit</button>
</form>
</body>
我有 node.js 和 express.js 服務器端，我還沒有安裝 node-fetch。我使用 EJS 作為 HTML 的模板引擎/檔案和客戶端的 JS。
客戶端代碼：
app.post('/posty', (req,res) => {
console.log(req.body)
})
在控制臺（Linux 終端）中回傳一個空物件：
{}
現在，如果我替換代碼中的以下行：
<form onsubmit="event.preventDefault(); customSubmit()">
和
<form action="/posty" method ="POST">
我將在控制臺中得到一個非空物件：
{ name: 'John', city: 'Berlin' }
但是，這不是解決方案，因為我必須在將其發布到服務器端 (Node.js) 之前修改此人的姓名和城市。
討論：
我已經為 node.js 安裝了 node-fetch。甚至，如果我安裝了它，我必須將模塊匯入在服務器端而不是客戶端運行的 node.js 服務器檔案中。我看不到在 node.js 上安裝 node-fetch 以使用 fetch() 在客戶端兼容瀏覽器上運行的 HTML/JS 代碼中發布的意義。
可能在上面給定的代碼中缺少某些東西，無論是在服務器端還是客戶端，或者兩者兼而有之。如果有人能指出這一點，我將不勝感激。另外，我要感謝kwh，他提供了簡潔緊湊的代碼并幫助組織了我的研究以解決問題。
uj5u.com熱心網友回復：
你在你的路線之前使用了決議的身體嗎？你可以這樣做express.json()
app.use(express.json())
app.post('/posty', (req,res) => {
console.log(req.body)
})
uj5u.com熱心網友回復：
感謝您的回復。我在兩個 StackOverflow 成員和StackOverflow 論壇上的其他帖子之一的幫助下找到了解決方案：
我必須將以下行添加到kwh建議的代碼中的 fetch() 塊（客戶端）：
headers: new Headers({ "Content-Type": "application/json" })
此外，按照Ifaruki的建議，我在服務器端的代碼中添加了以下行：
app.use(express.json())
因此，服務器端缺少一行代碼，客戶端缺少一行代碼。我兩個都需要。
再次感謝您的快速回應和幫助。
uj5u.com熱心網友回復：
javascript比dom快得多，這就是為什么你需要讓瀏覽器先渲染dom然后執行js。它是由這個完成的
document.addEventListener("DOMContentLoaded", function (event) {
// content is loaded
const form = document.getElementById("id-of-yow-form");
form.addEventListener("submit", function (event) {
event.preventDefault();
//add yow code
});
});
確保將相同的 id 添加到 yow 表單標簽
<form id="id-of-yow-form">
<label for="name">Name: </label>
<input id="name" name="name" type="text">
<label for="city">City: </label>
<input id="city" name="city" type="text">
<button type="submit">submit</button>
</form>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/468120.html
標籤：javascript 节点.js 邮政 拿来 ejs