Question

我仍然在学习，但有点沮丧，因为我无法使用ES6 Javascript找到解决此问题的方法。

我有一个简单的待办事项列表网络应用程序，所有内容都通过html页面和localstorage随附的javascript文件进行保存和呈现。

我的问题是，我希望能够将其部署为具有在线和离线用法的节点应用程序。我的想法是能够添加一个任务，该任务将呈现客户端，并在后台发出POST和DELETE请求以发送到数据库。

正在接收模型并完全按照我的期望进行保存，但是我想结束响应（res），因此页面不必重新加载并破坏应用程序体验。该代码确实可以使用MPI_Comm来工作，但是在视觉上并非没有问题，因为它每次都在重新加载。

这是应用js文件：

res.redirect('back')

这是我正在使用的POST逻辑：

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");
});

Webapp存储库的脱机版本：https://github.com/FalseProspect/myTask-TODO-app/tree/master

TLDR；是否可以在不使用ES6（无JQuery）重定向/呈现同一页面的情况下结束挂起的服务器响应。作为服务器的响应，我希望页面没有任何变化。

Answer 1

在您的post方法中，使用res.json（）

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

在前端，检查响应状态或成功值。

Answer 2

有很多方法可以发送来自后端api调用的响应而无需重定向，并且很少有类似的方法

使用.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 3

感谢所有人的答复，但是我在发布问题之前已完成了大多数答复，每个答复都会导致使用res.end()的页面变为白色，或者状态或json为纯文本的空白页面。

我的解决方案是使用Multiparty代替body解析器，并通过XMLHttpRequest而不是form.submit()发送formData。

原文：

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);
});

这似乎解决了我的问题

节点/表达-POST提交，最终响应，无页面渲染/重定向

3 个答案: