Home > Article > Backend Development > Use of Django Ajax
Use of Django Ajax
- 巴扎黑Original
- 2017-06-23 14:49:041739browse
Introduction:
AJAX = Asynchronous JavaScript and XML (Asynchronous JavaScript and XML).
AJAX is not a new programming language, but a new way of using existing standards.
AJAX is the art of exchanging data with a server and updating parts of a web page without reloading the entire page.
Ajax
1. Ajax sends simple data type:
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>
Run, result:
2. Ajax sends complex data types:
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')
is required when transmitting data via ajax.
Print data style:
jQuery Ajax method list
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 });
Implement file upload: 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>
The above is the detailed content of Use of Django Ajax. For more information, please follow other related articles on the PHP Chinese website!
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn