使用 Node、express 和 vanilla JS 发布 Ajax 调用

Question

我正在尝试使用 vanilla JS 进行一些 ajax 调用。 在后端，我正在使用 express-framework 中的节点。

我想发送的数据似乎从未真正到达我的后端。有人知道发生了什么吗？

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

当我遍历数据对象时，一切似乎都正常，返回了我想通过表单提交的键和值。

这是我的后端设置：

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

当我console.log(req.body.tag) 时，我只得到Undefined 而req.body 只是一个空对象。 我的数据库也抛出了一个错误，因为键 tag_name 不应该为 NULL。

当我查看网络面板时，我收到 503 服务不可用。

感谢您的回复和意见！

Answer 1

在服务器端，您可以使用multer 来处理多部分/表单数据。

或者，您可以像这样将 JSON 格式的数据发送到服务器：

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

服务器端设置bodyParser为JSON

app.use( bodyParser.json() );

现在你应该可以通过req.body..语法读取值了。