ресурс для начинающих веб-разработчиков
комплексные веб-услуги по созданию сайтов

Справочный материал по основным языкам программирования и верстки сайтов.

Готовая методика создания простых и сложных динамичных сайтов, с использованием PHP и MySQL.

Использование веб-редактора Adobe Dreamweaver в разработке сайтов.

Использование графических редакторов Adobe Flash, Adobe Photoshop, Adobe Fireworks в подготовке веб-графики.

Разработка веб-сайтов под "ключ".

Разработка отдельных фрагментов сайтов, консультации по вопросам верстки веб-страниц и веб-программирования.

Примеры реализации get-запросов Ajax

Примеры реализации get-запросов

Возьмем знакомый нам пример. Есть параграф с идентификатором par1 и кнопка типа button с идентификатором but1. Нам надо передать серверной странице слагаемые x и y, а назад получить сумму переданных чисел, но сделать это надо с помощью метода get().

Синтаксис метода следующий:

$.get( url [, data ] [, success ] [, dataType ] )

Где:

  1. url - cтрока содержащая URL-адрес куда будет отправлен запрос
  2. data - плоский объект или строка, которая будет отправлена на сервер с запросом.
  3. success(data, textStatus, jqXHR) - функция обратного вызова, выполняемая если запрос успешен. Требуется если предоставлен dataType, но можно использовать значение null или jQuery.noop. Она может принимать три параметра: data - данные, полученные с сервера, textStatus - - статус запроса и jqXHR - специальный объект jQuery, который представляет расширенный вариант объекта XMLHttpRequest.
  4. dataType - тип данных ожидаемый с сервера. Используются по умолчанию: xml, json, script, text, html в зависимости от заданного URL-адреса.

Альтернативный синтаксис:

$.get( [settings ] )

Где:

  1. settings - ассоциативный массив (ключ/значение) настраивающий Ajax. Все поля кроме url не обязательны и могут быть установлены по умолчанию припомощи метода $.ajaxSetup(). Полный список параметров смотрите в описании метода jQuery.ajax( settings ). Метод запроса автоматически будет установлен в значение GET.

Код JavaScript с использованием метода get() будет иметь следующий вид:

   $("#but1").click(function(){
    $.get('test72.php',
	     {x :"8",y :"14"},
          function(data) {
          $('#par1').html(data);
    },	
    alert("Данные загружены"))
   })

Здесь использованы: параметр url (test72.php), параметр data ({x :"8",y :"14"}) и функция обратного вызова success (function(data)), которая передаст результат с сервера.


$(document).ready(function(){
$("#but1").click(function(){
$.get("test72.php",
{x :"8",y :"14"},
function(data) {
$("#par1").html(data)
},
alert("Данные загружены"))
})

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом get()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$.get('test72.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data)
},
alert("Данные загружены"))
})

});
</script>
</head>
<body>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

А теперь рассмотрим пример с передачей четвертого параметра dataType. Нередко возникает такая ситуация, когда сервер отправляет данные в определенном формате, например, json или xml. В этом примере мы примем ответ с сервера в формате json.

Так, php-файл на стороне сервера мог бы выглядеть следующим образом:

if(!empty($_GET['x'])&&!empty($_GET['y'])){
    $x = $_GET['x'];
    $y = $_GET['y'];
	$z = $x+=$y;
    echo json_encode(array("event"=>"Сумма слагаемых x+y=","z"=>"$z"));
}else{
	echo json_encode(array("event"=>"Ошибка в отправлении запроса, x+y="));
}

В данном случае он возвращает объект json. Тогда на клиентской стороне мы можем явно прописать тип данных, а в функции обработать принятые данные.


$(document).ready(function(){
$("#but1").click(function(){
$.get('test76.php',
{x :"8",y :"14"},
function(data) {
$("#par1").html(data.event+data.z)
},
'json',
alert("Данные загружены"))
})

});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом get()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#but1").click(function(){
$.get('test76.php',
{x :"8",y :"14"},
function(data) {
$('#par1').html(data.event+data.z)
},
'json',
alert("Данные загружены"))
})

});
</script>
</head>
<body>
<p id="par1">После нажатия на кнопку в данном поле будет отображен результат выполнения скрипта test72.php.</p>
<input id="but1" type="button" value="Передать данные скрипту" />
</body>
</html>

А теперь вернемся к форме с регистрацией пользователей.

Код передачи данных методом get() будет такой:

  $("#but1").click(function(){
	   var formData = $("#form").serialize();
       $.get("login1.php",
	        formData,
			function(data){
			$('#main').html(data)			
			},
    alert("Данные загружены")
   )
   })

C помощью сериализации мы получаем данные заполненные пользователем и сохраняем их в переменной formData, которая отправляет их на сервер. Далее, после обработки на сервере, мы с помощью функции обратного вызова получаем ответ сервера.


$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#but1").click(function(){
var formData = $("#form").serialize();
$.get("login1.php",
formData,
function(data){
$('#main').html(data)
},
alert("Данные загружены")
)
})

<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом get()</title>
<style type="text/css">
#img
{
display:none;
position:absolute;
top:140px;
left: 80px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

$(document).ajaxSend(function(){
$("#img").css("display","block");
})
$(document).ajaxComplete(function(){
$("#img").css("display","none");
})
$("#but1").click(function(){
var formData = $("#form").serialize();
$.get("login1.php",
formData,
function(data){
$('#main').html(data)
},
alert("Данные загружены")
)
})

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" >
<label for="login">Ваш логин:</label><br>
<input name="login" type="text" id="login" required placeholder="Введите логин"><br><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<input id="but1" type="button" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>