Регистрация Войти
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Войти через VK Войти через FB Войти через Google Войти через Яндекс
Поиск по сайту
Использование связки 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>
.
Прокомментировать/Отблагодарить