RkBlog

Hardware, programming and astronomy tutorials and reviews.

Django i Ajax

Na dynamicdrive.com dostępna jest prosta biblioteka JavaScript (plik ajaxroutine.js) umożliwiająca stosowanie AJAXa w dość prosty sposób. By użyć jej w django umieść plik ajaxroutine.js w katalogu na pliki statyczne (zazwyczaj "site_media") a następnie dołącz go do kodu HTML szablonu:
<script type="text/javascript" src="/site_media/ajaxroutine.js"></script>


Naszym celem będzie stworzenie prostej walidacji formularza rejestracji użytkownika. Załóżmy że mamy taki kod formularza:
<div id="aj" style="text-align:center;"></div>
<form action="." method="post" name="r">
<input type="text" id="id_login" name="login" size="20" value="{{ data.login }}" maxlength="200" />
<input type="text" id="id_email" name="email" size="20" value="{{ data.email }}" maxlength="75" />
<input type="submit" value="Zarejestruj">
</form>
Celowo pominąłem inne pola jak np. hasło. Chcemy sprawdzić czy login lub email jest wolny i odpowiednio poinformować rejestrującą się osobę. Sprawdzanie musi zostać wywołane po wpisaniu wartości do pola, czyli onblur. Musimy dodać wywołanie funkcji JavaScript, która skorzysta z ajaxroutine.js by wysłać żądanie do serwera i wyświetlić odpowiedź. Oto nieznacznie zmodyfikowana funkcja processGetPost() z przykładu na dynamicdrive:
<script type="text/javascript">
function processGetPost()
	{
	var myajax=ajaxpack.ajaxobj
	var myfiletype=ajaxpack.filetype
	if (myajax.readyState == 4)
		{
		if (myajax.status==200 || window.location.href.indexOf("http")==-1)
			{
			// jeżeli coś zwrócone wyświetl
			if (myajax.responseText.length > 3)
				{
				document.getElementById('aj').innerHTML='<h1>' + myajax.responseText + '</h1>';
				}
			else
				{
				// czyścimy komunikat
				document.getElementById('aj').innerHTML='';
				}
			}
		}
	}
</script>
Nad formularzem jest DIV o id "aj". Nasza funkcja umieści w nim kod HTML zawierający odpowiedź z serwera. Teraz musimy dodać do pól formularza wywołanie tej funkcji:
onblur="ajaxpack.getAjaxRequest('/URL/WIDOKU/', 'parametr=wartość', 'txt');"
/URL/WIDOKU/ to strona jaka ma być wywołana - url do widoku, jaki zaraz stworzymy. Drugi argument to lista parametrów GET, za pomocą której możemy przesłać dane z formularza za pomocą:
document.NAZWA_FORMULARZA.NAZWA_POLA.value
document.r.email.value
Zmodyfikowany kod formularza wygląda tak:
<div id="aj" style="text-align:center;"></div>
<form action="." method="post" name="r">
<input type="text" id="id_login" name="login" size="20" value="{{ data.login }}" maxlength="200" onblur="ajaxpack.getAjaxRequest('/user/checkreg/', 'login=' + document.r.login.value, processGetPost, 'txt');" />
<input type="text" id="id_email" name="email" size="20" value="{{ data.email }}" maxlength="75" onblur="ajaxpack.getAjaxRequest('/user/checkreg/', 'email=' + document.r.email.value, processGetPost, 'txt');" />
<input type="submit" value="Zarejestruj">
</form>
Odpowiednio dla pola na login i na email przesyłamy wartości z tych pól pod zmiennymi "login" i "email". Wywołuję url /user/checkreg/, który jest zwykłym widokiem django o kodzie:
def checkreg(request):
	if request.GET.has_key('login'):
		try:
			User.objects.get(username=request.GET['login'])
		except:
			return HttpResponse('OK! Login Wolny')
		else:
			return HttpResponse('BŁĄD: Login Zajęty')
	if request.GET.has_key('email'):
		try:
			User.objects.get(email=request.GET['email'])
		except:
			return HttpResponse('OK! Email Wolny')
		else:
			return HttpResponse('BŁĄD: Email Zajęty')
	return HttpResponse('')
RkBlog

Django, 14 July 2008, Piotr Maliński

Comment article