Node、Express＆vanilla JSでのPOST Ajax呼び出し

Question

私はvanilla JSでいくつかのajax呼び出しをしようとしています。 バックエンドでは、エクスプレスフレームワークのノードで作業しています。

送信したいデータが実際にバックエンドに届いていないようです。誰が何が起こっているアイデアを持っていますか？

マイ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> 

、すべてが、それは、私がフォームを提出したいキーと値を返す必要があるようであるように思われます。 I console.log(req.body.tag)、私はちょうどUndefinedを取得し、req.bodyはちょうど空のオブジェクトである場合には

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

：

これが私のバックエンドのセットアップです。 データベースtag_nameはNULLであってはならないため、データベースでもエラーが発生します。

ネットワークパネルを見ると、503サービスは利用できませんと表示されます。

ご回答いただきありがとうございます。

Answer 1

マルチパート/フォームデータの処理には、multerを使用してください。

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

サーバー側はJSON

app.use(bodyParser.json()); 

にbodyParserを設定して、今、あなたのことができるようにする必要があります

また、あなたは、この方法のように、サーバーにJSON形式のデータを送信することができますreq.body..構文で値を読み取ります。