Как сделать отправку формы с использованием JavaScript и асинхронного запроса

Dmitriy / / JavaScript

В этой статье рассматривается отправка такой формы на чистом JavaScript без использования дополнительных библиотек. Такую технологию принято называть Ajax, но на деле это не совсем так. Ajax расшифровывается как “асинхронный JavaScript и XML”, но в этом, как и во многих других случаях XML не используется. Тут применяются просто асинхронный JavaScript-запрос.

Например, имеем такую форму:

<form method='GET' action='form.php’>
    <p>
        <label for='ti'>Заголовок:</label>
        <input type='text' name='title' id='ti'>
    </p>
    <p>
        <label for='te'>Текст:</label>
        <textarea name='text' id='te'></textarea>
    </p>
    <p>
        <input type='submit' name='subm' value='Отправить'>
    </p>
</form>

Первое, что нужно сделать для возможности ее отправки через асинхронный запрос — назначить обработчик соответствующего события. Это событие называется onsubmit. Назначить его можно как динамически, используя JavaScript, так и просто вписать в тег form. Для простоты реализуем второй вариант. Тогда тег form будет выглядеть так:

<form method=’GET’ action=’form.php’ onsubmit=’sendForm(event);’>

Тут назначено, чтобы при событии отправки формы вызывалась функция sendForm, которую еще предстоит написать. Однако, если оставить этот код таким, то вместе с вызовом функции sendForm всё равно произойдёт отправка формы стандартным образом. Для предотвращения этого в обработчике onsubmit надо вернуть значение false. В итоге получится следующее:

<form method='GET' action='form.php' onsubmit=' sendForm(event); return false; '>

Теперь необходимо написать функцию sendForm.

function sendForm(e)
{
    let form=e.target;
    let url=form.action;
    let title=document.getElementById('ti').value;
    let text=document.getElementById('te').value;
    sendAjax(url,title,text);
}

Эта функция получает url-адрес для отправки, а также заголовок и текст из соответствующих полей формы. Затем она вызывает функцию sendAjax для отправки данных на сервер, которую тоже надо создать:

function sendAjax(url,title,text)
{
    let req = createRequest();
    alert(req);
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
        if(req.status == 200) alert('Отправка формы выполнена');
    }
}
    req.open('GET',url+'?title='+title+'&text='+text,true);
    req.send(null);
}

Эта функция получает объект запроса из функции getXmlHttp, назначает ей обработчик onreadystatechange, который вызывается при изменении состояния запроса. После этого она создает GET-запрос с нужными параметрами — передаваемым заголовком и текстом, а также их значениями и выполняет отправку запроса. В случае, если запрос отправлен успешно, то сработает этот код:

alert('Отправка формы выполнена');

При этом пользователю будет отображено окошко с сообщением.

Последнее, что нужно сделать — это создать функцию CreateRequest(). Она возвращает объект для ajax-запросов. Функция сделана такой для обеспечения кроссбраузерности и часто встречается в интернете.

function createRequest()
{
    var Request = false;
    if (window.XMLHttpRequest)
    {
        //Gecko-совместимые браузеры, Safari, Konqueror
        Request = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        //Internet explorer
        try
        {
            Request = new ActiveXObject('Microsoft.XMLHTTP');
        }
        catch (CatchException)
        {
            Request = new ActiveXObject('Msxml2.XMLHTTP');
        }
    }

    if (!Request)
    {
        alert('Невозможно создать XMLHttpRequest');
    }
return Request;
}

В итоге, полный текст страницы будет следующим:

<html>
<head>
<script>
function createRequest()
{
    var Request = false;
    if (window.XMLHttpRequest)
    {
        //Gecko-совместимые браузеры, Safari, Konqueror
        Request = new XMLHttpRequest();
    }
    else if (window.ActiveXObject)
    {
        //Internet explorer
            try
            {
                Request = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch (CatchException)
            {
                Request = new ActiveXObject('Msxml2.XMLHTTP');
            }
    }

    if (!Request)
    {
        alert('Невозможно создать XMLHttpRequest');
    }
return Request;
}

function sendAjax(url,title,text)
{
    let req = createRequest();
    alert(req);
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if(req.status == 200) alert('Отправка формы выполнена');
        }
    }
    req.open('GET',url+'?title='+title+'&text='+text,true);
    req.send(null);
}

function sendForm(e)
{
    let form=e.target;
    let url=form.action;
    let title=document.getElementById('ti').value;
    let text=document.getElementById('te').value;
    sendAjax(url,title,text);
}

</script>
</head>
<body>
    <form method='GET' action='form.php' onsubmit=' sendForm(event); return false; '>
        <p>
            <label for='ti'>Заголовок:</label>
            <input type='text' name='title' id='ti'>
        </p>
        <p>
            <label for='te'>Текст:</label>
            <textarea name='text' id='te'></textarea>
        </p>
        <p>
            <input type='submit' name='subm' value='Отправить'>
        </p>
    </form>

</body>
</html>
Уникальность ADVEGO - 96%

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