аватар |

Статьи / jQuery /

Простые примеры работы jQuery, Ajax и PHP


1. Создаём простой AJAX запрос в jQuery


Пример всего из двух файлов.

Код HTML (index.html)

<html>                                                                  
<head>                                                              
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">   
$(document).ready(function(){

   $("#send").click(function(){
      $("#status").load("example.php","y=Yes&n=No");
   })

});             
</script> 
                                                     
</head>
<body> 
<p id="status">Содержание блока изменится согласно проработке файла example.php</p>
<input id="send" type="button" value="Передать данные скрипту" />
</body>
</html>


Код PHP (файл example.php)

<?php
// Заботимся о файловой структуре...
header("Content-type: text/plain; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// Получаем и проверяем...)
if (isset($_REQUEST['y'])) { $y = stripslashes($_REQUEST['y']); if ($y == '') { unset($y);} } 
if (isset($_REQUEST['n'])) { $n = stripslashes($_REQUEST['n']); if ($n == '') { unset($n);} } 

echo "Получили переменные <strong>$y</strong> и <strong>$n</strong> . Всё работает!";
?>

Смотрим как работает!)

Демонстрация Скачать исходники



2. Действия в процессе ожидания jQuery - Ajax


Сначала коротко о методах.

Метод ajaxSend() выполняет переданный в него код во время отправления AJAX запроса.
Метод ajaxComplete выполняет переданный в него код после завершения выполнения AJAX запроса (при этом неважно произошла ошибка или нет).
Метод ajaxSuccess выполняет переданный в него код, если выполнение AJAX запроса завершается успешно.
Метод ajaxError выполняет переданный в него код, если выполнение AJAX запроса завершается с ошибкой.

С помощью данного кода можно установить, например, анимированное изображение (часы, круг, линия и тд), которое будет отображаться в процессе загрузки и закрываться в случае конца процедуры.

$(document).ready(function(){

   $("#status").ajaxSend(function(){
      $("#img1").css("display","block"); /* отправили данные - показали картинку */
   })
   $("#status").ajaxComplete(function(){
      $("#img1").css("display","none"); /* все готово - убрали картинку */
   })
   $("#send").click(function(){
      $("#status").load("example.php","y=Yes&n=No");  /* проработаем сценарий... */
   })

});


3. Пример отправки данных из формы и полей ввода jQuery + Ajax + PHP



Код HTML (index.html)

<html>                                                                  
<head>                                                              
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<script type="text/javascript">   
$(document).ready(function(){

$("#send").click(function(){

 $("#status").load("example.php","name="+$("#name").val()+"&email="+$("#email").val()+"&text="+$("#text").val()); /* Так мы собираем данные из форм и сразу отправляем! */

})

});             
</script> 
                                                     
</head>
<body> 
<p id="status"></p>
Ваше имя
<p><input id="name" name="name"></p>
Ваш email
<p><input id="email" name="email"></p>
Cообщение
<p><textarea rows="5" id="text" name="text"></textarea></p>
<input id="send" type="button" value="Передать данные скрипту" />
</body>
</html>


Код PHP (файл example.php)

<?php
// Заботимся о файловой структуре...
header("Content-type: text/plain; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);

// Получаем и проверяем...)
if (isset($_REQUEST['name'])) { $name = stripslashes($_REQUEST['name']); if ($name == '') { unset($name);} } 
if (isset($_REQUEST['email'])) { $email = stripslashes($_REQUEST['email']); if ($email == '') { unset($email);} }
if (isset($_REQUEST['text'])) { $text = stripslashes(nl2br($_REQUEST['text'])); if ($text == '') { unset($text);} }

// Здесь можно вставить схему отправки писем
// Но об этом ниже (ссылка на статью с кодом и мануалом)

echo "$name, cпасибо за обращение!Ваще сообщение отправлено!";
?>

Смотрим пример работы!

Демонстрация Скачать исходники


Поскольку это практически готовая форма обратной связи, то вот ссылка того, как отсылать письма на php.

Ещё буду дополнять примерами! Если есть пожелания, пишите в комментариях!

Спасибо за внимание!
 



Распечатать
Похожие статьи
07 мая 2014 11:23 Как создать кнопку вверх или вертикальное прокручивание страницы на jQuery?
04 декабря 2013 14:24 Как сделать чекбокс для активации кнопки или другого элемента? jQuery
18 июня 2013 14:12 Создаём всплывающее модальное окно jQuery
06 июня 2014 11:26 Как распечатать web-страницу с помощью jQuery?
21 января 2014 11:15 Как поменять блоки и другие элементы местами с помощью jQuery?


Комментарии к статье (vk.com)