Maison > interface Web > js tutoriel > le corps du texte

Tutoriel d'utilisation de Django Ajax

亚连
Libérer: 2018-05-22 13:57:44
original
1291 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=='POST':
     print request.POST
     return HttpResponse('执行成功')
   else:
     return render_to_response('app03/ajax.html')
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 :

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 connexes :

Ajax coopère avec node js multer pour implémenter la fonction de téléchargement de fichiers

dwz Comment supprimer ajaxloading ( tutoriel graphique)

Principe de la requête cross-domain Ajax (tutoriel image et texte)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!