这是我第一次写POST请求函数，我不能使用“Axios”来实现这个函数。下面是HTML和JavaScript文件。
HTML（您可以在这里为每个列输入值（“英语”和“Japanese”），并在单击“Save Them”按钮时将其保存到MongoDB。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Add Your Words!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Add Your New Words!</h1>
<div class="transtable">
<table class="table" id="ENJP" border="1">
<tr>
<th scope="col">English</th>
<th scope="col">Japanese</th>
</tr>
<tr>
<td ><input type="text" name="English"/>
</td>
<td><input type="text" name="Japanese"/>
</td>
<td><input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>
</td>
</tr>
</table>
</div>
<div class="opt_1">
<input type="button" value="Add a Row" onclick="AddRow()"/>
<input type="button" value="Save Them" onclick="SaveToDB()"/>
</div>
<script src="script.js"></script>
</body>
</html>Jsfile [参考 SaveToDB，这是我想问的问题]
// Send requests to a server to receive MongoDB data
let table = document.getElementById("ENJP");
const AddRow = () => {
//Add a new row
let newRow = table.insertRow(-1);
//Make cells and insert a row with them
let cel_EN = newRow.insertCell(-1);
let cel_JP = newRow.insertCell(-1);
let cel_DeleteButton = newRow.insertCell(-1);
let rowContentEN = '<input type="text" name="English"/>';
let rowContentJP = '<input type="text" name="Japanese"/>';
let rowDeleteButton = '<input class="closeBtn" type="button" value="X" onclick="DelRow(event)"/>';
cel_EN.innerHTML = rowContentEN;
cel_JP.innerHTML = rowContentJP;
cel_DeleteButton.innerHTML = rowDeleteButton;
}
// Delete a row you choose to click X button
const DelRow = (event) =>{
event.target.closest('tr').remove();
}
const SaveToDB = () => {
// An array to have each row's values at the last phase
let data = [];
let tbl_tr = table.querySelectorAll('tr');
let tdData = ""
//Process each row
tbl_tr.forEach(function(tr){
console.log(tr.innerText)
//Get <td> tags and skip the first row
let cells = tr.querySelectorAll('td');
if (cells.length!=0){
// This variable has data of rows
let d = []
cells.forEach(function(td){
if(td.innerHTML.indexOf('input') !== -1) {
tdData = td.querySelector('input').value;
d.push(tdData);
}
else if(td.textContent !== ""){
tdData = td.innerText;
d.push(tdData);
}
else{
d.push("NoData");
}
});
data.push(d);
let outcomeData = axios.post("/word/addwords", data);
console.log(outcomeData);
}
});
}JS文件（后端）
// expressとmongoose使用宣言
const express = require('express');
const mongoose = require('mongoose');
// DBをwordsに代入
const words = require('./models/words');
// expressのインスタンス作成
const app = express();
// publicフォルダ内を使用する処理。
app.use(express.static("public"));
app.use(express.json());
const port = 3000;
console.log("hello!!");
mongoose.connect("mongodb+srv:// (I omitted this part) /testdb"
).then(()=>console.log("Connecting"))
app.get('/', (req,res) => res.send('Hello World!'));
// DBに登録用関数 ここにAdd画面からのリストを受け取る。
function registerData(){
let bkData = new words({
english: "Mary Barton",
japanese: "Elizabeth Gaskell"
})
bkData.save()
}
function add_NewWords(){
console.log("DID IT!")
}
// ローカルホストに/book追加で入力すると作動する。
app.get("/word", async (req,res) => {
// 全部取得
try {
// 全データをbksで取得して、resに乗せて引き渡し。
const bks = await words.find({});
res.status(200).json(bks);
console.log(bks)
} catch (err) {
console.log(err);
}
});
//データ追加
app.post("/word/addwords", async(req, res)=>{
try {
let bkData = new words({
english: req[0],
japanese: req[1]
})
} catch (err) {
console.log(err);
}
console.log("Save it");
})
app.listen(port, () => console.log(`Example app listening on port ${port}!`));我的问题是HTML的输入标记的值不能发送到MongoDB。
1条答案
按热度按时间0dxa2lsx1#
axios.post是一个异步操作，所以你需要await或者使用.then。承诺
您需要向
.then()传递一个回调函数--then的第一个参数是一个解析值，在本例中，它将是一个Response对象。有关axios.post详细信息，请参阅www.example.com文档。
https://axios-http.com/docs/post_example
异步/等待
Async / Await是Promises的语法糖;因此，执行await的函数需要变为async。
请参阅有关Async / Await的文档：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
请参见下面的代码示例。