我在使用node.js的同时通过POST请求方法不断从表单获取[object] [Object]作为我的请求 [英] I keep getting [object][Object] as my request from a form with a POST request method while using node.js
本文介绍了我在使用node.js的同时通过POST请求方法不断从表单获取[object] [Object]作为我的请求的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直试图通过POST请求来获取文本输入的值，但是在服务器端，当我确实输入值时，req.body返回一个[objecet][Object]请求.这是我的代码
I have been trying to get the value of my text input in a form with a POST request, but on the server side, the req.body is returning a [objecet][Object] request, when indeed I put in a value. Here's my code
const express = require('express');
const path = require('path');
let app = express();
const bodyParser = require('body-parser');
//Middleware for
app.use(bodyParser.urlencoded({extended: true}))
//using a middleware to map the /assets link in the url
app.use(express.static(path.join(__dirname, '/public')));
//Setting the view engine
app.set('view engine', 'ejs');
app.get('/', (req, res)=>{
res.sendFile(__dirname + '/index.html');
})
//Contact page
app.get('/contact', (req, res)=>{
res.sendFile(__dirname + '/contact.html');
// res.sendFile(__dirname + '/assets/appUI.js');
})
app.get('/contact-us', (req, res)=>{
res.sendFile(__dirname + '/contact.html');
})
//Handling POST request
app.post('/', (req, res )=>{
console.log('The task is '+ req.body)
})
app.listen(3000, ()=>{
console.log('The server is up and listening at port 3000!!!')
})
我的index.html代码如下
My index.html code is as below
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css" type="image/x-icon">
<title>To do app</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="animate.css">
</script>
</head>
<body onload ="appui()">
<p><a href="contact">CONTACT US</a></p>
<img src="todoImage.png" alt="" class="todoImage">
<div class="main-box">
<div class = "form-error animated shake" id = "error-message">
<p class = "form-error"><small>Please add a task</small></p>
</div>
<div class = "form-registered animated shake" id = "registered-message">
<p class = "form-registered"><small>Details added to register!</small></p>
</div>
<h1>Todo App </h1><br>
<form class="form" action="/" method="POST">
<input type="text" id="task" name = "task" value="Invents"><br>
<input type="submit" value="Add task" class="btn" name="addTask">
<input type="button" value="Clear All" class="btn clear-all" name="clearTask">
</form>
</div>
<ul class="task-list"></ul>
<script src= "appUI.js">
</script>
</body>
</html>
我的客户端javascript代码如下
And my client side javascript code is as below
function appui(){
//Grabing input
const task = document.querySelector('#task');
const submit = document.querySelector('.btn');
const main = document.querySelector('.main-box');
const form = document.querySelector('.form');
const taskList = document.querySelector('.task-list');
const clearTask = document.querySelector('.clear-all')
const errorMessage = document.querySelector('#error-message');
const registeredMessage = document.querySelector('#registered-message');
//Load event listener
// loadEventlisntener()
console.log(main)
//adding submit event
submit.addEventListener('click', addTask);
//Funtion Error Display
function errorDisplay(){
errorMessage.style.setProperty('display', 'none');
}
//Funtion regsitered Display
function registeredDisplay(){
registeredMessage.style.setProperty('display', 'none');
}
//addtask
//Function addTask
function addTask(e){
if(task.value !== '') {
//create Element li
let list = document.createElement('li');
//Add a class name
list.className = 'task-value';
//create div
let div = document.createElement('div');
//Add a class name
div.className = 'main-box task animated heartBeat';
//task
let taskInput = document.createTextNode(`${task.value}`);
//append text node
div.appendChild(taskInput);
//Anchor tag
let anch = document.createElement('a');
//Add a class name
anch.className = 'deleteIcon';
//Delete mark 'X'
anch.innerHTML = `<b class="delete-icon">Delete</b>`
//Append Anchor tag to div
div.appendChild(anch);
// main.appendChild(div);
// form.parentNode.insertBefore(div, form.nextSibling);
console.log(div)
// Inserting Element after
// main.parentNode.insertBefore(div, main.nextSibling);
document.querySelector('.task-list').appendChild(div);
registeredMessage.style.setProperty('display', 'block');
setTimeout(registeredDisplay, 3000);
task.value ='';
} else{
errorMessage.style.setProperty('display', 'block');
setTimeout(errorDisplay, 3000);
}
// e.preventDefault();
}
//Deleting task
taskList.addEventListener('click', removeTask);
// Remove Task
function removeTask(e) {
if(e.target.parentElement.classList.contains('deleteIcon')) {
e.target.parentElement.parentElement.remove();
}
}
//Clear all tasks
clearTask.addEventListener('click', ()=>{
if(taskList.innerHTML === ''){
errorMessage.style.setProperty('display', 'block');
setTimeout(errorDisplay, 3000);
}else if(confirm('Are you sure ?')){
taskList.innerHTML = '';
task.value ='';
}
})
}
我已经很沮丧，希望大家能帮上忙. 谢谢！
I'm already so frustrated, I hope you all can help out. Thanks!
推荐答案
在Javascript中，对象的自动字符串转换只是[Object][object]，因此在执行此操作时:
The automatic string conversion in Javascript for an object is just [Object][object] so when you do this:
console.log('The task is '+ req.body)
这就是正在发生的事情. req.body会自动将字符串转换为[Object][object]，并将其附加到您的字符串中.
that's what is happening. req.body undergoes an automatic string conversion to [Object][object] and that's appended to your string.
要解决此问题，请将您的代码更改为此:
To fix, change your code to this:
console.log('The task is ', req.body);
，以便console.log()可以输出整个req.body对象.
so that console.log() can output the whole req.body object.
这篇关于我在使用node.js的同时通过POST请求方法不断从表单获取[object] [Object]作为我的请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
