使用Node，Express和Vanilla JS進行POST Ajax調用

Question

我試圖用香草JS做一些Ajax調用。 在后端，我正在快速框架中使用node。

似乎我要發送的數據實際上從未到達后端。 有人知道發生了什么嗎？

我的Java語言 ：

<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..語法讀取值了。