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

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

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

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

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

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

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

Работа с Ajax с помощью средств jQuery

Работа с Ajax с помощью средств jQuery

Метод load(), представляет собой быстрый способ получения НТМL-контента от веб-сервера и вставки его на страницу. Но сервер не всегда способен возвращать непосредственно НТМL-код - ответом могут быть сообщения, номера кодов или данные, требующие дальнейшей обработки средствами JavaScript. Например, если вы используете технологию Ajax для получения определенных записей из базы данных, сервер может возвратить ХМL-файл, содержащий эти записи или объект JSON. У вас не получится вставить эти данные на страницу - их придется обработать для получения НТМL-кода .

JQuеrу-функции get() и post() являются простыми инструментами для отправки и получения данных с веб-сервера.

Базовая структура этих функций такова:

$.get(url, data, callback);

или

$.post(url, data, callback);

Функции get() и post() принимают три аргумента.

  • url - это строка, содержащая путь к серверному сценарию обработки данных (например, 'processForm. php' ).
  • data является либо строкой, либо литералом oбъeктa JavaScript, содержащим данные, которые вы хотите послать на сервер.
  • callback является функцией обратного вызова, которая обрабатывает информацию, возвращаемую сервером.

При выполнении функции get() или post() браузер посылает данные по указанному URL-aдpecy. Когда сервер возвращает ответные данные, браузер передает их функции обратного вызова, которая обрабатывает эту информацию и обновляет страницу.


