Использование AJAX для отправки почтового запроса в nodeJS Express MongoDB

Question

На моем сайте есть раздел с двумя полями: имя и адрес электронной почты.Я хочу, чтобы пользователь заполнил форму и отправил ее, сохраняя данные в MongoDB, а не перезагружая и не перенаправляя страницу. Меня не интересует результат, все, что мне нужно, это сохранить эти данные в будущем,Можно начинать рассылку новостных рассылок, хотя было бы неплохо обновить только раздел новостной рассылки.

Бонус: форма находится в нижнем колонтитуле, поэтому форму можно отправить с любого маршрута на веб-сайте.

Вот мои усилия:

схема:

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

Частичное нижнее колонтитул:

<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>

jQuery

// Using Ajax to send a form without refreshing page
    $('#submit').on('submit', function(e){
        e.preventDefault(); 
        $.ajax({
            url: '/',
            method: 'POST',
            contentType: 'application/json',
            success: function(html) {
            alert('data sent!');
            }
        });
        //return false; 
    });

В данный момент данные сохраняются в MongoDB, но после отправки формы кнопка перезагрузки браузера постоянно перемещается, вспышка не отображается и форма остается заполненной, однако это console.logging результат.

Любая помощь или указание в правильном направлении было бы здорово!спасибо.

Answer 1

вам не хватает 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; 
});

Теперь, она не перезагрузит страницу.

Answer 2

отправить ответ 200 с сервера expressjs

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