使用Node，Express和Vanilla JS进行POST Ajax调用

Question

I am trying to do some ajax calls with vanilla JS. In the back-end I am working with node in the express-framework .

It seems that the data I want to send never actually reaches my back-end. Has anyone an idea what is going on?

My Javascript :

<form id='ajax_form' method='POST' action='/admin/new/tag'>
        <input type='text' name='tag' id="tag">
        <button type='submit'>Create new tag</button>
</form>

<script>
    var ajaxForm = document.querySelector("#ajax_form").addEventListener("submit", function(e){
                    e.preventDefault();
                    var form = e.target;
                    var data = new FormData(form);
                    var request = new XMLHttpRequest();
                    request.onreadystatechange = function(){
                        if(request.response){
                        [...]
                        }
                    }
                    request.open(form.method, form.action)
                    request.send(data);
            });
</script>

When I iterate over the data object, everything seems to be as it should, returning the keys and values I want to submit through the form.

This is my back-end set-up:

var express = require("express"),
    app = express(),
    mysql = require("mysql"),
    bodyParser = require("body-parser");

app.use(bodyParser.urlencoded({extended: true}));


app.post('/admin/new/tag', function(req, res){
    var tag = {tag_name: req.body.tag};
    var q = 'INSERT INTO tags SET ?';
    connection.query(q, tag, function(error, results, fields){
        if (error) throw error;
        res.send('succeed');
    });
});

When I console.log(req.body.tag) , I just get Undefined and req.body is just an empty object. My database also throws an error as the key tag_name should not be NULL.

When I look at the network panel I receive 503 service unavailable .

Thank you for your response and input!

Answer 1

On server-side you muse use multer for handling multipart/form-data.

Alternatively, you can send the data in JSON format to the server like this way:

var xhr = new XMLHttpRequest();
var data = {
    param1: 'value1',
    param2: 'value2'
};
xhr.open('POST', '/query');
xhr.onload = function(data) {
    console.log('loaded', this.responseText);
};
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify(data));

Server-side set the bodyParser to JSON

app.use( bodyParser.json() );

And now you should be able to read the values ​​through the req.body.. syntax.