使用AJAX在nodeJS Express MongoDB中发送post请求

Question

I have got a newsletter section on my website with two fields, name and email. What I am after is that the user can fill the form and send it, saving the data in MongoDB and not reloading or redirecting the page, I am not interested in the result, all I want is to keep that data so in future, I can start sending newsletters, although refreshing just the newsletter section would be nice.

Bonus: The form is in the partial footer, so the form can be sent from any route in the website.

These are my efforts:

schema:

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

Server side:

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

Footer partial:

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

At the moment is saving the data in MongoDB but after submiting the form the reload button of the browser is forever moving, no flash it's being shown and the form stays filled, however, it is console.logging the result.

Any help or pointing in a right direction would be great! thanks.

Answer 1

send a response 200 from expressjs server

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

you are missing 2 things:- 1) you are not sending any response from the route, so it will not end it will keep waiting and scrolling,

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) In ajax call, you should return false at end, so it will prevent page from reloading as it will not post form in page, so do

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

Now, it will not reload the page.