Ajax, JSON и PHP. Примеры взаимодействия 

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

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

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

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

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

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

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

Ajax, JSON и PHP. Примеры взаимодействия

Ajax, JSON и PHP

Вернемся к предыдущему примеру и получим данные с сервера с помощью метода done(), который хорошо нам знаком по объекту jqXHR. Мы отправляем данные, хранящиеся в переменной formData, серверному файлу json1.php. Код скрипта будет такой:

    $.getJSON("json1.php",formData, alert("Данные на сервер загружены"))
	.done(function(data){       
        $( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+data.password + ". Ваш email: "+data.email);
		alert("Данные с сервера получены "+formData.login +"; "  +  data.password + " ;" +  formData.email);		
		});

При получении ответа с сервера вместо функции обратного вызова используем метод done().

Протестируем наш скрипт на том же примере с отправкой данных регистрации пользователей.


$(document).ready(function(){
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON("test/json1.php",formData, alert("Данные на сервер загружены"))
.done(function(data){
$( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+data.password + ". Ваш email: "+data.email);
alert("Данные с сервера получены "+formData.login +"; " + data.password + " ;" + formData.email);
});
});

});
<html>
<head>
<meta charset="utf-8">
<title>Формат JSON. Обработка данных методом $.getJSON()</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(){
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON("test/json1.php",formData, alert("Данные на сервер загружены"))
.done(function(data){
$( "#main" ).html("Ваш логин: "+data.login+ ". Ваш пароль: "+formData.password + ". Ваш email: "+formData.email);
alert("Данные с сервера получены "+formData.login +"; " + data.password + " ;" + formData.email);
});
});

});
</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>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br>
<label for="email">Ваш email:</label><br>
<input type="email" id="email" required placeholder="Введите email"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" >
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>

Рассмотрим еще один вариант отправки нашей формы на сервер и получения ответа с сервера.


$.getJSON('json2.php',
formData,
function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>Ваш "+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
});
$("<ul>"+items.join( "" )+"</ul>")
.appendTo( "#main" );
},
alert("Данные на сервер загружены")
)

Серверный файл json2.php, получает данные с формы переданные переменной formData. Если данные сервером получены и обработаны, то функция обратного вызова возвратит их назад, о чем нас поставит в известность диалоговое окно. Рассмотрим более подробно функцию обратного вызова.


function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>Ваш "+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
});
$("<ul>"+items.join( "" )+"</ul>").appendTo( "#main" );
}

В ней мы создали пустой массив var items = [];. Зачем это нужно, будет понятно дальше. Сервер передает нам json-объект data в виде строки, которую мы преобразуем в массив и перебираем все находящиеся там элементы с помощью метода each(). Метод each() специально спроектирован, чтобы сделать циклические операции над DOM-элементами более краткими и менее подверженными ошибкам. Каждый раз при вызове переданной функции, в нее передается индекс текущей итерации (начинается с 0). Передадим данные полученные с сервера массиву items:

items.push( "<li>Ваш "+key+": " + val + "</li>" )

И вот теперь мы вставили данные в пустой массив items = []. А помог нам в этом метод push(), который позволяет вставить новые элементы в конец массива. Метод также возвращает новую длину массива.

Синтаксис метода:

массив.push(элемент1,элемент2...,элементn)

Где:

элемент1,элемент2,...элементn - являются обязательными параметрами. Элементы, которые будут добавлены в конец массива.

Чтобы вставить новые элементы в начало массива используется метод unshift().

Ну и наконец, чтобы добавть на страницу с формой информацию о результатах выполнения ajax запроса воспользуемся методом appendTo().

$("<ul>"+items.join( "" )+"</ul>")
.appendTo( "#main" );

appendTo() - вставляет указанное содержимое в конце содержимого выбранного элемента.

Данный метод отличается от метода after тем, что он вставляет содержимое внутрь элемента, а не после него. Обратите внимание: метод appendTo делает тоже самое, что и метод append() и отличается только синтаксисом.

Синтаксис метода:

$(содержимое).appendTo(селектор)

Где:

  1. содержимое (обязательный параметр) - содержимое, которое будет добавлено к содержимому указанного элемента.
  2. селектор (обязательный параметр) - выбирает элемент, к которому будет добавлено содержимое.

