В этой статье попробуем реализовать часть функции авторизации на сайте. А точнее часть с передачей данных методом POST через функцию fetch с AJAX запросом. Для этого сначала сделаем саму форму, в которой будет вводиться пароль и логин. При этом попробуем реализовать JS скрипт для входа, но сначала только с GET запросом:
<!DOCTYPE html>
<html>
<head>
<title>Форма авторизации</title>
</head>
<body>
<form>
<input type="text" name="login" id="login" placeholder="Логин">
<input type="text" name="pass" id="pass" placeholder="Пароль">
<span onclick="login()">Войти</span>
</form>
<div id="result"></div>
<script>
function login(){
var login = document.getElementById('login').value;
var pass = document.getElementById('pass').value;
fetch('/login_ajax.php?login=' + login + '&pass=' + pass).then(
response => {
return response.text();
}
).then(
text => {
document.getElementById('result').innerHTML = text;
}
);
}
</script>
</body>
</html>/login_ajax.php. Как можно заметить, к адресу страницы ещё добавляются GET параметры, значения которых берётся из текстовых полей.Теперь необходимо сделать скрипт, который будет находиться в файле
/login_ajax.php. В нём будет примитивный механизм "авторизации". По сути это будет код, который всего лишь возвращает текст "Пароль верный" и "Неправильный пароль!". Выглядеть скрипт будет так:
<?php
if($_GET['login'] == 'mouse' && $_GET['login'] == 'cheese'){
echo 'Пароль верный';
}else{
echo 'Неправильный пароль!';
}Но как решили раньше, переделаем пример, чтобы данные отправлялись методом POST. Это нужно для безопасности, потому что такие данные шифруются в отличии от GET параметров (во всяком случае, с сертификатом TLS < 1.3, но могут ещё что-нибудь изобрести...). Для этого нужно воспользоваться вторым параметром функции fetch и узнать, в который можно передать объект с настройками запроса.
Одним из свойств этого метода является "method" (буквально как атрибут тега form). В него можно записать либо 'GET', либо 'POST'. Но на этом нам нельзя ограничиваться, нужно ещё и передать в этот объект переменные запроса. Делается это с помощью свойства "body". В него предаётся объекты класса URLSearchParams, в которых содержатся переменные и их значения. Попробуем продемонстрировать на маленьком примере, вырезанном из нашего кода:
var params = new URLSearchParams('login=' + login + '&pass=' + pass);
fetch('/login_ajax.php', {
method: 'POST',
body: params
});'login=' + login + '&pass=' + pass мы поставили в объект URLSearchParams те же самые параметры, которые раньше передавали через GET запрос. И они переданы одним куском, но часто бывает, что некоторые параметры нужно передавать только при особом условии. Для этого можно воспользоваться методом "set" объекта URLSearchParams, чтобы добавлять новые значения в него. Перепишем наш код в эквивалентный:
var params = new URLSearchParams();
params.set('login', login);
params.set('pass', pass);
fetch('/login_ajax.php', {
method: 'POST',
body: params
});if(a==1) params.set('pass', pass);<!DOCTYPE html>
<html>
<head>
<title>Форма авторизации</title>
</head>
<body>
<form>
<input type="text" name="login" id="login" placeholder="Логин">
<input type="text" name="pass" id="pass" placeholder="Пароль">
<span onclick="login()">Войти</span>
</form>
<div id="result"></div>
<script>
function login(){
var login = document.getElementById('login').value;
var pass = document.getElementById('pass').value;
var params = new URLSearchParams();
params.set('login', login);
params.set('pass', pass);
fetch('/login_ajax.php', {
method: 'POST',
body: params
}).then(
response => {
return response.text();
}
).then(
text => {
document.getElementById('result').innerHTML = text;
}
);
}
</script>
</body>
</html><?php
if($_POST['login'] == 'mouse' && $_POST['login'] == 'cheese'){
echo 'Пароль верный';
}else{
echo 'Неправильный пароль!';
}
