欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

Django Ajax的使用

程序员文章站 2022-05-15 17:03:56
...

简介:

AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

Ajax

  很多时候,我们在网页上请求操作时,不需要刷新页面。实现这种功能的技术就要Ajax!

jQuery中的ajax就可以实现不刷新页面就能向后台请求或提交数据的功能,现用它来做django中的ajax,所以先把jquey下载下来,版本越高越好。

一、ajax发送简单数据类型:

html代码:在这里我们仅发送一个简单的字符串

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='name' type='text' /> 9     <input type='button' value='点击执行Ajax请求' onclick='DoAjax()' />10 11     <script src='/static/jquery/jquery-3.2.1.js'></script>12     <script type='text/javascript'>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>

运行,结果:

Django  Ajax的使用


二、ajax发送复杂的数据类型:

html代码:在这里仅发送一个列表中包含字典数据类型

由于发送的数据类型为列表 字典的格式,我们提前要把它们转换成字符串形式,否则后台程序接收到的数据格式不是我们想要的类型,所以在ajax传输数据时需要JSON

 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Ajax</title> 6 </head> 7 <body> 8     <input id='name' type='text' /> 9     <input type='button' value='点击执行Ajax请求' onclick='DoAjax()' />10 11     <script src='/static/jquery/jquery-3.2.1.js'></script>12     <script type='text/javascript'>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')

打印数据样式:


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

实现文件上传:

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>

以上就是Django Ajax的使用的详细内容,更多请关注其它相关文章!