框架----Django之Ajax全套实例
Posted ForeverPine
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了框架----Django之Ajax全套实例相关的知识，希望对你有一定的参考价值。
1. 浏览器访问
http://127.0.0.1:8000/index/ http://127.0.0.1:8000/fake_ajax/ http://127.0.0.1:8000/index/jsonp/ http://127.0.0.1:8000/autohome/
2. urls
from django.conf.urls import url from django.contrib import admin from app01 import views urlpatterns = [ url(r‘^admin/‘, admin.site.urls), url(r‘^index/‘, views.index), url(r‘^add1/‘, views.add1), url(r‘^add2/‘, views.add2), url(r‘^autohome/‘, views.autohome), url(r‘^fake_ajax/‘, views.fake_ajax), url(r‘^jsonp/‘, views.jsonp), ]
3. views
1 from django.shortcuts import render,HttpResponse,redirect 2 3 def index(request): 4 return render(request,‘index.html‘) 5 6 7 def add1(request): 8 a1 = int(request.POST.get(‘i1‘)) 9 a2 = int(request.POST.get(‘i2‘)) 10 return HttpResponse(a1 + a2) 11 12 def add2(request): 13 if request.method == ‘GET‘: 14 i1 = int(request.GET.get(‘i1‘)) 15 i2 = int(request.GET.get(‘i2‘)) 16 print(‘add2....‘) 17 return HttpResponse(i1 + i2) 18 else: 19 print(request.POST) 20 print(request.body) 21 return HttpResponse(‘...‘) 22 23 24 def autohome(request): 25 return render(request,‘autohome.html‘) 26 27 28 def fake_ajax(request): 29 if request.method == ‘GET‘: 30 return render(request,‘fake_ajax.html‘) 31 else: 32 print(request.POST) 33 return HttpResponse(‘返回值‘) 34 35 36 def jsonp(request): 37 return render(request,‘jsonp.html‘)
4. templates
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <h1>首页</h1> 9 <input type="text" id="i1" /> 10 + 11 <input type="text" id="i2" /> 12 = 13 <input type="text" id="i3" /> 14 15 <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();" /> 16 <input type="button" id="btn2" value="原生Ajax" onclick="add2();" /> 17 18 <script src="/static/jquery-3.2.1.js"></script> 19 <script> 20 /* $$$$$$$ jQuery Ajax $$$$$$$ */ 21 function add1() { 22 $.ajax({ 23 url:‘/add1/‘, 24 type:‘POST‘, 25 data:{‘i1‘:$(‘#i1‘).val(),‘i2‘:$(‘#i2‘).val()}, 26 success:function (arg) { 27 $(‘#i3‘).val(arg); 28 } 29 }) 30 31 } 32 33 34 /* $$$$$$$ 原生Ajax $$$$$$$ */ 35 function add2() { 36 /* $$$$$$$ GET方式 $$$$$$$ */ 37 /* var xhr = new XMLHttpRequest(); 38 xhr.onreadystatechange = function () { 39 if(xhr.readyState == 4){ 40 alert(xhr.responseText); 41 } 42 }; 43 xhr.open(‘GET‘,‘/add2/?i1=12&i2=19‘); 44 xhr.send(); */ 45 46 47 48 /* $$$$$$$ POST方式 $$$$$$$ */ 49 var xhr = new XMLHttpRequest(); 50 xhr.onreadystatechange = function () { 51 if(xhr.readyState == 4){ 52 alert(xhr.responseText); 53 } 54 }; 55 xhr.open(‘POST‘,‘/add2/‘); 56 xhr.setRequestHeader(‘Content-Typr‘,‘application/x-www-form-urlencoded‘); 57 xhr.send(‘i1=12&i2=19‘); 58 } 59 </script> 60 </body> 61 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <div> 9 <input type="text" id="txt1" /> 10 <input type="button" value="查看" onclick="changeScr();" /> 11 </div> 12 <iframe id="ifr" style="width: 1200px;height: 1000px;" src="http://www.autohome.com.cn"></iframe> 13 14 <script> 15 function changeScr() { 16 var inp = document.getElementById(‘txt1‘).value; 17 document.getElementById(‘ifr‘).src = inp; 18 } 19 </script> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form id="f1" method="POST" action="/fake_ajax/" target="ifr"> 9 <iframe id="ifr" name="ifr" style="display: none;"></iframe> 10 <input type="text" name="user" /> 11 <a onclick="submitForm();">提交</a> 12 </form> 13 14 <script> 15 function submitForm() { 16 document.getElementById(‘ifr‘).onload = loadIframe; 17 document.getElementById(‘f1‘).submit(); 18 } 19 function loadIframe() { 20 var content = document.getElementById(‘ifr‘).contentWindow.document.body.innerText; 21 alert(content); 22 } 23 </script> 24 </body> 25 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script src="/static/commons.js"></script> 7 </head> 8 <body> 9 <a onclick="sendMsg();">发送</a> 10 <script> 11 function sendMsg() { 12 var tag = document.createElement(‘scaript‘); 13 tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403"; 14 document.head.appendChild(tag); 15 } 16 </script> 17 </body> 18 </html>
5. static
1 function list(arg){ 2 console.log(arg); 3 }
1 f1(123)
以上是关于框架----Django之Ajax全套实例的主要内容，如果未能解决你的问题，请参考以下文章