Отправка формы на сервер и получение данных обратно?

Question

[UNy]

Отправляю форму на сервер:

<form action="http://localhost:3000/add" method="post" id="myform">
    <input type="text"  value="" placeholder="username" id="login-name" name="name">
    <input type="password"  value="" placeholder="password" id="login-pass" name="password">
    <button type="submit" class="btn btn-default">ВХОД</button>
</form>

Получаю её на сервере:

app.post('/add',urlencodedParser,function (req,res) {
  console.log(req.body);
});

Как сделать отправку Ajax'ом? Что бы я мог отправить с сервера данные формы назад и отобразить их.

Answer 1

[UNy]

Получилось сделать таким образом:

<form id="myform">
    <input type="text"  placeholder="username" id="login-name" name="name">
    <input type="password"   placeholder="password" id="login-pass" name="password">
    <input type="button" id="formsub" value="Вход">
</form>

<div id="tester"></div>
<script>
    let myButton = document.getElementById('formsub');
    myButton.addEventListener('click',function (ev) {
        let name = document.forms['myform'].elements['login-name'].value;
        let pass = document.forms['myform'].elements['login-name'].value;

        let obj = {
            name:name,
            pass:pass
        };
        fetch('/add', {method: 'POST',body:JSON.stringify(obj),headers:{'content-type': 'application/json'}})
                .then(function (response) {
                    return response.json();
                })
                .then(function (data) {
                    let us = document.createElement('h2');
                    us.innerHTML = data.name;
                    let mydiv = document.getElementById('tester');
                    mydiv.appendChild(us);
                })
                .catch(alert);
    })
</script>

Comments

[UNy]

Еще один вариант:

<form name="person">
    <input type="text"  placeholder="username" id="login-name" name="name">
    <input type="password"   placeholder="password" id="login-pass" name="password">
    <input type="button" id="formsub" value="Вход">
</form>

let myButton = document.getElementById('formsub');
    myButton.addEventListener('click',function () {
        let data = new FormData(document.forms.person);
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:3000/add', false);

        xhr.send(data);
        let body=JSON.parse(xhr.response);
        console.log(body);

        let us = document.createElement('h2');
        us.innerHTML = body["name"];
        let mydiv = document.getElementById('tester');
        mydiv.appendChild(us);

    })

При таком варианте на сервере использовал дополнительный модуль multer который парсит форму:

let multer = require('multer');
let upload = multer();
app.post('/add',upload.fields([]),function (req,res) {
  console.log(req.body);
  res.json(req.body);

});

Answer 2

[Анатолий]

Ответ легко ищется поисковиком.

var data = $('#myform').serialize();
$.ajax({
   type: "POST",
   url: "http://localhost:3000/add?",
   data: data,
   success: function(msg) {
     alert(msg);
   }
 });

И не забудьте добавить на сервер функцию ответа.

Comments

[UNy]

Мне надо без Jquery(

[Анатолий]

UNy, указали бы в вопросе, а то телепаты в отпуске.
Тем не менее, ответ легко ищется поисковиком.

var form = document.querySelector('form');
var data = new FormData(form);
var req = new XMLHttpRequest();
req.open('POST', 'http://localhost:3000/add', false);
xhr.send(data);
if (xhr.status != 200) {
  alert(xhr.status + ': ' + xhr.statusText); // пример вывода: 404: Not Found
} else {
  alert(xhr.responseText); // responseText -- текст ответа.
}

[UNy]

Анатолий, теперь получается что мы отправляем форму кнопкой submit и еще самим http запросом. Сервер принимает запрос от submit и пустой объект от http запроса

[Анатолий]

UNy, вместо submit повесьте обработчик на клик.

[UNy]

Анатолий, вот что получилось:

<form action="http://localhost:3000/add" method="post" id="myform">
    <input type="text"  placeholder="username" id="login-name" name="name">
    <input type="password"   placeholder="password" id="login-pass" name="password">
    <button id="formsub">ВХОД</button>
</form>
<div id="tester"></div>
<script>
    let myButton = document.getElementById('formsub');
    myButton.addEventListener('click',function () {
        let form = document.querySelector('form');
        let data = new FormData(form);
        let xhr = new XMLHttpRequest();
        xhr.open('POST', 'http://localhost:3000/add', false);
        xhr.send(data);
    })
</script>

На сервер приходит 2 объекта 1 пустой и 1 нормальный

[Анатолий]

UNy, так вы из формы удалите action и method. У вас поэтому и отсылает. И id в querySelector поменяйте на id форму.

[UNy]

Анатолий, querySelector работает по селектору, а не по id. Я сделал 2 решения, можете посмотреть сверху, правда в 1 из них пришлось использовать дополнительный модуль для парсинга формы.