【问题标题】:Redirect after form submit or not?表单提交后是否重定向?
【发布时间】:2018-03-11 13:18:41
【问题描述】:

在我的个人页面(1 页网站)的底部,我有一个联系表单,可以将消息发送到我的数据库,以便我稍后阅读。

问题是,如果我不重定向到任何地方,页面不会重新加载,这是我想要的,但正在搜索某些内容并在选项卡中有一个加载图标,最终断开连接并显示“ECONNRESET "来自 Cloud9 的错误。

如果我确实重定向回 /#contact(到页面,然后到联系人部分),那么它会重新加载页面,由于网站的功能,这不是我想要发生的事情。它有一些动画在发送消息后立即加载,重新加载会取消它们,看起来很糟糕。

如何使页面在发送消息后不必重新加载,这意味着我不必重定向到任何地方,但我也没有收到 ECONNRESET 错误?

app.post("/", function (req, res){
  // Retrieve form data
  var name = req.body.name;
  var email = req.body.email;
  var subject = req.body.subject;
  var message = req.body.message;
  var newMessage = {name: name, email: email, subject: subject, message: message};
  // Save new message to database
  Message.create(newMessage, function (err, sendMessage) {
    if (err) {
      console.log(err);
    } else {
      console.log(sendMessage);
    }
  });
});

【问题讨论】:

    标签: javascript html node.js express cloud9


    【解决方案1】:

    如果您不是通过 AJAX 发布表单,那么您应该重定向到呈现您的视图的 GET 端点。如果您不想重定向,那么至少您需要调用res.render() 来呈现正确的视图。不重定向的缺点是,如果用户刷新页面,可能会提示他们重新提交表单。

    Message.create(newMessage, function(err, sendMessage){
        if(err){
            console.log(err);
        } else {
            console.log(sendMessage);
            res.render('contact'); //change 'contact' to the name of the view you are rendering
        }
    });
    

    【讨论】:

      【解决方案2】:

      我进行了一些搜索,并找到了一种我希望它工作的方法:不重定向或重新加载页面。

      我删除了不必要的错误处理和 console.log,因为我只需要表单将数据发送到我的数据库,以便稍后阅读。

      app.post("/", function(req, res){
          // Retrieve form data
          var name = req.body.name;
          var email = req.body.email;
          var subject = req.body.subject;
          var message = req.body.message;
          var newMessage = {name: name, email: email, subject: subject, message: message};
          // Save new message to database
          Message.create(newMessage);
      });
      

      显然我需要一个 Ajax/jQuery 请求,如下所示:

      $('form').submit(function(e){
          e.preventDefault();
          $.ajax({
              url:'/',
              type:'post',
              data:$('form').serialize(),
              success:function(){
                  //whatever you wanna do after the form is successfully submitted
              }
          });
      });
      

      Source我找到的答案(第一个答案)

      【讨论】:

        猜你喜欢
        • 2013-04-13
        • 1970-01-01
        • 2013-08-06
        • 2016-12-30
        • 2015-03-25
        相关资源
        最近更新 更多