Question

我的网站上有一个新闻专栏，其中有两个字段，名称和电子邮件。我需要的是用户可以填写表格并发送表格，将数据保存在MongoDB中，而不用重新加载或重定向页面，我对结果不感兴趣，我只想保留这些数据，以便将来我可以开始发送新闻通讯，尽管刷新新闻通讯部分会很好。

奖金：该表单位于部分页脚中，因此可以从网站上的任何路径发送该表单。

这些是我的努力：

模式：

Digits = [0-9]+
Digits2 = [0-9a-zA-Z]+
Base = 2|3|4|5|6|7|8|9|10|11|12|13|14|15|16|17|18|19|20|21|22|23|24|25|26|27|28|29|30|31|32|33|34|35|36
Number = {Digits}((\.){Digits}?)? | \.{Digits}
PrecisionNumber = {Number}`((`?){Number})?
BaseNumber = {Base} "^^" {Digits2}(\.{Digits2}?)?
BasePrecisionNumber = {BaseNumber}((`{Number}?)|(``{Number}))
ScientificInteger = {Number} "\*^"(-?){Digits}
ScientificNumber = {PrecisionNumber} "\*^"(-?){Digits}
BaseScientificNumber = {BasePrecisionNumber} "\*^"(-?){Digits}

{BaseScientificNumber}|
{BasePrecisionNumber}|
{ScientificInteger}|
{BaseNumber}|
{ScientificNumber}|
{PrecisionNumber}|
{Number}            { return WLElementTypes.NUMBER; }

服务器端：

var UserSchema = new mongoose.Schema({
    name: {
        type: String,  
        required: true
    },
    email: {
        type: String, 
        unique: true, 
        required: true, 
        lowercase: true
    }
});

页脚部分：

//newsletter post
router.post("/", function(req, res){
    Newsletter.create(req.body.newsletter, function(err, newsletter) {
        if (err){
            console.log(err);
        } else {
            req.flash("success", "You have been successfully added to our newsletter! ");
            console.log(newsletter);
        }
    });
});

jQuery

<form id="newsletterForm" action="/" method="POST">
  <input id="newsletterName" type="text" name="newsletter[name]">
  <input id="newsletterEmail" type="email" name="newsletter[email]">
  <button id="submit" type="submit">Suscríbete</button>
</form>

此刻正在将数据保存在MongoDB中，但是提交表单后，浏览器的重新加载按钮将永远移动，没有显示任何闪存，并且表单仍处于填充状态，但是，它是console.loging结果。

任何帮助或指向正确的方向都很好！谢谢。

Answer 1

从expressjs服务器发送响应200

router.post("/", function(req, res){
    Newsletter.create(req.body.newsletter, function(err, newsletter) {
        if (err){
            console.log(err);
            res.send(err)
        } else {
            res.status(200).json({ message: 'success' });
            console.log(newsletter);
        }
    });
});


$('#submit').on('submit', function(e){
    e.preventDefault(); 
    $.ajax({
        url: '/',
        method: 'POST',
        contentType: 'application/json',
        success: function() {
          alert('data sent!');
          return false
        }
    });
    //return false; 
});

Answer 2

您缺少2件事：- 1）您没有从该路线发送任何响应，因此它不会结束，它将继续等待并滚动，

router.post("/", function(req, res){
Newsletter.create(req.body.newsletter, function(err, newsletter) {
    if (err){
        console.log(err);
        res.status(200).json({ error: 'failed' });
    } else {
        res.status(200).json({ message: 'success' });
        console.log(newsletter);
    }
});
});

2）在ajax调用中，您应该在末尾返回false，这样可以防止页面重新加载，因为它不会在页面中发布表单，所以这样做

$('#submit').on('submit', function(e){
    e.preventDefault(); 
    $.ajax({
        url: '/',
        method: 'POST',
        contentType: 'application/json',
        success: function(html) {
          alert('data sent!');
          //return false
        }
    });
    return false; 
});

现在，它不会重新加载页面。

使用AJAX在NodeJS Express MongoDB中发送发布请求

2 个答案: