Показать сообщение отдельно
  #5 (permalink)  
Старый 09.10.2008, 17:45
Новичок на форуме
Отправить личное сообщение для designovermatter Посмотреть профиль Найти все сообщения от designovermatter
 
Регистрация: 09.10.2008
Сообщений: 3

AJAX
Привет! Вот одно из решений проблемы с помощью AJAX.

1. Сначала на страничке рисуешь элемент формы, у меня это <select...>, и <div...>, где будут "появляться" новые элементы:

2. В тэге <select...> пишем функцию onChange="make_request('search.architect.php?cat=' +this.value, 'id_дива_куда_подружаем_элем ты');".

HHTML-код выглядит вот так:
<form name="search" action="#" method="get">
<input type="text" name="keys" value="">&nbsp;
<select name="cat" onChange="make_request('search.architect.php?cat='+this.value, 'search_sub');">
  <option value="0">Alla kategorier</option>
  <option value="cars">Bilar</option>
  <option value="flats">L&auml;genheter</option>
</select>&nbsp;
<input type="submit" value="S&Ouml;K">
<div id="search_sub"><!-- здесь будет "появляться" новые элементы --></div>
</form>


3. Пишем .js файл:

function create_object() {
	var http_request = false;
	// Mozila, Safari etc.
	if(window.XMLHttpRequest) {
		http_request = new XMLHttpRequest();
		if (http_request.overrideMimeType) {
			http_request.overrideMimeType('text/html; charset=windows-1251');
		}
	}
	// IE
	else if(window.ActiveXObject) {
		try { 
			http_request = new ActiveXObject("Msxml2.XMLHTTP");
		}
		catch(e) {
			try {
				http_request = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch(e) {}
		}
	}
	// Error
	if(!http_request) {
		alert('Failed to create object of class XMLHTTP');
		return false;
	}
	else { return http_request; }
}

function make_request(url, id) {
	http_request = create_object();
	http_request.onreadystatechange = function() { paste_response(http_request, id); };
	http_request.open('GET', url, true);
	http_request.send(null);
}

function paste_response(http_request, id) {
	if (http_request.readyState == 4) {
		if (http_request.status == 200) {
			document.getElementById(id).innerHTML = http_request.responseText;
		} else {
			alert('No response from server or another error accured.');
		}
	}
}


И включаем его в нашу страничку в <head>-тэге.

4. Пишем PHP-страничку search.architect.php:

<?
// search.architect.php

//кэш
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); 
header("Cache-Control: no-cache, must-revalidate"); 
header("Pragma: no-cache"); 
header("Last-Modified: ".gmdate("D, d M Y H:i:s")."GMT");
//кодировку нужно прописывать, чтобы не было "иероглифов"
header('Content-Type: text/html; charset=windows-1251');

//вместо нижепрописоногго массива, пишем любую другую функцию, котоарая обращаеться в БД или генерирует элемнт формы...
$data = array(
	'default' => "",
	'cars' => "<select name=\"year\"><option value=\"0\">&Aring;rsmodell</option><option value=\"2000\">2000</option><option value=\"2001\">2001</option><option value=\"2002\">2002</option></select>&nbsp;<select name=\"price_from\"><option value=\"0\">Pris fr&aring;n</option><option value=\"0\">0</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option></select>&nbsp;<select name=\"price_to\"><option value=\"0\">Pris till</option><option value=\"1000\">1000</option><option value=\"2000\">2000</option><option value=\"3000\">3000</option><option value=\"4000\">4000</option></select>",
	'flats' => "<select name=\"kvm\"><option value=\"0\">Yta</option><option value=\"20\">20 Kvm</option><option value=\"40\">40 Kvm</option><option value=\"60\">60 Kvm</option></select>"
);

if(!empty($_GET['cat'])) echo $data[$_GET['cat']];
else echo $data['default'];
?>


Вот вообщем-то и всё. Надеюсь ясно описал.

С помощю этой функции можно подгружать что угодно и куда угодно без перезагрузки странички.

Спасибо за внимание.
Ответить с цитированием