Рассматриваемый нами код может иметь и такой вид:

 $("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );

Здесь в элемент ul будет добавлено содержимое, указанное в фигурных скобках.

C помощью метода .join() мы объединяем все элементы массива в одну строку.

Синтаксис метода:

массив.join(разделитель)

Элементы массива в полученной строке будут отделены друг от друга разделителем. Разделителем по умолчанию является запятая (,).

Код серверной страницы json2.php будет таким:


<?php
sleep(1);
if(!empty($_REQUEST['login'])&&!empty($_REQUEST['password'])&&!empty($_REQUEST['email'])){
$arr = [
"Результат"=>"Авторизация прошла успешно",
"Логин"=>"$_REQUEST[login]",
"Пароль"=> "$_REQUEST[password]",
"Email"=>"$_REQUEST[email]"
] ;
echo json_encode($arr);
}else {
$arr=["result"=>"Ошибка в передаче данных"];
exit(json_encode($arr) );
}
?>

Протестируем скрипт.


$(document).ready(function(){

$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON('test/json2.php',
formData,
function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>Ваш "+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>"+items.join( "" )+"</ul>")
.appendTo( "#main" );
},

alert("Данные на сервер загружены")
)

});

});
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом getJSON()</title>
<style type="text/css">
ul{list-style-type:none}
#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(){

$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON('test/json2.php',
formData,
function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>Ваш "+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>"+items.join( "" )+"</ul>")
.appendTo( "#main" );
},

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>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<label for="email">Ваш email:</label><br>
<input type="email" id="email" required placeholder="Введите email"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>

Приведенные выше примеры довольно искусственны. Давайте попробуем создать что­то более приближенное к практике, при этом продемонстрируем обмен JSОN-данными между РНР и JаvаSсriрt-приложением.

Форма для отправки данных регистрации на сервер у нас имеется. Остается только отправить эти данные на сервер и получить подтверждение об уникальности логина отправителя. Если логин уникален, то сервер заносит их в базу данных и сообщает о результате пользователю, в противном случае предлагает вернуться к форме и выбрать другое имя.

JavaScript-код, также остается не изменным. Меняется только код серверной страницы.

Серверная страница json3.php имеет следующий код:


<?php
//json3.php
// Устанавливаем соединение с базой данных
$db = new mysqli("localhost","root","root","test");
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
if(!empty($_REQUEST['login'])&&!empty($_REQUEST['password'])&&!empty($_REQUEST['email'])){
$login=test_input($_REQUEST['login']);
$password=test_input(md5($_REQUEST['password']));
$email=test_input($_REQUEST['email']);
$result = $db->query("SELECT * FROM userjson WHERE login='$login'");
$myrow =$result->fetch_array();
if($login != $myrow['login']){
$result = $db->query("INSERT INTO userjson(id, login, password, email, date) VALUES(NULL, '$login','$password','$email', NOW())") or die("Ошибка регистрации");
$arr = [
"Результат "=>"Авторизация прошла успешно",
"Логин"=>"$_REQUEST[login]",
"Пароль"=> "$_REQUEST[password]",
"Email"=> "$_REQUEST[email]"
] ;
echo json_encode($arr);
}else{
$arr=["Результат "=>"Имя $_REQUEST[login] уже существует - вернитесь на форму регистрации и выберите другое имя"];
echo json_encode($arr) ;
}
}else {
$arr=["result"=>"Ошибка в передаче данных"];
exit(json_encode($arr) );
}
?>

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

Протестируем наш скрипт.


$(document).ready(function(){
$(document).ajaxStart(function(){
$("#img").css("display","block");
})
$(document).ajaxStop(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON('json3.php',
formData,
function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>"+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );
},

alert("Данные на сервер загружены")
)

$("#main").empty();

});

});
<html>
<head>
<meta charset="utf-8">
<title>Пример обработки запроса методом getJSON()</title>
<style type="text/css">
.mylist{list-style-type:none}
#img
{
display:none;
position:absolute;
top:220px;
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).ajaxStart(function(){
$("#img").css("display","block");
})
$(document).ajaxStop(function(){
$("#img").css("display","none");
})
$("#form").submit(function(event){
// Предотвращаем обычную отправку формы
event.preventDefault();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.getJSON('json3.php',
formData,
function(data) {
var items = [];
$.each(data,function(key,val){
items.push( "<li>"+key+": " + val + "</li>" ),
alert("Данные с сервера получены " +key+": " + val)
}),
$("<ul>",{
"class": "mylist",
html: items.join( "" )})
.appendTo( "#main" );
},

alert("Данные на сервер загружены")
)

$("#main").empty();

});

});
</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>
<label for="password">Ваш пароль:</label><br>
<input name="password" type="password" id="password" required placeholder="Введите пароль"><br><br>
<label for="email">Ваш email:</label><br>
<input type="email" id="email" required placeholder="Введите email"><br><br>
<input id="sub1" type="submit" value="Передать данные скрипту" />
</form>
<p id="img"><img src="../../images/loader.gif" > Пожалуйста, подождите, файл находится в обработке.</p>
</body>
</html>

Если вы заметили, то в JavaScript произошли некоторые изменения. Мы применили альтернативный синтаксис в методе appenTo() и для удаления полученных данных применили метод empty(). А также знакомые нам методы .ajaxStart()- определяет функцию, код которой будет выполнен перед тем, как первый AJAX запрос из группы запросов будет отправлен на сервер и .ajaxStop()- определяет функцию, код которой будет выполнен, когда последний AJAX запрос из группы запросов будет совершен.