Django Ajax 사용
- 巴扎黑원래의
- 2017-06-23 14:49:041737검색
소개:
AJAX = 비동기 JavaScript 및 XML(비동기 JavaScript 및 XML).
AJAX는 새로운 프로그래밍 언어가 아니라 기존 표준을 사용하는 새로운 방식입니다.
AJAX는 전체 페이지를 다시 로드하지 않고도 서버와 데이터를 교환하고 웹 페이지의 일부를 업데이트하는 기술입니다.
Ajax
웹 페이지에서 작업을 요청할 때 페이지를 새로 고칠 필요가 없는 경우가 많습니다. 이 기능을 구현하기 위한 기술에는 Ajax가 필요합니다!
jQuery의 Ajax는 페이지를 새로 고치지 않고도 백그라운드에 데이터를 요청하거나 제출하는 기능을 구현할 수 있습니다. 이제 django에서 ajax를 수행하는 데 사용되므로 버전이 높을수록 좋습니다.
1. 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>Run, Result:
2. Ajax는 복잡한 데이터 유형을 보냅니다.
html 코드: 사전 데이터 유형이 포함된 목록만 여기에 보냅니다.
전송된 데이터 유형으로 인해 목록 형식의 경우 사전, 문자열 형태로 미리 변환해야 합니다. 그렇지 않으면 백그라운드 프로그램에서 수신한 데이터 형식이 우리가 원하는 유형이 아니므로 ajax
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')를 통해 데이터를 전송할 때 JSON이 필요합니다. 인쇄 데이터 스타일:
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 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.