AAA Главная
Примеры PHP Примеры JavaScript Примеры Ajax Примеры CSS,HTML

Использование связки AJAX + JSON

JSON (JavaScript Object Notation) - это формат данных, удобный для обработки интерпретатором JavaScript. Подробнее об формате JSON Вы можете прочитать здесь.

Cледующий файл выбирает все данные из базы MYSQL, преобразует их в json-формат и отправляет AJAX - обработчику. Обращение к нему с GET-параметрами:
id=номер_записи
tbl=имя_таблицы
json.php

header("Content-Type: application/x-suggestions+json; charset=windows-1251");
//header('Content-type: application/json; charset=utf-8');

// подключение в БД MySQL
require_once($_SERVER['DOCUMENT_ROOT'].'/config.php');

$query = mysql_query('SELECT * FROM '.addslashes($_GET['tbl']).' WHERE id='.intval($_GET['id']).' LIMIT 1');
if($data = mysql_fetch_assoc($query))echo php2json($data);
exit;

// рекурсивная функция формирования json-последовательности.
function php2json($obj){
if(count($obj) == 0) return '[]';
$is_obj = isset($obj[count($obj) - 1]) ? false : true;
$str = $is_obj ? '{' : '[';
foreach ($obj AS $key  => $value) {
   $str .= $is_obj ? "'" . addcslashes($key, "\n\r\t'\\/") . "'" . ':' : '';
   if (is_array($value))   $str .= php2json($value);
   elseif (is_null($value))    $str .= 'null';
   elseif (is_bool($value))    $str .= $value ? 'true' : 'false';
   elseif (is_numeric($value)) $str .= $value;
   else                        $str .= "'" . addcslashes($value, "\n\r\t'\\/") . "'";
   $str .= ',';
   }
return substr_replace($str, $is_obj ? '}' : ']', -1);
}

Общий блок работы AJAX с поддержкой JSON.
js.js

function ajaxLoad(obj,url,defMessage,post,callback){
  var ajaxObj;
  if (defMessage) document.getElementById(obj).innerHTML=defMessage;
  if(window.XMLHttpRequest){
      ajaxObj = new XMLHttpRequest();
  } else if(window.ActiveXObject){
      ajaxObj = new ActiveXObject("Microsoft.XMLHTTP");
  } else {
      return;
  }
  ajaxObj.open ((post?'POST':'GET'), url);
  if (post&&ajaxObj.setRequestHeader)
      ajaxObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=windows-1251;");
  ajaxObj.setRequestHeader("Referer", location.href); // нужен в Donate

  ajaxObj.onreadystatechange = ajaxCallBack(obj,ajaxObj,(callback?callback:null));
  ajaxObj.send(post);
  return false;
  }
function updateObj(obj, data, bold, blink){
   if(bold)data=data.bold();
   if(blink)data=data.blink();
   ajaxEval(document.getElementById(obj), data);
}

function ajaxEval(obj, data){
   if(obj.tagName=='INPUT'||obj.tagName=='TEXTAREA') obj.value=data;
   else if(obj.tagName=='SELECT'){
       for(i=0;i<obj.options.length;i++)
        if(obj.options[i].value==data){obj.options[i].selected=true;break;}
   }else obj.innerHTML = data;
}

function ajaxCallBack(obj, ajaxObj, callback){
return function(){
    if(ajaxObj.readyState == 4){
       if(callback) if(!callback(obj,ajaxObj))return;
       if (ajaxObj.status==200){
            if(ajaxObj.getResponseHeader("Content-Type").indexOf("application/x-javascript")>=0)
              eval(ajaxObj.responseText);
            else if(ajaxObj.getResponseHeader("Content-Type").indexOf('json')>=0){
        ajaxObj=eval("(" + ajaxObj.responseText + ")");
        for(key in ajaxObj){
            o=eval('obj.'+key);
            if(typeof(o)!='undefined')ajaxEval(o, ajaxObj[key]);
        }
        obj.style.display='block'; // до окончания загрузки информации форма скрыта
        }else updateObj(obj, ajaxObj.responseText);
        }
       else updateObj(obj, ajaxObj.status+' '+ajaxObj.statusText,1,1);
    }
}}

// функция, осуществляющая JSON-запрос
function edit(id){
document.frm.id.value=id;
document.frm.action='#'+id;
ajaxLoad(document.frm,'json.php?tbl=user&id='+id);
document.frm.name.focus();
return false;
}

Форма, которая будет заполена данными из базы с помощью AJAX запроса:

<form method=post name="frm" style='display:none'>
<input type="hidden" name="id">
Имя, Фамилия: <input type=text name="name" value=""><br />
Телефон: <input type=text name="tel" value=""><br />
Примечание: <input type=text name="comment" value=""><br />
<select name="adm">
<option value="0">Клиент</option>
<option value="5">Сотрудник</option>
<option value="9">Руководитель</option>
</select>
<br>
<input value="Сохранить" type="submit" id='sbt'/>
<input value="Отмена" type="reset" onclick="document.frm.style.display='none';" />
</form>

До окончания загрузки информации форма скрыта.

Вызов формы редактирования записи № 1:

<a href='#' onclick='return edit(1)'>Редактрировать запись № 1</a>

.

© Copyright 2008- by KDG



Rambler's Top100