Я медленно приближался к решению примера проекта для онлайн-курса. В моем последнем вопросе моей главной проблемой было то, что после отправки формы я получил два javascript объекта, возвращенных в теле HTML:
{"animal":"lion","fact":"a lion's roar can be heard five miles away","fav":""}{"fav":"lions are big"}
Теперь я получаю полный объект:
{"animal":"lion","fact":"a lion's roar can be heard five miles away","fav":"lions are big"}
Основная проблема, с которой я столкнулся сейчас, заключается в том, что я не вижу объект javascript в консоли или терминале. Кроме того, я хочу, чтобы страница оставалась на странице с формой после ее отправки. В настоящее время форма заменена на объект javascript в теле. Я пытаюсь получить его, поэтому при отправке формы я вижу только объект, возвращенный в консоли и терминале, но страница остается прежней. Я думаю, что могут быть проблемы с моими маршрутами, но я не уверен.
Единственный раз, когда я вижу что-либо в консоли и терминале, это когда я впервые открываю индекс. html. Когда я открываю страницу, я получаю это в терминале:
{
animal: 'lion',
fact: "a lion's roar can be heard five miles away",
fav: {}
}
Это мой код:
server. js:
projectData = {};
/* Express to run server and routes */
const express = require('express');
/* Start up an instance of app */
const app = express();
/* Dependencies */
const bodyParser = require('body-parser')
/* Middleware*/
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
const cors = require('cors');
app.use(cors());
/* Initialize the main project folder*/
app.use(express.static('project1'));
const port = 8000;
/* Spin up the server*/
const server = app.listen(port, listening);
function listening(){
// console.log(server);
console.log(`running on localhost: ${port}`);
};
// GET route
let animalData = {};
const fakeData = {animal: "lion", fact: "a lion's roar can be heard five miles away"};
app.get('/fakeAnimalData', getFakeData);
function getFakeData(req, res) {
console.log(fakeData);
res.send(fakeData);
};
app.get('/all', getData);
function getData(req, res){
res.send(animalData)
console.log(animalData)
}
// function sendData (request, response) {
// response.send(projectData);
// };
// POST route
app.post('/add', callBack);
function callBack(req,res){
res.send('POST received');
}
// POST an animal
const data = [];
// TODO-Call Function
app.post('/addAnimal', addAnimal);
app.route('/')
.get(function (req, res) {
res.sendFile('index.html', {root: 'project1'})
})
.post(addAnimal);
//app.route('/addAnimal')
// .get(function (req, res) {
// res.sendFile('index.html', {root: 'project1'})
// })
// .post(addAnimal)
function addAnimal(req, res){
console.log(req.body);
Object.assign(animalData, req.body);
animalData = { ...animalData, ...req.body};
console.log(animalData);
res.status(200).send(animalData);
//newEntry = {
// animal: req.body.animal,
// fact: req.body.fact,
// fav: req.body.fav
//}
//data.push(req.body);
// res.status(200).send(req.body);
//animalData.push(newEntry)
// console.log(animalData)
//console.log(animalData)
};
app. js:
document.getElementById('submit').addEventListener('click', performAction);
function performAction(e){
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
};
const getAnimal = async (url) =>{
const res = await fetch(url);
try {
const data = await res.json();
console.log(data)
return data;
} catch(error) {
console.log()
}
};
/* Function to POST data */
const postData = async ( url = '', data = {})=>{
console.log(data);
let response = await fetch(url, {
method: 'POST', // *GET, POST, PUT, DELETE, etc.
credentials: 'same-origin', // include, *same-origin, omit
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data), // body data type must match "Content-Type" header
});
try {
const newData = await response.json();
console.log(newData);
// console.log(newData);
return newData
console.log(await response.json());
return await response.json()
}catch(error) {
console.log("error", error);
// appropriately handle the error
};
};
// TODO-Call Function
getAnimal('/fakeAnimalData')
.then(async function(data){
console.log(data);
let res = await postData('/', {animal: data.animal, fact: data.fact, fav: fav});
console.log(res);
});
index. html:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>What is your favorite thing about this animal?</h2>
<form action="#" method = "post">
<textarea id="fav" name="fav" required cols="80" rows="5"></textarea>
<button type="submit" id="submit" type="submit">Submit</button>
</form>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
Если вы можете помочь мне показать объект в консоли и терминале, оставаясь при этом на индексе. html Я был бы очень признателен.
Большое спасибо, Майк