Регистрационная форма на ajax

300

28 марта 2017, 13:26

Необходимо сделать регистрационную форму, которая будет отправлять данные по url и получать ответ от сервера в виде ошибки или наоборот успеха в регистрации в формате .json. Необходимо сделать на js, не на jquery. Серверную часть(если так можно назвать) сделал с использованием node js

var http = require('http');
var url = require('url');
var querystring = require('querystring');
var static = require('node-static');
var file = new static.Server('.', {
  cache: 0
});

function accept(req, res) {
  if (req.url == 'http://blabla/reg') {
    setTimeout(function() {
      file.serve(req, res);
    }, 2000);
  } else {
    file.serve(req, res);
  }
}
// ------ run server -------
if (!module.parent) {
  http.createServer(accept).listen(8080);
} else {
  exports.accept = accept;
}v

Собственно код js:

'use strict';
//Enable || Disable button
var checker = document.getElementById('checker');
checker.onchange = function () {
    document.getElementById('sent').disabled = !this.checked;
};

//Loading data from form to server
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://blabla/registrati', false);
xhr.send([body]);
if(xhr.status != 200) {
    alert('Error ', xhr.status + '' + xhr.statusText);
} else {
    alert(xhr.responseText);
}

Код страницы

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>Sign Up form</title>
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class = "signUp">
        <h1>Sign Up</h1>
        <form name = "sign" method = "POST" action = "#">
            <p class = "username">
                <input type="text" name="name" placeholder="Name" required="required" pattern="[a-zA-Z]+">
            </p>
            <p class = "username">
                <input type="text" name="secondName" placeholder="Second Name" required="required" pattern="[a-zA-Z]+">
            </p>
            <p class = "email">
                <input type="email" name="email" placeholder="Email" required="required" pattern="^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$">
            </p>
            <p class = "gender">
                <select name = "gender[]" required="required">
                    <option value = "male">Male</option>
                    <option value = "female">Female</option>
                </select>
            </p>
            <p class = "password">
                <input type="password" name="password" placeholder="Password" required="required">
            </p>
            <p class = "checkbox">
                <input type="checkbox" name="check" id = "checker">
                <span>Conditions of Agreement</span>
            </p>
            <p class = "submit">
                    <input type="submit" id = "sent" name = "Sent" disabled="true" onclick = "loadData()">
            </p>
        </form>
    </div>
    <script src = "js/common.js"></script>
</body>
</html>

Делаю это впервые. Я не совсем понял что должно передаваться в url. Адрес сервера или форма, или вывод..просьба помочь, благодарю

Answer 1