Работа с JSON ENCODE

Современный веб никак не может обойтись без технологии Ajax. Это отличная возможность приблизить веб приложение к образу десктопного. За счет того, что Ajax не допускает перезагрузки страницы мы видим перед собой новый веб, в котором также происходит обращение к серверу, но уже асинхронным способом.

Мы рассмотрим работу с Ajax на отличном примере, который послужит вам толчком для своего уникального веб сервиса.

Задача перед нами будет стоять следующая. Допустим, у нас есть таблица goods в базе MYSQL на сервере, в которой хранится информация о товарах нашего интернет-магазина. Предположим, что для каждого товара у нас есть title (название товара), description (описание товара), price (цена товара), image (изображение товара). Мы выгрузили товары из базы на страницу нашего онлайн маркета (такую страницу как правило называют витриной товаров). И мы хотим, чтобы по нажатию на иконку товара у нас выпадала форма с описанием товара и возможностью покупки. В большиенстве онлайн маркетов такую форму не делают, а делают перенаправление на отдельную страницу товара с просмотром всей информации. Для сео оптимизации такой вариант конечно же лучше, но мы здесь для того, чтобы изучать Ajax.

Так вот, задача сводится к тому, чтобы, по нажатию на иконку товара, выгрузить из базы информацию о товаре на отдельную форму на той же странице, где находится витрина товаров. Для этого мы будем использовать jquery AJAX и разумеется json_encode, который и будет передавать нам весь массив, содержащий информацию о товаре.

Вот наш javascript, срабатываемый в момент нажатия по товару. Передавая php скрипту id товара, мы получаем json данные массива, и затем мы парсим массив, чтобы получить "чистые" значения.


$(document).ready(function() {	
$('.class-of-your-goods').click(function(){ // когда нажимаем на товар
var goods = $(this).data("goods"); // берем значение id товара
$.ajax({ // ajax запрос к скрипту php
type: "POST",
url: "link to the script for ajax query", // ссылка на скрипт php
data: {"goods": goods}, //передаваемый параметр
cache: false,						
success: function(goods_data){ // в случае, если скрипт php вернет нам ответ от сервера
var parsedData = JSON.parse(goods_data); // парсим полученный массив
$("#buy-product-block").show(); // показываем форму, куда передаем наши данные
$("#goods-image").attr("src", "путь до файла изображения" + parsedData[0]); // первый элемент передаваемого массива имеет index 0
$("#goods-title").html(parsedData[1]);
$("#goods-description").html(parsedData[2]);
$("#goods-price").val(parsedData[3]);
}});return false;
}); 
});

Вот наш php скрипт, куда передается параметр id товара. После чего происходит SQL-запрос к базе и получение информации о товаре. Эти данные последовательно записываются в массив и передаются посредством json_encode.


if ($_SERVER["REQUEST_METHOD"] == "POST")
{
include("путь к файлу подключения базы данных");
$goods = $_POST["goods"];
$get_value = mysql_query("SELECT image, title, description, price FROM goods WHERE goods_id='$goods'", $переменная_подключения);
if (mysql_num_rows($get_value) > 0){
$goods_info = mysql_fetch_array($get_value);
echo json_encode($goods_info); // передаем наш одномерный массив [1 элемент массива - файл изображения, 2 - название товара, 3 - описание, 4 - цена]
}
}

Начинаем программировать под kinect v2

Создание адаптивного сайта

Leapmotion. Начало.