Отправка данных формы на сервер узла

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 («привет») перенаправляет мою начальную страницу на новую страницу и печатает «привет». Поскольку я сделал вызов ajax, не следует ли отвечать только на регистрацию, а веб-страница остается на начальной странице?

Answer 1

dataType: 'json' означает, что вы ожидаете данные json с сервера. удалите dataType и добавьте это

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

contentType будет типом данных, которые вы отправляете на сервер.

Answer 2

Изменение формы действия на «/ геоданных» (конечная точка)

также вам не нужно, чтобы сделать запрос AJAX в HTML5 формы будет выполнять сам запрос, если тег() нажата/щелкнул.

после нажатия кнопки саммита вашей страницы станет то, что когда-либо ответ, который отправляется обратно от «/» геоданного маршрута и req.body возвращает объект, представляющий данные формы