Maison > Article > interface Web > Comment utiliser Django Ajax

Comment utiliser Django Ajax

php中世界最好的语言original: 2018-03-31 15:30:281762parcourir

Cette fois, je vais vous montrer comment utiliser Django Ajax et quelles sont les précautions lors de l'utilisation de Django Ajax. Voici des cas pratiques, jetons un oeil.

Introduction :

AJAX = JavaScript asynchrone et XML (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. Utilisez-le maintenant pour faire ajax dans Django, alors téléchargez d'abord jquey. Plus la version est élevée. , mieux c'est.

1. Envoi ajax simpleType de données :

code html : Ici nous envoyons uniquement un 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')

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 = $('#name').val();
     $.ajax({
       url:'app03/ajax/',
       type:'POST',
       data:{data:temp},
       success:function(arg){
         console.log(arg);
       },
       error:function(){
         console.log('failed')
       }
     });
   }
   </script>
 </html>

Exécuter, résultat :

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

code html : n'en envoyer qu'un ici La liste contient des données de dictionnaire tapez

Puisque le type de données envoyé est au format de dictionnaire de liste, nous devons les convertir au préalable sous forme de chaîne, sinon le format de données reçu par le programme d'arrière-plan n'est pas le type que nous voulons, donc JSON est requis lors de la transmission de données via ajax

<!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 = $('#name').val();
     $.ajax({
       url:'app03/ajax/',
       type:'POST',
       data:{data:temp},
       success:function(arg){
         var obj=jQuery.parseJSON(arg);
         console.log(obj.status);
         console.log(obj.msg);
         console.log(obj.data);
         $('#name').val(obj.msg);
       },
       error:function(){
         console.log('failed')
       }
     });
   }
   </script>
 </html>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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

Comment transmettre des données de caractères spéciaux dans Ajax

Explication graphique détaillée des problèmes inter-domaines ajax (Code ci-joint)

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!

Déclaration：

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

Article précédent：Comment utiliser ajax pour soumettre des commentaires et les actualiser automatiquementArticle suivant：Comment utiliser ajax pour soumettre des commentaires et les actualiser automatiquement

Articles Liés

Voir plus