Maison  >  Article  >  développement back-end  >  Utilisation de Django Ajax

Utilisation de Django Ajax

巴扎黑
巴扎黑original
2017-06-23 14:49:041789parcourir

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 ne le faisons pas besoin de rafraîchir 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 chaîne simple

views.py

 1 #coding:utf8 2 from django.shortcuts import render,HttpResponse,render_to_response 3  4 def Ajax(request): 5     if request.method=='POST': 6         print request.POST 7  8         return HttpResponse('执行成功') 9     else:10         return render_to_response('app03/ajax.html')

ajax.html

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 </head> 7 <body> 8     <input id=&#39;name&#39; type=&#39;text&#39; /> 9     <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />10 11     <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>12     <script type=&#39;text/javascript&#39;>13      function  DoAjax(){14          var temp = $('#name').val();15          $.ajax({16              url:'app03/ajax/',17              type:'POST',18              data:{data:temp},19              success:function(arg){20                  console.log(arg);21              },22              error:function(){23                  console.log('failed')24              }25          });26      }27     </script>28 </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 sous forme de chaîne à l'avance, sinon le format de données reçu par le programme d'arrière-plan n'est pas du type que nous voulons, donc JSON

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 </head> 7 <body> 8     <input id=&#39;name&#39; type=&#39;text&#39; /> 9     <input type=&#39;button&#39; value=&#39;点击执行Ajax请求&#39; onclick=&#39;DoAjax()&#39; />10 11     <script src=&#39;/static/jquery/jquery-3.2.1.js&#39;></script>12     <script type=&#39;text/javascript&#39;>13      function  DoAjax(){14          var temp = $('#name').val();15          $.ajax({16              url:'app03/ajax/',17              type:'POST',18              data:{data:temp},19              success:function(arg){20                  var  obj=jQuery.parseJSON(arg);21                  console.log(obj.status);22                  console.log(obj.msg);23                  console.log(obj.data);24                  $('#name').val(obj.msg);25              },26              error:function(){27                  console.log('failed')28              }29          });30      }31     </script>32 </html>

views.py

 1 #coding:utf8 2 from django.shortcuts import render,HttpResponse,render_to_response 3 import json 4  5 # Create your views here. 6 def Ajax(request): 7     if request.method=='POST': 8         print request.POST 9         data  = {'status':0,'msg':'请求成功','data':['11','22','33']}10         return HttpResponse(json.dumps(data))11         12     else:13         return render_to_response('app03/ajax.html')
Style de données d'impression :


Liste des méthodes jQuery Ajax

 1 jQuery.get(...) 2                 所有参数: 3                      url: 待载入页面的URL地址 4                     data: 待发送 Key/value 参数。 5                  success: 载入成功时回调函数。 6                 dataType: 返回内容格式,xml, json,  script, text, html 7   8   9             jQuery.post(...)10                 所有参数:11                      url: 待载入页面的URL地址12                     data: 待发送 Key/value 参数13                  success: 载入成功时回调函数14                 dataType: 返回内容格式,xml, json,  script, text, html15  16  17             jQuery.getJSON(...)18                 所有参数:19                      url: 待载入页面的URL地址20                     data: 待发送 Key/value 参数。21                  success: 载入成功时回调函数。22  23  24             jQuery.getScript(...)25                 所有参数:26                      url: 待载入页面的URL地址27                     data: 待发送 Key/value 参数。28                  success: 载入成功时回调函数。29  30  31             jQuery.ajax(...)32  33                 部分参数:34  35                         url:请求地址36                        type:请求方式,GET、POST(1.9.0之后用method)37                     headers:请求头38                        data:要发送的数据39                 contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")40                       async:是否异步41                     timeout:设置请求超时时间(毫秒)42  43                  beforeSend:发送请求前执行的函数(全局)44                    complete:完成之后执行的回调函数(全局)45                     success:成功之后执行的回调函数(全局)46                       error:失败之后执行的回调函数(全局)47                  48  49                     accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型50                    dataType:将服务器端返回的数据转换成指定类型51                                    "xml": 将服务器端返回的内容转换成xml格式52                                   "text": 将服务器端返回的内容转换成普通文本格式53                                   "html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。54                                 "script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式55                                   "json": 将服务器端返回的内容转换成相应的JavaScript对象56                                  "jsonp": JSONP 格式57                                           使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数58  59                                   如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string60  61                  converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数62                          $.ajax({63                               accepts: {64                                 mycustomtype: 'application/x-some-custom-type'65                               },66                                67                               // Expect a `mycustomtype` back from server68                               dataType: 'mycustomtype'69  70                               // Instructions for how to deserialize a `mycustomtype`71                               converters: {72                                 'text mycustomtype': function(result) {73                                   // Do Stuff74                                   return newresult;75                                 }76                               },77                             });
Implémenter le téléchargement de fichiers :

views.py

 1 from django.shortcuts import render,HttpResponse,render_to_response 2 import json,os,uuid 3  4 def Upload(request): 5     if request.method=='POST': 6         id = str(uuid.uuid4()) 7         ret = {'status':True,'data':None,'message':None} 8         obj = request.FILES.get('k3') 9         10         file_path = os.path.join('static',id+obj.name)11         f = open(obj.name,'wb')12         for line in obj.chunks():13             f.write(line)14         f.close()15         ret['data'] = file_path16         return HttpResponse(json.dumps(ret))17     else:18         return render_to_response('appajax/put_file.html')
put_file.html

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>上传文件</title> 6     <style> 7     .log{ 8                display: inline-block; 9                 padding:5px 10px;10                 background-color:coral;11                 color: white;12             }13     </style>14 </head>15 <body>16     <iframe style="display:none" id="ifrname1" name="ifra1"></iframe>17     <form id="fm1" action="/appajax/put_file.html" method="post" enctype="multipart/form-data" target="ifra1">18         <input type="file" name="k3" onchange="UploadFile();"/>19     </form>20     <h3>预览</h3>21     <div id="preview"></div>22     23     <script src="/static/jquery/jquery-3.2.1.js?1.1.10"></script>24     <script type="text/javascript">25         function UploadFile(){26             document.getElementById('iframe1').onload = ReloadIfrname();27             document.getElementById('fm1').submit();28         };29         function ReloadIfrname(){30             var content = this.contentWindow.document.body.innerHTML;31             var obj = JSON.parse(content);32             var tag = document.createElement('img');33             tar.src = obj.data;34             $('#preview').empty().append(tag);35         };36     </script>37 </body>38 </html>

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