ノード・サーバーへのフォーム・データの送信

Question

いくつかのフォーム・データをエンドポイントに送信しようとしています。

は、ここに私のクライアント側のコードです：

<form name="form" action="http://localhost:8080/geodata" method="post"> 

     <label for="minlat"> MinLat: </label> 
     <input type="text" name="MinLat" value="0"><br> 
     <label for="maxlat"> MaxLat: </label> 
     <input type="text" name="MaxLat" value="1"><br> 
     <label for="minlong"> MinLong: </label> 
     <input type="text" name="MinLong" value="0"><br> 
     <label for="maxlong"> MaxLong: </label> 
     <input type="text" name="MaxLong" value="1"><br> 

     <button type="submit" class="btn btn-success"> Submit <span class="fa fa-arrow-right"></span></button> 

     </form> 

    <script> 

    $(document).ready(function() { 
     $("#form") 
      .submit(function(event) { 

       var formData = { 
       'minLat'   : $('input[name=MinLat]').val(), 
       'maxLat'   : $('input[name=MaxLat]').val(), 
       'minLong'   : $('input[name=MinLong]').val(), 
       'maxLong'   : $('input[name=MaxLong]').val() 
       }; 

       $.ajax({ 
        url: $form.attr('action'), 
        data: formData, 
        cache: false, 
        dataType: 'json', 
        processData: false, 
        type: 'POST', 

        }).done(function(data) { 

         console.log(data); 
        }); 
       event.preventDefault(); 
      }); 
    }); 
    </script> 

私は、サーバー側のコードにenpoint（express.js）があります。

var express = require("express"); 
var path = require("path"); 
var bodyParser = require("body-parser"); 

var app = express(); 
app.use(express.static(__dirname + "/public")); 
app.use(bodyParser.json()); 
    // Initialize the app. 
var server = app.listen(process.env.PORT || 8080, function() { 
    var port = server.address().port; 
    console.log("App now running on port", port); 
}); 

app.post("/geodata", function(req, res) { 
    console.log(req.body); 
    res.send("hi"); 
}); 

を私はエンドポイント/このフォームデータを送信したいですそのデータを使用して結果をクライアント側に返すことができます。まず、私がsubmitを押すと、私の端末に空の{}が得られます（これはサーバサイドのrequest.bodyです）。私はこのrequest.bodyのフォーム値を期待していましたが、受信しませんでした。フォームの値が送信されていることを確認するにはどうすればよいですか？

res.send（ "hi"）は、最初のページを新しいページにリダイレクトし、そこに "hi"を表示します。私はajax呼び出しを行っていたので、レスポンスは記録されず、Webページは最初のページに残りますか？

Answer 1

dataType： 'json'は、サーバーからのjsonデータを期待していることを意味します。データタイプを削除して追加する

data : JSON.stringify(formData), 
    contentType: 'application/json', 

contentTypeは、サーバーに送信するデータのタイプです。タグは、（）押された場合にHTML5フォームが要求自体を実行するよう、フォームのアクションに「/ジオ」（エンドポイント）

はまた、あなたがいけない

Answer 2

変更はAJAXリクエストを行う必要があり/クリック。

あなたのページには、これまでに応答「/地理データ」ルート から送り返されるとreq.bodyは、フォームデータ