小總結：
我在 Node/Express/MongoDB/EJS 中有一個專案。
我正在設定代碼來編輯陣列，我的后端代碼作業正常（用 PostMan 測驗）但是，我無法讓我的前端作業。
當我點擊 a.deleteskill 時，控制臺和其他方面都沒有反應。
楷模 ：
skills: {
type: [
{
skill: String,
level: String,
},
],
},
路線：
router.put('/deleteskills/:id/:skill', userController.deleteskill);
控制器 ：
module.exports.deleteskill = async (req, res) => {
const {skill} = req.body;
try {
await Model.findOneAndUpdate(
{ _id: req.params.id },
{
$pull : {
skills: {
skill: langue,
}
}
},
(err, docs) => {
if (!err) return res.send(docs);
if (err) return res.status(500).send({ message: err });
}
);
}
catch (err) {
return res.status(500).json({ message: err });
}
};
ejs：
<table class="tablebox tableskill">
<thead>
<th>Langues</th>
<th>Niveau</th>
</thead>
<tbody>
<div style="display: none;"><p id="id_user_skill"><%= user._id%></p></div>
<% for(let j = 0; j < user.skills.length; j ) { %>
<tr>
<td>
<input class="skilllist" type="text" name="skill" value="<%= user.skills[j].skill %>" >
</td>
<td>
<input type="text" name="level" value="<%= user.skills[j].level %>">
</td>
<td>
<a class="deleteskill" data-user-id="<%= user._id%>" data-id="<%= user.skills[j].skill %>" >
<span class="material-icons icon-table delete-btn">
clear
</span>
</a>
</td>
</tr>
<% } %>
</tbody>
</table>
JS 檔案（在 ejs 中參考）：
userid = document.getElementById('id_user_skill');
if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {
$ondelete = $(".tableskill tbody td a.deleteskill");
$ondelete.click(function () {
let id = $(this).attr("data-id");
let iduser = $(this).attr("data-user-id");
let skilldata = `skill: ${id}`
let deleteskill = {
url: `/api/user/deleteskills/${iduser}/${id}`,
method: "PUT",
data: skilldata
};
$.ajax(deleteskill).done(function (response) {
location.reload();
});
});
}
隨時詢問更多資訊
uj5u.com熱心網友回復：
document.getElementById('id_user_skill');將回傳一個Element而不是 userId。在你的情況下，$('#id_user_skill').text();會幫助你。而且也不skill: ${id}是正確的資料。
對于application/x-www-form-urlencoded Content-Type（在 ExpressJS 中，您必須使用app.use(express.urlencoded());）
userid = $('#id_user_skill').text().trim();
if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {
$ondelete = $(".tableskill tbody td a.deleteskill");
$ondelete.click(function () {
let id = $(this).attr("data-id");
let iduser = $(this).attr("data-user-id");
let skilldata = {
skill: id
}
let deleteskill = {
url: `/api/user/deleteskills/${iduser}/${id}`,
method: "PUT",
data: skilldata
};
$.ajax(deleteskill).done(function (response) {
location.reload();
});
});
}
對于application/json Content-Type（在 ExpressJS 中，您必須使用app.use(express.json());）
userid = $('#id_user_skill').text().trim();
if (window.location.pathname == "/user/edit-user" || window.location.search == `?id=${userid}` ) {
$ondelete = $(".tableskill tbody td a.deleteskill");
$ondelete.click(function () {
let id = $(this).attr("data-id");
let iduser = $(this).attr("data-user-id");
let skilldata = {
skill: id
}
let deleteskill = {
url: `/api/user/deleteskills/${iduser}/${id}`,
method: "PUT",
data: JSON.stringify(skilldata),
headers: {
'Content-Type': 'application/json'
}
};
$.ajax(deleteskill).done(function (response) {
location.reload();
});
});
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/329210.html