ajax en django usando jquery.docx
TRANSCRIPT
AJAX en Django usando jQuery
Recientemente he creado un proyecto paralelo para explorar algunas áreas de alta tecnología que quería conocer más a fondo. Una de esas áreas era cómo implementar AJAX en Django usando jQuery.
En pocas palabras, el sitio, TruthTruthLie.me (update 05.03.2013: el sitio está temporalmente fuera de línea como cambiar mi Facebook Connect aplicación de django-socialregistration a django-social-auth) presenta tres hechos acerca de usted y desafía a tus amigos a haga clic en el que es una mentira.
Cuando su amigo haga clic sobre un hecho, yo enviaré la fact_id hecho clic a través de AJAX a una url. A Django rutas patrón de URL el clic a una vista donde puedo comprobar lo que "escribe" el hecho es devolver el resultado a través de JSON al cliente y actualizar la página de forma dinámica y sin actualizar la página.
A continuación se presentan la página simplificada, patrón de url y la vista que utilizo para hacer esto. También puede visitar mi sencilla pero trabajando AJAX en Django usando jQuery página de demostración.
ajax_in_django.html:view source print ?
01.<html>02.<head>03.<script type="text/javascript"04.src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">05.</script>06.<script type="text/javascript">07.$(document).ready(function() {08.$('.fact').bind('click', function () {09.$.get("/test/"+this.id+"/", function(data) {10.if (data.fact_type=="T") {11.guess_result="This fact is true! " + data.fact_note;12.} else {13.guess_result="This fact is false! " + data.fact_note;14.}15.$('#result')[0].innerHTML=guess_result;16.});17.});18.});19.</script>20.</head>21.<body>22.<div id="1" class="fact">I love bugs</div>23.<div id="2" class="fact">I love hugs</div>24.<div id="3" class="fact">I love pugs</div>25.<div id="result">Click on the lie!</div>26.</body>27.</html>
url.py:
view source print ?
1.# Process a quiz guess2.url(r'^test/(?P<fact_id>\d+)/$',3.quiz_guess,4.name='quiz_guess'),
views.py:view source print ?
01.from django.utils import simplejson02. 03.def quiz_guess(request, fact_id): 04.message = {"fact_type": "", "fact_note": ""}05.if request.is_ajax():06.fact = get_object_or_404(Fact, id=fact_id)07.message['fact_type'] = fact.type08.message['fact_note'] = fact.note09.else:10.message = "You're the lying type, I can just tell."11.json = simplejson.dumps(message)12.return HttpResponse(json, mimetype='application/json')
Esto, por supuesto, asume que ha definido un modelo llamado "Realidad", un hecho que tiene un "tipo" y "nota", y que ha creado los tres hechos mencionados y tienen los ID de 1, 2 y 3. En mi punto de vista real, me hago algunas otras cosas como guardar el clic y comprobar si es el primero en el concurso.
Asimismo, en la página que haga más de actualizar el texto de la div "número". También puedo actualizar los facepiles de los guessors correctas e incorrectas, cambie el porcentaje de los que acertó / mal y cambiar el fondo del hecho clic.
Si quieres ver AJAX en Django usando jQuery tal como se aplica plenamente, por favor, seguir adelante y crear una prueba de muestra por sí mismo yendo aquí y haciendo clic en "Haga su propio concurso".
Usted tendrá que conectarse al sitio a través de Facebook para crear una prueba, pero si esto te hace sentir incómodo, puede conectar temporalmente, ver cómo funciona todo y luego ir a "Facebook> Cuenta> Configuración de privacidad> Aplicaciones y sitios web> Editar su configuración "y revocar el privilegio de conexión.