Отправка формы ajax на сервер с помощью jquery
Опубликованно 01.09.2018 01:24
Как много раз вы сталкивались с тем, что ввели неправильные данные, из-за страницы частей и полностью удаляет записи в поля символа. Чтобы исправить это, существует достаточно популярный подход к созданию пользовательского интерфейса, и имя ему - "аякс". Он встречается во многих проектах и используется различными способами. Отправка формы 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 Года
Категория: Интернет
