Я пытался получить значение моего ввода текста в форме с помощью запроса POST, но на стороне сервера req.body возвращает запрос [objecet][Object], когда я действительно ввел значение.Вот мой код
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 такой, как показано ниже
<!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 на стороне клиента такой, как показано ниже
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 ='';
}
})
}
Яуже так расстроен, я надеюсь, что вы все можете помочь.Спасибо!