Estoy publicando un comentario con Axios (sin actualizar la página) del lado del cliente al servidor. el comentario se guarda con éxito y envía los datos guardados como respuesta. Quiero que los datos de respuesta se muestren en una página web después de guardar. No entiendo cómo hacer eso, apóyenme. aquí está mi código en
<script> const form = document.querySelector('.formPost'); const pushComment = document.querySelector('#pushComments').innerHTML const formEvent = form.addEventListener('submit', event => { event.preventDefault(); const postId = document.querySelector('#postId').value; const adminId = document.querySelector('#adminId').value; const comment = document.querySelector('#comment').value; const commentData = {postId, adminId,comment}; async function doComment(form){ await axios({ url:"/comment", method:'post', data:commentData, }).then((responseData)=>{ var value = responseData.data document.getElementById('pushComments').innerHTML = value console.log(responseData.data) }) } doComment() function nulldata(){ const comment = document.querySelector('#comment').value='' } nulldata() });aquí cortar datos laterales
route.post('/comment', async (req,res)=>{ const user = req.user const comments = { postId:req.body.postId, admin: req.body.adminId, comment:req.body.comment, name:req.user.name, email:req.user.username } console.log( comments) const comment = await Comment.create(comments) res.json({comment})})
Está recibiendo una respuesta json que contiene un documento de comentarios del lado del servidor.
Suponiendo que desea agregar el campo de comment de la respuesta y pushComments es un <ul> simple que simplemente podría hacer:
const {comment} = responseData.data; const existingCommentsList = document.getElementById('pushComments').innerHTML; document.getElementById('pushComments').innerHTML = `${existingCommentsList}<li>${comment.comment}</li>`;