Developer notes: Jquery. Работа с json-данными (клиент-серверное взаимодействие)

Задачка. Нужно реализовать взаимодействие клиента (user-agent) с сервером (web server) с помощью json-данных, для упрощения - в одном направлении: от сервера к клиенту. При необходимости можно попробовать реализовать и двунаправленность.
Для ясности нужно продумать и представить всю цепочку хода запросов и ответов.

Цепочка запроса и ответа

Решение задачи схематично представлено на рисунке. Ддя клиентской строны имеем - index.html или index.php, для серверной - скрипт json.php. Рассмотрим подробнее:

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8">
  <script src="jquery-1.9.1.js"></script>
  <script>
  $(document).ready(function(){
   $('#btn').click(function(){
    // При нажатии кнопочки запрашиваются данные
    // с сервера (скрипт - json.php), при успешном ответе
    // вызывается callback функция function(data)
    // с входными данными data
    $.getJSON('json.php', function(data) {
     // Разбивка входных данных на пару 'ключ=>значение'
     // (соответствующая структура json-данных)
     $.each(data, function(key, value) {
      // При отладке удобно пользоваться методом alert(),
      // можно отслеживать содержимое входных данных
      // alert("value.id = " + value.id +
      //  " value.date = " + value.date +
      //  " value.staff = " + value.staff +
      //  " value.otdel = " + value.otdel);
      // Разбираем полученные данные и формируем
      // для html-представления строку (для отображения табличных данных)
      var table_row = "<tr>" +
            "<td>" + value.id + "</td>" +
            "<td>" + value.date + "</td>" +
            "<td>" + value.staff + "</td>" +
            "<td>" + value.otdel + "</td>" +
          "</tr>";
      // Добавляем сформированную строку table_row в таблицу
      // с идентификатором table_content
      $(table_row).appendTo("#table_content tbody");
     });
    });
   });
  });
  </script>
  <style>
   #table_content
   {
   background-color:#00CCFF;
   color:#000000;
   }
  </style>
</head>
<body>
  <p>Test page for testing get JSON data from server:</p>
  <form>
   <input id="btn" type="button" value="Click me to get json-data">
  </form>
  
  <table id="table_content" border="1">
   <thead>
    <th>id</th>
    <th>date</th>
    <th>staff</th>
    <th>otdel</th>
   </thead>
   <tbody>
   </tbody>
  </table>
</body>
</html>

До нажатия кнопочки таблица (немного не соответствует) пуста

После нажатия заполняется содержимое таблицы

Как видно, на стороне клиента используется js-библиотека jquery. Логика такая. При нажатии кнопочки будет вызван специальный метод $.getJSON('json.php', function(data) {}), который запрашивает данные с сервера (обращение к скриптовой части - json.php), если все хорошо, мы получаем входные данные data, которые далее поступают на вход callback-функции, где непосредственно идет разбор данных и подготовка к последующему html-отображению. В нашем случае - табличное представление. В принципе, здесь ничего сложного.
Теперь рассмотрим скриптовую часть:

json.php

<?#Взаимодействие с клиентом в json-формате
// Параметры (тестовые), необходимые для коннекта к базе данных db_name
$server = "localhost";
$username = "root";
$password = "password";
// Тестовое имя базы данных
$dbname = "db_name";
// sql-запрос. Возвращает данные двух работников из одного отдела
$sql = "SELECT DISTINCT a.id, a.date, a.staff, a.otdel
  FROM db_name.tbl_name a, db_name.tbl_name b
  WHERE a.otdel = b.otdel AND a.id <> b.id
  ORDER BY a.otdel ASC
  LIMIT 2";

// Подключение к серверу...
mysql_connect($server, $username, $password) or
die("Connect error: ".mysql_error());
// Подключение к базе данных db_name...
mysql_select_db($dbname);
// Делаем sql-запрос к базе данных и получаем результат...
$result = mysql_query($sql);

// Если запрос отработал и мы получили результат,
// тогда представим сие результат в виде
// ассоциативного массива $row, с последующей
// подготовкой для отправки в json-формате
if ($result)
while($row = mysql_fetch_assoc($result))
$json[] = array('id'=>$row['id'], 'date'=>$row['date'], 'staff'=>$row['staff'], 'otdel'=>$row['otdel']);
else
die();

// Отправляем подготовленный массив $json (в ответ)
header("Content-type: application/json");
echo json_encode($json);
?>

Конечно, здесь все упрощено, самое главное на что нужно обратить внимание - вид массива $json, который готов к преобразованию в json-формат и отправке клиенту. Выглядит он следующим образом:

$json = array [

0 => array [

"id" => "16",

"date" => "11032013",

"staff" => "developer",

"otdel" => "it"

1 => array [

"id" => "61",

"date" => "11032013",

"staff" => "tester",

"otdel" => "it"

]

После обработки методом json_encode() получим следующее (json-данные):

[{
    "id":"16",
    "date":"11032013",
    "staff":"developer",
    "otdel":"it"
}, {
    "id":"61",
    "date":"11032013",
    "staff":"tester",
    "otdel":"it"
}]

Далее отправляем данные клиенту, не забывая указывать тип содержимого ответа header("Content-type: application/json").

Если нужны исходники, то можно скачать по ссылке - download.
Всем удачи.