Узел / Экспресс - отправка POST с конечным ответом без визуализации / перенаправления страницы

Question

Я все еще учусь, но немного расстроен тем, что не могу найти решение этой проблемы с помощью ES6 Javascript.

У меня есть простое веб-приложение со списком задач, и все сохраняется и отображается через javascriptфайл, который подается со страницей html и localstorage.

Моя проблема заключается в том, что я хотел бы иметь возможность развернуть его, так как приложение узла используется как в онлайн, так и в автономном режиме.Моя идея, чтобы иметь возможность добавить задачу, которая будет визуализировать на стороне клиента и делать запросы POST и DELETE за сценой для отправки в базу данных.

Модель принимается и сохраняется именно так, как я хочу,однако я хочу завершить ответ (res), чтобы страница не перезагружалась и не нарушала работу приложения.Код работает с использованием res.redirect('back'), но не без проблем визуально, потому что он каждый раз перезагружается.

Это файл приложения js:

const express       = require('express');
const mongoose      = require('mongoose');
const passport      = require('passport');
const cookieSession = require('cookie-session');
const keys          = require('./config/keys');
const authRoutes    = require('./routes/auth-routes');
const passportSetup = require('./config/passport-setup');

//App
const app = express();

app.set('view engine','ejs');

//Static Files Route
app.use('/resources',express.static('resources'))

//CookieSession
app.use(cookieSession({
    maxAge: 1000*60*60*24,
    keys:   [keys.session.cookieKey]
}));

//Init passport
app.use(passport.initialize());
app.use(passport.session());

//MongoDB Connect
mongoose.connect(keys.mongodb.dbURI,{ useNewUrlParser: true },()=>{console.log('MongoDB connected');})

//Routes
app.use('/auth',authRoutes);
app.use('/submit',require('./routes/submit'));

//Main
app.get('/', (req,res) =>{
    res.render('index',{user: req.user});
});

//Port Listening
app.listen(7000, ()=>{
    console.log("Listening on port 7000");
});

Это логика POST, которую я использую.работа с:

const express = require('express');
const router = express.Router();
const Task = require('../models/task-model');
const bodyParser = require('body-parser');

let urlencodedParser = bodyParser.urlencoded({ exstended:false });

router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    console.log("POST recieved");
    console.log(newTask);
    res.redirect('back');
    //Task.create(newTask);
});

module.exports = router;

Автономная версия репо веб-приложения: https://github.com/FalseProspect/myTask-TODO-app/tree/master

TLDR;Можно ли завершить ожидающий ответ сервера без перенаправления / рендеринга той же страницы с помощью ES6 (без JQuery).Я не хочу, чтобы со страницей произошел ответ.

Answer 1

Существует много способов отправки ответа от вызова API backend без перенаправления, и несколько различных способов похожи на

Использовать .send

router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    res.send('POST recieved', 200);
    res.end();
});

Другой способ отправки ответа с использованием .send

router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    res.status(200).send('POST recieved');
    res.end();
});

Другой способ отправки ответа с использованием .send

router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    res.send({"status": 200, "message": "POST recieved", "newTask": newTask});
    res.end();
});

Используйте .json для отправки ответа

router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    res.json({"status": 200, "message": "POST recieved", "newTask": newTask});
});

Используйте .write для отправки ответа

 router.post('/', urlencodedParser, (req,res,next)=>{
    let newTask = Object.assign({owner: req.user._id},req.body);
    res.write({"status": 200, "message": "POST recieved", "newTask": newTask});
    res.write(200);
    res.write("POST recieved");
    res.write(newTask);
    res.end();

Answer 2

Спасибо всем за ответы, однако большинство из них я сделал до публикации вопроса, и каждый из них приводил к тому, что страница становилась белой, используя res.end(), или пустую страницу со статусом или json в виде простого текста.

Мое решение состояло в том, чтобы использовать Multiparty вместо body-parser и отправлять formData через XMLHttpRequest вместо form.submit().

Оригинал:

function post(obj) {
  let form = document.createElement("form");
  form.setAttribute("method", 'post');
  form.setAttribute("action", '/');

  //Create temp form with obj data
  for(let key in obj) {
      if(obj.hasOwnProperty(key)) {
          let hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "text");
          hiddenField.setAttribute("name", key);
          hiddenField.setAttribute("value", obj[key]);

          form.appendChild(hiddenField);
      }
  }
  document.body.appendChild(form);  
  form.submit();
  document.body.removeChild(form);
}

Обновлено:

function post(obj) {
  let form = document.createElement("form");
  form.setAttribute("method", 'post');
  form.setAttribute("enctype", 'multipart/form-data"');
  form.setAttribute("action", '/');

  //Create temp form with obj data
  for(let key in obj) {
      if(obj.hasOwnProperty(key)) {
          let hiddenField = document.createElement("input");
          hiddenField.setAttribute("type", "text");
          hiddenField.setAttribute("name", key);
          hiddenField.setAttribute("value", obj[key]);

          form.appendChild(hiddenField);
      }
  }
  document.body.appendChild(form);  
  let formData = new FormData(form);
  let xhr = new XMLHttpRequest();
  xhr.open('POST','http://127.0.0.1:7000/submit');
  xhr.send(formData);
  document.body.removeChild(form);
}

Новый код на стороне сервера:

router.post('/', (req,res,)=>{
    //Multiparty handles formData sent
    let form = new multiparty.Form();
    form.parse(req, function(err, fields, files) {
        console.log('Multiparty caught request');
        let newTask = fields;
            //If user is signed-in, data will be saved;
            if(req.user){
                newTask = Object.assign({owner: req.user._id},newTask);
                Task.create(newTask);
            }
        console.log(newTask);
        res.end();
      });
        res.sendStatus(200);
});

Это, похоже, решило мою проблему

Answer 3

В вашем методе записи используйте res.json ()

return res.json({
    success: true,
    message: "Some success message",
    data: "some data if there's any"
});

В вашем интерфейсе проверьте статус ответа или значение успеха.