如何在url中传递参数，并在NodeJS后端的javascript服务器端使用冒号

Question

我正试图将一个数字id作为URL中的参数传递给服务器。我做错了什么？

我有一个任务管理器应用程序，可以在其中读取任务，用户可以通过任务id读取任务，现在我在邮递员中直接输入id(5e8b(作为：

{{url}}/tasks/5e8b

但我无法在浏览器中运行，这是我的Html代码：

<h1>Read Task by Task ID</h1>
<form id="task-id-form">
<input type="text" id="task-id"><br> <br>
<button id="task-id-button">Find Task</button>
<p id="task-id-display"></p>
</form>

我的服务器端JS代码是(不起作用(：

const readTaskForm = document.querySelector( "#task-id-form" );
readTaskForm.addEventListener( "submit", ( e ) => {
const readTaskId = document.querySelector( "#task-id" ).value;
const params = { id: readTaskId }; // new addition
const urlParams = new URLSearchParams( Object.entries( readTaskId ) );
fetch( "http://localhost:3000/tasks/" + urlParams, {
method: 'get',
headers: {
'Accept': 'application/json, text/plain, */*',
'Content-Type': 'application/json',
"Authorization": `Bearer` + `${ inMemoryToken }`
}
} ).then( res => res.json() )
.then( res => {
console.log( res );

}
);
} );

我的后端节点js代码如下(在poster中正常工作(：

router.get( "/tasks/:id", auth, async ( req, res ) => {
const _id = req.params.id;
try {
const task = await Task.findOne( { _id, owner: req.user._id } );
if ( !task ) {
return res.status( 401 ).send( { error: "Task id not found" } );
}
res.send( { task } );
} catch ( e ) {
res.status( 400 ).send( e );
}
} );

非常感谢您的帮助。

Answer 1

我认为您不必使用URLSearchParams作为参数，只需使用readTaskId

const readTaskForm = document.querySelector("#task-id-form");
readTaskForm.addEventListener("submit", (e) => {
const readTaskId = document.querySelector("#task-id").value;
//const params = { id: readTaskId }; // new addition
//const urlParams = new URLSearchParams(Object.entries(readTaskId));
fetch("http://localhost:3000/tasks/" + readTaskId, {
method: "get",
headers: {
Accept: "application/json, text/plain, */*",
"Content-Type": "application/json",
Authorization: `Bearer` + `${inMemoryToken}`
}
})
.then((res) => res.json())
.then((res) => {
console.log(res);
});
});