Tutorial zur Verwendung von Django Ajax-js-Tutorial-php.cn

Tutorial zur Verwendung von Django Ajax

亚连

Freigeben： 2018-05-22 13:57:44

Original

1299 Leute haben es durchsucht

In diesem Artikel wird hauptsächlich das Tutorial zur Verwendung von Django Ajax vorgestellt. Freunde, die es benötigen, können darauf verweisen

Einführung:

AJAX = Asynchrones JavaScript und XML (asynchrones JavaScript und XML).

AJAX ist keine neue Programmiersprache, sondern eine neue Art, bestehende Standards zu nutzen.

AJAX ist die Kunst, Daten mit einem Server auszutauschen und Teile einer Webseite zu aktualisieren, ohne die gesamte Seite neu zu laden.

Ajax

Wenn wir einen Vorgang auf einer Webseite anfordern, müssen wir die Seite oft nicht aktualisieren. Die Technologie zum Erreichen dieser Funktion erfordert Ajax!

Ajax in jQuery kann die Funktion des Anforderns oder Sendens von Daten im Hintergrund realisieren, ohne die Seite zu aktualisieren. Jetzt verwende ich es, um Ajax in Django auszuführen. Je höher die Version, desto besser.

1. Ajax sendet einfache Datentypen:

HTML-Code: Hier senden wir nur eine einfache Zeichenfolge

Ansichten. py

 #coding:utf8
 from django.shortcuts import render,HttpResponse,render_to_response
 def Ajax(request):
   if request.method==&#39;POST&#39;:
     print request.POST
     return HttpResponse(&#39;执行成功&#39;)
   else:
     return render_to_response(&#39;app03/ajax.html&#39;)

Nach dem Login kopieren

ajax.html

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         console.log(arg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>

Nach dem Login kopieren

Run, das Ergebnis:

2. Ajax sendet komplexe Datentypen:

HTML-Code: Hier wird nur eine Liste gesendet, die den Datentyp „Wörterbuch“ enthält.

Da der gesendete Datentyp im Format eines Listenwörterbuchs vorliegt, müssen wir ihn vorher in eine Zeichenfolgenform konvertieren, andernfalls wird das vom Hintergrundprogramm empfangene Datenformat verwendet nicht der Typ, den wir wollen, daher wird JSON

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-">
 <title>Ajax</title>
 </head>
 <body>
   <input id=&#39;name&#39; type=&#39;text&#39; />
   <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />
   <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>
   <script type=&#39;text/javascript&#39;>
   function DoAjax(){
     var temp = $(&#39;#name&#39;).val();
     $.ajax({
       url:&#39;app03/ajax/&#39;,
       type:&#39;POST&#39;,
       data:{data:temp},
       success:function(arg){
         var obj=jQuery.parseJSON(arg);
         console.log(obj.status);
         console.log(obj.msg);
         console.log(obj.data);
         $(&#39;#name&#39;).val(obj.msg);
       },
       error:function(){
         console.log(&#39;failed&#39;)
       }
     });
   }
   </script>
 </html>

Nach dem Login kopieren

views.py

 #coding:utf
 from django.shortcuts import render,HttpResponse,render_to_response
 import json
 # Create your views here.
 def Ajax(request):
   if request.method==&#39;POST&#39;:
     print request.POST
     data = {&#39;status&#39;:,&#39;msg&#39;:&#39;请求成功&#39;,&#39;data&#39;:[&#39;&#39;,&#39;&#39;,&#39;&#39;]}
     return HttpResponse(json.dumps(data))
   else:
     return render_to_response(&#39;app/ajax.html&#39;)

Nach dem Login kopieren

benötigt, wenn Daten mit Ajax übertragen werden

Druckdatenstil:

Das Obige habe ich für Sie zusammengestellt. Ich hoffe, es wird hilfreich sein Dich in der Zukunft.

Verwandte Artikel:

Ajax arbeitet mit Node JS Multer zusammen, um die Datei-Upload-Funktion zu implementieren

dwz So entfernen Sie Ajaxloading ( Grafik-Tutorial)

Prinzip der domänenübergreifenden Ajax-Anfrage (Bild- und Text-Tutorial)

Das obige ist der detaillierte Inhalt vonTutorial zur Verwendung von Django Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!