Создание галереи продуктов на JSON и PHP
Как вы, наверное, поняли из названия, в этом уроке мы хотим создать кросс доменный ajax запрос, используя JSONP. Тут же я покажу вам как извлечь данные из базы данных MySQL и превратить их в JSON строку, которую в последствии можно использовать в JavaScript. Стандарты JSON для объектов JavaScript позволяют совершать кросс доменные ajax запросы.
Что мы хотим создать?
Для того чтобы всё было чётко, мы хотим создать галерею продуктов, которую вы можете увидеть на рисунке или в демо.
Код PHP
В первую очередь мы хотим извлечь данные из базы при помощи PHP, причём количество строк будет сокращено до 6. В следующем фрагменте кода вы можете увидеть, как мы извлекаем данные и формируем массив. После этого, мы просто применяем метод json_encode() для сформированного массива, чтобы получить строку JSON.
include('connect.php'); $sql = "SELECT title, image, description FROM json_demo LIMIT 6"; $result = mysql_query($sql); while($row = mysql_fetch_array($result)) { $rows[] = array( "title" => $row['title'], "image" => $row['image'], "description" => $row['description']); } $json = json_encode($rows); $callback = $_GET['callback']; echo $callback.'('. $json . ')';
Как выглядит JSON
Ниже вы увидите структуру файла json.php.
[ { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen", "image" : "1.jpg", "title" : "B&O 5.1" }, { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen", "image" : "2.jpg", "title" : "B&O TV" }, { "description" : "Market leader in the UK. Roberts produce a wide range of DAB digital radios. Roberts is a consumer electronics company producing DAB, analogue and wi-fi ...", "image" : "3.jpg", "title" : "Roberts Radio" }, { "description" : "Toshiba is a diversified manufacturer and marketer of advanced electronic and electrical products, spanning information & communications equipment and systems", "image" : "4.jpg", "title" : "Toshiba TV" }, { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen", "image" : "5.jpg", "title" : "B&O Audio" }, { "description" : "B&O is a Danish company that designs and manufactures audio products, television sets, and telephones. It was founded in 1925 by Peter Bang and Svend Olufsen", "image" : "6.jpg", "title" : "B&O Remote" } ]
Теперь у нас есть строка JSON, которой мы можем манипулировать через JavaScript для того, чтобы достать какие-то данные. Далее нам необходимо создать ajax запрос JSON, что по сути тоже не очень сложно. Для совершения кросс доменного запроса, просто впишем абсолютный URI. Для JSONP необходимо указать метод обратного вызова.
После того, как мы получили данные, нам необходимо вывести их на страницу.
$("document").ready(function () { $.getJSON('http://papermashup.com/demos/jquery-json-php/json.php?callback=?', function (data) { $("#content").html(''); $.each(data, function (i, item) { $("#content").append('<div class="product"><img src="http://papermashup.com/demos/jquery-json-php/images/' + item.image + '" width="135" height="138"/><div class="title">' + item.title + '</div><div class="description">' + item.description + '</div><div class="clear"></div></div>'); }); }); $("#content").fadeIn(2000); });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/X-f2FCC4_cE/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
Дураки ставят вопросы чаще, чем пытливые люди Горький Максим - (1868-1936) - русский писатель, литературный критик и публицист, общественный деятель |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.