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

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

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

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

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

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

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

Ajax, JSON и PHP. Передача данных в формате JSON

Ajax, JSON и PHP

Вернемся опять к формату JSON. До этого, в примерах рассмотренных ранее, мы отправляя данные на сервер получали массив, который в дальнейшем с помощью функции json_encode(), преобразовывали в json-последовательность и передавали ее на страницу с формой.

Теперь задача меняется с точностью наоборот. Мы будем отправлять данные на сервер в формате json и с помощью PHP функции json_decode() преобразовывать ее в массив, который и передадим на страницу с веб-формой.

Ajax запрос будет такой:


$.ajax({
url:"json4.php",
type:"POST",
data: 'formData='+ JSON.stringify(formData),
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
})

Мы отправляем на серверную страницу json4.php методом POST данные в виде json строки data: \'formData=\'+ JSON.stringify(formData).

Переменная:


var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};

представляет из себя JavaScript-строку. Для преобразования ее в json-строку воспользуемся методом JSON.stringify().

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

JSON.stringify(value[, replacer[, space]])

Где:

  1. value - значение, преобразуемое в строку JSON.
  2. replacer (необязательный) - если является функцией, преобразует значения и свойства по ходу их преобразования в строку; если является массивом, определяет набор свойств, включаемых в объект в окончательной строке.
  3. space (необязательный) - делает результат красиво отформатированным (расставляя пробелы).

Опции beforeSend и complete определяют функции, код которых будет выполнен перед отправкой и после завершения запроса.

Обработчиком ответа сервера является метод done().


.done(function(data){
$("#main").html(data),
alert("Авторизация прошла успешно." + data)
});

C помощью, которого выводится информация в диалоговом окне и странице с формой.

Обработка JSON-строки происходит на серверной странице json4.php, которая имеет следующий код:


//файл json4.php
<?php
sleep(1);
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
//преобразуем json-данные в массив
$arr = json_decode($_POST['formData'], true);
if(!empty(test_input($arr['login']))&&!empty(test_input($arr['password']))&&!empty(test_input($arr['email']))){
echo "Ваш логин: ".$arr['login'] ."; Ваш пароль: ". $arr['password']." ;Ваш email: ". $arr['email'];
}else{
exit("Ошибка в передаче данных");
}

?>

Здесь почти ничего не изменилось по сравнению с ранее рассматриваемыми серверными скриптами, кроме использования функции json_decode(), которая преобразует json-строку в ассоциативный массив PHP.

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


$(document).ready(function(){

$("#sub1").on('click',function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajax({
url:"json4.php",
type:"POST",
data: 'formData='+ JSON.stringify(formData),
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
}).done(function(data){
$("#main").html(data),
alert("Авторизация прошла успешно." + data)
});
alert("Данные загружены");
})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример использования низкоуровневого запроса Ajax. Метод $.ajaxSetup(). Передача данных в формате JSON</title>
<style type="text/css">
ul{list-style-type:none}
#img
{
display:none;
position:absolute;
top:200px;
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(){

$("#sub1").on('click',function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajax({
url:"json4.php",
type:"POST",
data: 'formData='+ JSON.stringify(formData),
beforeSend: function(){
$("#img").css("display","block")
},
complete: function(){
$("#img").css("display","none")

}
}).done(function(data){
$("#main").html(data),
alert("Авторизация прошла успешно." + 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>
<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>

Перейдем к более сложному примеру передачи данных на сервер в виде JSON-строки.

Серверный файл, который обработает json-строку и передаст полученные данные серверу базы данных и странице с формой будет таким:


// файл json5.php
<?php
// Устанавливаем соединение с базой данных
$db = new mysqli("localhost","root","root","test");
function test_input($data) {//функция проверки переменных формы
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
$arr = json_decode($_POST['formData'], true);
$login = test_input($arr['login']);
$password = test_input($arr['password']);
$email = test_input($arr['email']);
if(!empty($login)&&!empty($password)&&!empty($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("Ошибка регистрации");
//Удаляем записи находящиеся в БД более 41 минуты.
$db->query("DELETE FROM userjson WHERE UNIX_TIMESTAMP() - UNIX_TIMESTAMP(date) > 2500");
echo "Авторизация прошла успешно. Ваш логин: ".$login ."; Ваш пароль: ". $password." ;Ваш email: ". $email;
}else{
echo "Имя $login уже существует - вернитесь на форму регистрации и выберите другое имя";

}
}else {

exit("Ошибка в передаче данных");
}
?>

JavaScript-код будет таким:


$.ajaxSetup({
url:$("#form").attr("action"),
data: formData,
beforeSend: function(){
$("#img").css("display","block")
},
complete:function(){
$("#img").css("display","none")
},
success:function(data){
$("#main").html(data),
alert("Данные с сервера получены: " + data)
}
});
$.ajax({
type:"POST",
data: 'formData='+ JSON.stringify(formData)
});

Как вы видите здесь почти ни чего принципиально не изменилось. Чтобы установить данные для будущих запросов мы воспользовались методом $.ajaxSetup, в который включили четыре опции: url, data, beforeSend, complete и success. А сам Ajax - запрос имеет только две опции: type и data.

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


$(document).ready(function(){

$("#sub1").on('click',function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajaxSetup({
url:$("#form").attr("action"),
data: formData,
beforeSend: function(){
$("#img").css("display","block")
},
complete:function(){
$("#img").css("display","none")
},
success:function(data){
$("#main").html(data),
alert("Данные с сервера получены: " + data)
}
});
$.ajax({
type:"POST",
data: 'formData='+ JSON.stringify(formData)
});
alert("Данные загружены");
})

});
<html>
<head>
<meta charset="utf-8">
<title>Пример использования низкоуровневого запроса Ajax. Метод $.ajaxSetup(). Передача данных в формате JSON</title>
<style type="text/css">
ul{list-style-type:none}
#img
{
display:none;
position:absolute;
top:200px;
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(){

$("#sub1").on('click',function(event){
event.preventDefault();
$("#main").empty();
var formData = {
login:$("#login").val(),
password:$("#password").val(),
email:$("#email").val()
};
$.ajaxSetup({
url:$("#form").attr("action"),
data: formData,
beforeSend: function(){
$("#img").css("display","block")
},
complete:function(){
$("#img").css("display","none")
},
success:function(data){
$("#main").html(data),
alert("Данные с сервера получены: " + data)
}
});
$.ajax({
type:"POST",
data: 'formData='+ JSON.stringify(formData)
});
alert("Данные загружены");
})

});
</script>
</head>
<body>
<div id="main"></div>
<form id="form" action="json5.php" >
<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>