Tutoriel d'utilisation de Django Ajax-js tutoriel-php.cn

Tutoriel d'utilisation de Django Ajax

亚连

Libérer： 2018-05-22 13:57:44

original

1299 Les gens l'ont consulté

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

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

views.py

< est requis lors de la transmission de données via ajax 🎜. >

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

Copier après la connexion

Style de données d'impression :