T
T
tory_kuzya2017-11-24 14:02:51
JavaScript
tory_kuzya, 2017-11-24 14:02:51

Sending data (authorization) via httprequest (js). How to split into 3 classes for universality?

It is necessary to implement user authorization: sending data (login and password) via httprequest (in js). Those. you need to create classes, and then on a large number of views (pages) only pull methods for sending data.
This is how it works (but there are 2 classes, i.e. there is no way to change the settings):

<body>
    
    <div class="container">

      <form id="form" class="form-signin" role="form" method="post" action="">
      <h2 class="form-signin-heading">Please sign in</h2>
      <input type="text" id="login" name="login" class="form-control" placeholder="Login" required autofocus>
      <input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
      <label class="checkbox">
        <input type="checkbox" value="remember-me"> Remember me
      </label>
      <button class="btn btn-lg btn-primary btn-block" type="submit" id="submit">Sign in</button>
      </form>

    </div> <!-- /container -->
               <script src="js/login.js"></script>
    </body>

$(document).ready(function() {
  $("#form").submit(function(e){
    e.preventDefault();	
  });
  $("#submit").click(function(){
    login.senduth();
  });
});

class Http {

  constructor(params) {
    this.params = params;
  }

  send(params) {
  const http = new XMLHttpRequest()
  http.open('POST', 'login.json', false)
  http.setRequestHeader('Content-type', 'application/json')
  http.send(JSON.stringify(params))
  http.onload = function() {
    //alert(http.responseText)
  }
  }

}

class Login {

  senduth() {
  const params = {
    login: document.querySelector('#login').value,
    password: document.querySelector('#password').value
  }
    let http = new Http(params);
  http.send(params);
  }

}

let login = new Login();

How to split it into 3 classes for universality: class Http (creating a request), class Settings (request settings: method, url, async) and class Login (login and password)?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question