MYSQL
PHP
HTML
CSS
JS

jQuery. Динамическая загрузка контента - Ajax

Ajax - это JavaScript технология, позволяющая динамически обращаться к серверу и получать от него данные. При этом веб-страница не перезагружается (данные отправляются и получаются в фоновом режиме). Ajax полезен, при желании веб-разработчика упростить работу с сайтом и в целом хорошо сказывается на юзабилити.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<script>
function check() {
  $.ajax({
    type: "POST",
    url: "login.php",
    data: {
      login: $('#login-input').val(),
      pass: $('#pass-input').val()
    },
    success: function (msg) {
      if (!data.error) {
        user.login = data.login;
        alert("Вы вошли в систему как " + user.login);
      } else {
        alert("Логин или пароль не подходят");
      }
    }
  });
}
</script>
 
<input id="login-input" placeholder="Login" />
<input id="pass-input" placeholder="Password" />
<input onClick="check()" type="button" />
type - указывает на способ передачи данных - основные GET, POST и DELETE (ещё бывают: PUT, UPDATE, OPTIONS) url - адрес по которому будут обрабатываться входные данные и откуда вернётся результат data - входные данные success - выполняется при успешном завершении запроса (с возвращеним результата со статусом 2xx) Пример скрипта, который обработает такие входные данные (на PHP): login.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
const ADMIN_LOGIN = 'admin';
const ADMIN_PASS = 'nimda';
 
$login=$_POST['login'];
$password=$_POST['pass'];
 
header("Content-type: application/json");
if ($login === ADMIN_LOGIN && $password === ADMIN_PASS) {
   json_encode([ "login" => ADMIN_LOGIN ]);
} else {
   json_encode([ "error" => "Login or pass invalid" ]);
}
Спасибо за внимание.
Если статья Вам показалась незаконченной или Вы знаете как её улучшить, пожалуйста сообщите мне e@gohtml.ru

Случайные уроки по этой теме:

Обработчики событий. onClick, onMouseMove Многоуровневый динамический список на Javascript Javascript Paint с использованием Canvas Плавная прокрутка страницы (scroll). jQuery Исключения в JS. try catch
↑