javascript - 使用 Node、express 和 vanilla JS 进行 POST Ajax 调用

Question

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

看来我想要发送的数据实际上从未到达我的后端。有人知道发生了什么事吗？

我的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.. 语法读取值。