Создание простой jQuery Ajax формы с отправкой данных на сервер

Создание простой jQuery Ajax формы с отправкой данных на сервер

Асинхронная передача данных через ajax - отличное решение для снижения нагрузки на веб-сайт!
Для дальнейшей работы требуется наличие установленного локального сервера (Я рекомендую использовать open server) и jquery ajax для (асинхронного взаимодействия) без перезагрузки страницы.

Структура главного скрипта index.php с ajax формой и jquery ajax инициализацией:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Создание ajax формы</title>
</head>
<link rel="stylesheet" href="css/style.css">
<body>

<div class="wrapper">
    <form action="javascript:void(null);" onsubmit="authAjax()" method="post">
        <input id="login" name="login" placeholder="Введите логин">
        <input id="password" type="password" name="password" placeholder="Введите пароль">
        <input id="submit" type="submit" value="Вход">
    </form>
</div>

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
    function authAjax() {

        //Инициализируем переменные для удобного доступа к input полям
        var login = $("#login");
        var pass = $("#password");

        //Инициализируем новые переменные и выдергиваем введеные данные в input поля
        var val1 = login.val();
        var val2 = pass.val();

        //Если данные пустые, то добавляем класс error
        //Кликнув по input полю, класс error удаляется
        //Если данные не пустые, то удаляем класс error
        if (val1 === "") {
            login.addClass("error");
            login.click(function () {
                login.removeClass("error");
            });
        } else {
            login.removeClass("error");
        }

        //Если данные пустые, то добавляем класс error
        //Кликнув по input полю, класс error удаляется
        //Если данные не пустые, то удаляем класс error
        if (val2 === "") {
            pass.addClass("error");
            pass.click(function () {
                pass.removeClass("error");
            });
        } else {
            pass.removeClass("error");
        }


        //Если данные в двух input полях не пустые, то делаем ajax запрос
        if (val1 !== "" && val2 !== "") {
            $.ajax({
                url: 'init.php',
                data: 'login=' + val1 + '&password=' + val2,
                type: 'POST',
                success: function(data){
                    alert(data + ', Добро пожаловать!');
                },
                error: function () {
                    alert('ошибка');
                }
            });
        }

    }
</script>
</body>
</html>

Скрипт обработчик, для получения данных через jquery ajax прямиком в init.php:

<?php

/*Если $_POST['login'] и $_POST['password'] инициализированы и не пусты, то
 отдаем логин обратно.
*/
if (!empty($_POST['login']) && !empty($_POST['password'])) {
    echo $_POST['login'];
}

Таблица стилей style.css для стилизации ajax формы:

body {
    margin: 0;
}

.wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

form {
    border: 1px rgba(55, 213, 255, 0.6) solid;
    padding: 40px;
    background: rgba(255, 255, 255, 0.5);
}

input {
    height: 40px;
    border: 2px rgba(55, 213, 255, 0.6) solid;
    width: 100%;
    margin-bottom: 20px;
    outline: none;
    box-sizing: border-box;
    text-indent: 10px;
    font-size: 14px;
}

input[type="submit"] {
    background: rgba(55, 213, 255, 0.6);
    color: white;
    font-size: 20px;
    cursor: pointer;
    border: none;
    margin-bottom: 0;
    text-indent: 0;
    transition: background .25s ease-in-out;
}

input[type="submit"]:hover {
    background: rgba(54, 191, 229, 0.6);
}

.error {
    border: 2px transparent solid;
    border-color:  rgba(255, 70, 14, 0.6);
    transition: border-color .25s ease-in-out;
}

После отправки данных из ajax формы на скрипт обработчик init.php вы можете производить различные манипуляции и возвращать данные обратно конструкцией echo или return.

Базовые параметры jquery ajax:

url - Скрипт или адрес, куда данные из ajax формы(input полей) будут отправляться асинхронно.

data - Указываем под каким именем и с каким содержимым отправлять данные на скрипт обработчик.

type - Указываем тип передачи данных из ajax формы. POST является защищенным и наиболее предпочтительным способом передачи данных.

success - Этот параметр отработает после успешной передачи данных.

error - В случае ошибки будет задействован параметр error.

Читайте также:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *