Как отправить данные формы на сервер

Question

Я хочу создать небольшой сайт. Я почти закончил бэкэнд, но я не могу найти, как я могу отправить данные формы на сервер. Вот моя попытка, и я хочу отправить данные на локальный хост, работающий на порту 3000, например:

jQuery('#signUp-Form').on('submit',function(e){
    e.preventDefault();
    console.log('Sending data');
    var name = jQuery('[name = username]').val();
//    socket.emit('sign-up',{
//      username: jQuery('[name = username]').val(),
//      password: jQuery('[name = password]').val()
//    });
});

Я могу сделать с socket.io, но, тем не менее, я хочу использовать POST,GET etc, а на стороне сервера я построил свой сервер с экспрессом.

Я могу получить имя из поля в var name, и теперь я хочу отправить его на сервер: вот функция, которая будет обрабатывать этот запрос. Только первые две строки:

app.post('/login',(req,res) => {
  var body = _.pick(req.body, ['username', 'password']);

Теперь мой вопрос: как я могу отправить данные в таком формате, чтобы '/ login' соответствовал шаблону, а req.body содержал только имя.

Это основной вопрос, но я нигде не вижу, как я могу это сделать.

Answer 1

Хан, похоже, вы пытаетесь использовать два способа отправки формы: не AJAX и AJAX. Из вашего вопроса не ясно, какой метод предназначен, но я покажу оба метода:

Non-AJAX

Использование <form action="/login" method="POST">:

<form id="myform" action="/login" method="POST">
    <input type="text" name="username">
    <input type="password" name="password">
    <button type="submit">login</button>
</form>

Этот метод обновит страницу и сделает запрос POST для / входа в систему, отправив кодированные * url данные , например:

username=nha&password=asonteu

AJAX

При использовании AJAX страница не будет обновляться , и вы должны отправлять данные программно:

$( "#myform" ).on( "submit", function( event ) {
    event.preventDefault();
    let data = $( this ).serialize();
    //make our request here
    $.post( "/login", function( data ) {
        console.log(data);
    });
});

serialize() также URL кодирует данные формы.

Ваш сервер должен обрабатывать любой ожидаемый формат данных (для правильного извлечения полей). Кодировка URL полезна, но позже вы увидите JSON или, возможно, protobufs . На самом деле не имеет значения, какой формат вы используете, если клиент и сервер согласны.

ПРИМЕЧАНИЕ. С POST данные будут в теле запроса

Надеюсь, это поможет!