Maison >interface Web >js tutoriel >Tutoriel d'utilisation de Django Ajax

Tutoriel d'utilisation de Django Ajax

亚连original: 2018-05-22 13:57:441308parcourir

Cet article présente principalement le tutoriel d'utilisation de Django Ajax. Les amis qui en ont besoin peuvent s'y référer

Introduction :

AJAX =. JavaScript et XML asynchrones (JavaScript et XML asynchrones).

AJAX n'est pas un nouveau langage de programmation, mais une nouvelle façon d'utiliser les standards existants.

AJAX est l'art d'échanger des données avec un serveur et de mettre à jour des parties d'une page Web sans recharger la page entière.

Ajax

Plusieurs fois, lorsque nous demandons une opération sur une page Web, nous n'avons pas besoin d'actualiser la page. La technologie pour réaliser cette fonction nécessite Ajax !

Ajax dans jQuery peut réaliser la fonction de demande ou de soumission de données en arrière-plan sans actualiser la page. Maintenant, je l'utilise pour faire de l'ajax dans Django, alors téléchargez d'abord jquey. Plus la version est élevée, mieux c'est.

1. Ajax envoie des types de données simples :

code html : Ici, nous envoyons uniquement une simple chaîne

views. 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;)

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>

Exécuter, Résultat :

2. Ajax envoie des types de données complexes :

code html : ici, envoyez uniquement une liste contenant le type de données du dictionnaire

Étant donné que le type de données envoyé est au format dictionnaire de liste, nous devons les convertir au préalable sous forme de chaîne, sinon le programme d'arrière-plan recevra les données reçues le format n'est pas le type que nous voulons, donc 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>

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;)

Style de données d'impression :

Ce qui précède est ce que j'ai compilé pour vous, J'espère que cela sera utile à tout le monde à l'avenir.

Articles Liés

Voir plus