$(document).ready(function(e) {
$("#but").click(function(e) {
$.get("test52.php", function(result){$("#content").html(result);})
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Методы get() и post()</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#content{margin:10px 0 0 20px}
#but{margin:10px 0 0 20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function(e) {
$("#but").click(function(e) {
$.get("test52.php", function(data){$("#content").html(data);})
});
});
</script>
</head>

<body>
<input type="button" id="but" value="Отправить запрос" >
<div id="content">
Здесь будет отображено содержимое файла test52.php.
</div>
</body>
</html>

А вот так будет выглядеть код запроса GET с использованием базового процесса XMLHttpRequest:


function start(){
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4 && xhttp.status==200)
document.getElementById('content').innerHTML=xhttp.responseText;
}
xhttp.open('GET','test60.php',true);
xhttp.send();
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Методы get() и post()</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#content{margin:10px 0 0 20px}
#but{margin:10px 0 0 20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
function start(){
xhttp=new XMLHttpRequest();
xhttp.onreadystatechange=function(){
if (xhttp.readyState==4 && xhttp.status==200)
document.getElementById('content').innerHTML=xhttp.responseText;
}
xhttp.open('GET','test60.php',true);
xhttp.send();
}
</script>
</head>

<body>
<input type="button" id="but" value="Отправить запрос" onclick='start()' >
<div id="content">
Здесь будет отображено содержимое файла test60 .php.
</div>
</body>
</html>

Согласитесь, что несмотря на его простоту, в нем все же больше используется шагов, чем к коде с использованием библиотеки jQuery/

Строка запроса

Как форматировать данные, посылаемые на сервер с помощью технологии Ajax? Например, вы создали веб-страницу, на которой посетители имеют возможность присваивать рейтинг фильмам, выбирая определенное количество звезд. Щелчок по пяти звездам означает отправку на сервер информации о рейтинге 5. В этом случае данные, посланные на сервер, могут выглядеть так: rating=5. Допустим, страница, обрабатывающая эти рейтинги, называется rаteMovie.php, тогда код для отправки на сервер данных с помощью Ajax мог бы выглядеть так для метода GЕТ:

$.get('rateMovie.php', 'rating=5');

а для метода POST - так:

$.post('rateMovie.php', 'rating=5');

Если вам нужно послать на сервер более одной пары имя/значение, вставьте между ними знак & :

$.post('rateMovie.php', 'rating=5&user=Вова');

Нужно аккуратно применять этот метод, поскольку некоторые знаки принимают специальное значение после вставки в строку запроса. Например, знак & служит для включения дополнительных пар имя/значение; знак = присваивает значение имени. Следующая строка запроса является некорректной:

'favFood=Mac & Cheese' // неправильно

Знак & здесь является частью значения Маc & Cheese, но в составе строки запроса символ & означает вторую пару имя/значение. Если вы хотите использовать специальные знаки, то вам следует их кодировать или экранировать во избежание конфликтов с альтернативными значениями. Например, знак пробела кодируется как %20, знак & - как %26, а знак = -как %3D. Таким образом, предыдущий код следует переписать так:

'favFood=Mac%20%26%20Cheese' // правильно

Язык JavaScript предоставляет для этих целей метод encodeURIComponent(). Примените функцию endeodeURIComponent() к строке, и она ее правильно зашифрует. Например:

var queryString = 'favFood=' + encodeURIComponent('Маc & Cheese'); 
$.post('foodChoiee.php', queryString); 

Литерал объекта

Для коротких и простых фрагментов данных (не содержащих знаки пунктуации) метод строки запроса работает хорошо. Но более надежным способом, поддерживаемым функциями jQuery get() и post(), является использование литерала объекта для хранения данных.

Базовая структура литерала объекта такова:

{ 
namel: 'valuel', 
name2: 'value2' 
} 

Вы можете передавать литерал объекта непосредственно функциям get() или post(). Например, следующий код использует метод строки запроса:

$.post('rankMovie.php', 'rating=5');

Для использования литерала объекта перепишите код так:

$.post('rankMovie.php', {ratinq: 5};

Вы можете либо передать литерал объекта непосредственно функции get() или post(), либо сначала сохранить его в переменной, а затем передать ее функции get() или post():

var data = {rating: 5}; 
$.post('rankMovie.php', data); 

Разумеется, вы можете включить любое количество пар имя/значе­ние в объект, передаваемый функции get() или post():

var data = { 
rating: 5, 
user: 'Вова' 
} 
$.post('rankMovie.php', data);

Или, если вы напрямую передаете объектную константу методу $.post():

$.post('rankMovie.php', 
{ 
rating: 5, 
user: 'Вова' 
} 
);

jQuеrу-функция serialize()

Создание строки запроса или литерала объекта для всех пар имя/значение формы может оказаться настоящим испытанием. Вы должны будете извлечь имя и значение для каждого элемента формы, а затем объединить их, чтобы составить единую длинную строку запроса или большой литерал oбъeктa JavaScript. К счастью, библиотека jQuеrу предусматривает функцию, облегчающую процедуру конвертации данных формы в информацию, которую моrут использовать функции get() и post().

Функция serialize() может применяться к любой форме (или даже выбранным элементам формы). Для ее применения сначала создайте выборку jQuery, включающую форму, затем присоедините функцию serialize(). Например, у вас есть форма с идентификатором login. Если вы хотите создать для нее строку запроса, сделайте это следующим образом:

var formData = $('#login').serialize();

Часть var formData просто создает новую переменную; код $('#login') - это выборка jQuеrу, содержащая форму; наконец, фрагмент .serialize() собирает все имена элементов формы и текущие значения каждого элемента и создает единую строку запроса.


$(document).ready(function(e) {
$("#but1").click(function(){
var formData = $("#login").serialize();
$("#result").html(formData);
});
});
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuеrу-функция serialize()</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<style>
#login,#result{margin:10px 0 0 20px}
#but1{margin:10px 0 0 20px}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$(document).ready(function() {
$("#but1").click(function(){
var formData = $("#login").serialize();
$("#result").html(formData);
});
});
</script>
</head>

<body>
<form id="login" name="">
Введите логин: <input name="name" type="text" value="admin"/>
<br><br>
Я использую свой компьютер <input name="comp" type="radio" value="his" checked ><br>
Я использую общий компьютер <input name="comp" type="radio" value="overall" >
</form>
<br>
<input id="but1" type="button" value="Сериализовать форму" />
<br><br>
<b><div id="result"></div></b>
</body>
</html>

Чтобы использовать эту строку с функциями get() или post(), просто передайте преобразованные функцией serialize() результаты в качестве второго аргумента после URL-aдpeca. Например, вы хотите послать содержимое формы login на страницу login.php. Для этого используйте такой код:

var formData = $('#login').serialize(); 
$.get('login.php',formData,loginResults); 

Данный код посылает данные из формы в файл login.php, используя метод GET. Последний аргумент функции get() - loginResults - представляет собой функцию обратного вызова, которая берет данные, возвращаемые с сервера, и обрабатывает их.