Django i Ajax

14 July 2008 Comments

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