Отправка формы ajax на сервер с помощью jquery


Опубликованно 08.08.2018 11:39

Отправка формы ajax на сервер с помощью jquery

Как часто вы сталкивались с тем, что по их мнению неверные данные ввели, почему страницу удалил персонала и полностью введенные символы в полях. Чтобы исправить это, есть очень популярный подход к построению пользовательского интерфейса, и его зовут Аякс. Он оказывается во многих проектах и по-разному используются. Отправка формы ajax: подключение библиотек

Подключите библиотеку jquery к index.php.

<head> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> </head>

Есть еще один способ активации jquery в документ. Вам нужно скачать библиотеку с официального сайта jquery, поместите его в нужную папку и вставить ссылку следующим образом:

<head> <sctipt type="text/javascript" src="/js/jquery.js"></script> </head> Подключение и Настройка документов

1. Создайте в папке с веб-сайта Document Format .php с любым подходящим именем - он будет формы ajax php. В нем можно написать, как формат появится текст с сообщением. Например form1.php.

2. В папке с файлами создать файл javascript .js с любым именем. Например form.js.

3. Закройте эту папку на вашем документе.

<head> <script type="text/javascript" src="/js/form.js"></script> </head>

4. Создайте форму со следующими параметрами:

<form action="form1.php" method="post"><!--form1.php эти shape-файл в папке сайта--> <p><input type="text" name="login"></p> <p><input type="password" name="pass"></p> <p><input type="submit" value="Отправить"></p> </form>

Там вы обязательно создавать поля для ввода ваших данных.

5. Перейдите в файл form1.php в каталоге с сайтом, в котором вы пишете:

<? var_dump($_POST); ?>

Ну, если форма отображается в браузере, чтобы получить информацию о данных.

В этом файле вы можете написать то, что вы видите или каким образом. Так же циклы можно написать здесь или алгоритмов. Отправка формы ajax jquery

1. В созданном файле form.js вы должны написать код, который отвечает за то, чтобы файл работал после полной загрузки страницы.

$(document).ready(function(){ //Здесь выполняется наш следующий код });

2. Тогда вам необходимо на кнопку submit. Сделайте все это в одном файле.

$("form").submit(function(event) { event.preventDefault(); //здесь будет написан следующий код });

Первая часть кода отвечает за выбор элемента на странице, а вторая - для стандартных действий.

3. Тогда, например, взять отправку формы ajax хорошее при передаче данных.

$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, Process Data: false success: function(result){ alert(result); } });

Внизу каждой настройки подробно. type-это тип запроса, который проходит в форме; так как ПОСТ, то соответствующий тип запроса; this - выбор элемента внутри структуры; attr - сокращенно от attraction (притяжение), то есть некий параметр выбранной цели (форма); url - параметр, отвечающий за то, куда запрос будет отправлен; в данном случае - то, что написано в параметрах формы (form1.php); data указывает данных формы; contentType - отвечает за отправку заголовков на сервер; в этом случае не надо; кэш - несет ответственность за сохранение кэша у пользователя; Process Data - ответственный за преобразование данных в строку; success показан результат успешной передачи данных; поэтому, если передача данных успешно, поэтому действия функции.

4. Готово, теперь при отправки ajax формы вы можете получить данные без обновления страницы.

Результат можно изменить с помощью файла form1.php где можно указать, что будет выводиться точно в результате. Например

<? echo "Login: $_POST[login]"; ?>

Вы можете поэкспериментировать и создать проверку на правильность ввода определенных данных: если данные не верны, то нужное сообщение, и еще направляет на нужную страницу. Кроме того, возможно, что только ваша душа.

Есть также отправку данных на сервер асинхронно. Это, когда пользователь вводит текст, и он сразу выделяет красным цветом, о том, что введенные данные верны. Об этом есть множество руководств в просторах Интернета, где все доходчиво объясняет и показывает на примерах. Вывод

Несомненно, ajax - полезный инструмент в создании сайтов. Качественных сайтов и интерфейсов, это просто необходимо. Стоит отметить, что это очень важно jquery для полного понимания картины и тот факт, что в коде написано, потому что простой копипаст не всегда может помочь и научить их, чтобы понимать коды. Всегда стоит помнить, что обновлены языковые версии, и некоторые функции не могут просто исчезнуть. Поэтому не все решения могут быть актуальны, часто написанный код просто не работает или дает не тот результат, который бы я хотел видеть на экране. Автор: Владислав Астраханцев 7. Август 2018



Категория: Интернет