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‘)
views
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>
index.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>
autohome.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>
fake_ajax.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>
jsonp.html
5. static
1 function list(arg){
2 console.log(arg);
3 }
commons
1 f1(123)
commons2
时间： 2024-08-06 01:19:53