Ajax отправка данных из формы

Здесь представлен способ отправки данных из формы через Ajax с помощью библиотеки jQuery. Сделайте ваш сайт еще более современным и интерактивным. Такой отправкой данных мы избавляемся от перезагрузки страницы, после нажатия на кнопочку Submit в форме.

Демо можно посмотреть тут

Как это делается? Все как обычно довольно просто, jQuery и его плагины уже обо всем для нас позаботились 🙂

Нам понадобится плагин jquery.form.js. Скачать можно тут, либо с официального сайта

Сам код:

<!-- Подключаем jQuery и плагин -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>
 
<!-- Создание формы, здесь приведена самая простейшая для примера -->
<form id="FormaAjax" action="action.php" method="post">
  Поле 1: <input type="text" name="pole1" />
  Поле 2: <textarea name="pole2"></textarea>
  <input type="submit" value="Отправить данные" />
</form>
 
<!-- Здесь делаем блок для вывода результата  -->
<div id="result"></div>
<!-- Сам скрипт обработки формы -->
<script type="text/javascript">
	$(document).ready(function(){
	       $("#FormaAjax").ajaxForm(function() {
//Здесь можно прописать какие действия будут делаться после отправки формы,
// Например под формой будет выходить какой-нибудь текст
// Делаем тоже через jQuery вот так:
               $("#result").load("result.php");
	   });
	});
</script>

То есть после нажатия на кнопку Submit в форме данные отправятся на скрипт action.php со всеми данными методом post, где и будут обработаны c единственной разницей, что страница не перезагрузится.

После чего содержимое Div с idшником «result» заполнится выводом скрипта result.php (Если мы хотим чтобы форма тоже заменялась, то кладем форму в этот div).

То есть, можно в action.php к примеру заносить данные в базу а в result.php выводить их из базы на страницу. Либо делать это все в одном скрипте, вариантов масса, все ограничено лишь фантазией 🙂

Комментарии

8 комментариев

  • День добрый!
    Подскажите, пожалуйста, как это сделать в одном скрипте? У меня и так и так получается три файла. Допустим, index.html, action.php и result.php

    Буду благодарен за ответ.

  • @Константин
    Один из вариантов передавайте вашему скрипту какое-нибудь значение в зависимости от которого он будет либо выводить форму, либо заносить данные либо еще какие-либо действия делать.

  • А как отправить форму не по кнопке submit а через JS функцию типа senf() да чтоб при этом страница не перегружалась??

  • Спасибо большое за скрипт, но у меня появилась проблема с кодировкой. В базу заносятся иероглифы и выводятся на экран соответственно они же. Как решить проблему ?

  • Ребята, напишите все что нужно для работоспособности сего урока как в демке.

    «//Здесь можно прописать какие действия будут делаться после отправки формы,
    // Например под формой будет выходить какой-нибудь текст
    // Делаем тоже через jQuery вот так:»

    Не вот так что там можно что-то прописать, а пропишите что надо, и файл обработчик пожалста… А то вроде материал есть, а хрен что получается=)

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

Ваш e-mail не будет опубликован.

Sidebar