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


Опубликованно 01.09.2018 01:24

Отправка формы 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. Создайте папку с сайтом в формате документа .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 это в виде файла в папке сайта--> <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 нужно написать код, который отвечает за то, что файл работал после полной загрузки страницы сайта.

$(документ).ready(function(){ //Он будет работать наш следующий код });

2. Затем вы должны настроить кнопки submit. Делайте все это в одном файле.

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

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

3. А затем, например, возьмем отправка формы ajax на сбор данных.

$.ajax({ типа: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });

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

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

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

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

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

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

Без сомнения, ajax является полезным инструментом в создании сайтов. Для того чтобы сделать качество страницы и интерфейсы, просто необходимо. Стоит отметить, что это очень важно знать, jquery для полного понимания картины и то, что написано в коде, действительно, просто "копировать-вставить" не всегда может помочь, и у вас сформируется понимание кода. Всегда полезно помнить, что языковые версии, обновления, и некоторые функции могут просто исчезнуть. Таким образом, не все решения, которые могут быть эффективны, часто пишет код просто не работает или дает не тот результат, что я хотел бы видеть на экране. Автор: Владислав Еще Один Шанс 7 Августа 2018 Года



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


Спонсор

Спонсор

Спонсор

Тут ваша реклама