FormDataを使って、サーバーにデータを送信する

formのデータをjavascriptを使って、node.jsのサーバに送信しました。

HTMLのフォームは、次の通り。
/api/mapにデータを送ります。
onclickの記述が無ければ、ボタンをクリックするとページが表示されます。
今回は、画面の遷移を行わないように、javascriptで処理します。
javascriptで処理するため、methodやactionの指定は不要のはずですが、テストには便利なので残しました。
参考までに、formに、onsubmitイベントを記述する方法と迷いました。

<form method="POST" action="/api/map">
<input type="text" name="name"/>
<input type="hidden" name="lng" value="138"/>
<input type="hidden" name="lat" value="38"/>
<button onclick="regPoint(this);return false;">SET</button>
</form>;


javascriptの記述。

  function regPoint(el){
    let form = el.parentElement;
    let formData = new FormData(form);

    fetch("/api/map",{
      method: "POST",
      body: formData
    }).then((response) =>{
      if(response.ok){
        alert("ok");
      }else{
        alert("ng");
      }
    })
  };


これをnode.jsサーバーで受け取るようにしましたが、うまくいかず、悩みました。
FormDataを使うと、multipart/form-dataでデータが送られるため、Express(node.js)側で、修正が必要でした。
'connect-multiparty'モジュールを使って解決しました。

var multipart = require('connect-multiparty')
var multipartMiddleware = multipart();

app.post('/api/map', multipartMiddleware, function(request, response) {
    console.log("Name: " + request.body.name);

}