一、原生AJAX，jQuery Ajax，“伪”AJAX，JSONP

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

 from django.shortcuts import render,HttpResponse,redirect

 def index(request):

     return render(request,'index.html')

 def add1(request):

     a1 = int(request.POST.get('i1'))

     a2 = int(request.POST.get('i2'))

     return HttpResponse(a1 + a2)

 def add2(request):

     if request.method == 'GET':

         i1 = int(request.GET.get('i1'))

         i2 = int(request.GET.get('i2'))

         print('add2....')

         return HttpResponse(i1 + i2)

     else:

         print(request.POST)

         print(request.body)

         return HttpResponse('...')

 def autohome(request):

     return render(request,'autohome.html')

 def fake_ajax(request):

     if request.method == 'GET':

         return render(request,'fake_ajax.html')

     else:

         print(request.POST)

         return HttpResponse('返回值')

 def jsonp(request):

     return render(request,'jsonp.html')

views

4. templates

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <h1>首页</h1>

     <input type="text" id="i1" />

     +

     <input type="text" id="i2" />

     =

     <input type="text" id="i3" />

     <input type="button" id="btn1" value="jQuery Ajax" onclick="add1();" />

     <input type="button" id="btn2" value="原生Ajax" onclick="add2();" />

     <script src="/static/jquery-3.2.1.js"></script>

     <script>

     /* $$$$$$$ jQuery Ajax $$$$$$$ */

         function add1() {

             $.ajax({

                 url:'/add1/',

                 type:'POST',

                 data:{'i1':$('#i1').val(),'i2':$('#i2').val()},

                 success:function (arg) {

                     $('#i3').val(arg);

                 }

             })

         }

      /* $$$$$$$ 原生Ajax $$$$$$$ */

         function add2() {

     /* $$$$$$$  GET方式  $$$$$$$ */

         /*    var xhr = new XMLHttpRequest();

             xhr.onreadystatechange = function () {

                 if(xhr.readyState == 4){

                     alert(xhr.responseText);

                 }

             };

             xhr.open('GET','/add2/?i1=12&i2=19');

             xhr.send();  */

     /* $$$$$$$  POST方式  $$$$$$$ */

             var xhr = new XMLHttpRequest();

             xhr.onreadystatechange = function () {

                 if(xhr.readyState == 4){

                     alert(xhr.responseText);

                 }

             };

             xhr.open('POST','/add2/');

             xhr.setRequestHeader('Content-Typr','application/x-www-form-urlencoded');

             xhr.send('i1=12&i2=19');

         }

     </script>

 </body>

 </html>

index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <div>

         <input type="text" id="txt1" />

         <input type="button" value="查看" onclick="changeScr();" />

     </div>

     <iframe id="ifr" style="width: 1200px;height: 1000px;" src="http://www.autohome.com.cn"></iframe>

     <script>

         function changeScr() {

             var inp = document.getElementById('txt1').value;

             document.getElementById('ifr').src = inp;

         }

     </script>

 </body>

 </html>

autohome.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

 </head>

 <body>

     <form id="f1" method="POST" action="/fake_ajax/" target="ifr">

         <iframe id="ifr" name="ifr" style="display: none;"></iframe>

         <input type="text" name="user" />

         <a onclick="submitForm();">提交</a>

     </form>

     <script>

         function submitForm() {

             document.getElementById('ifr').onload = loadIframe;

             document.getElementById('f1').submit();

         }

         function loadIframe() {

             var content = document.getElementById('ifr').contentWindow.document.body.innerText;

             alert(content);

         }

     </script>

 </body>

 </html>

fake_ajax.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <script src="/static/commons.js"></script>

 </head>

 <body>

     <a onclick="sendMsg();">发送</a>

     <script>

         function sendMsg() {

             var tag = document.createElement('scaript');

             tag.src = "http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403";

             document.head.appendChild(tag);

         }

     </script>

 </body>

 </html>

jsonp.html

5. static

 function list(arg){

     console.log(arg);

 }

commons

 f1(123)

commons2

二、CORS

cors 跨站资源共享

#响应头加入

obj["Access-Control-Allow-Origin"] = "http://www.s4.com:8000"   #仅这个域名可以访问

obj["Access-Control-Allow-Origin"] = "*"                        #所有域名都可以访问

a. www.s4.com 访问 www.s5.com,在响应头加入数据，同源策略就不生效　

1. www.s4.com

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^cors/', views.cors),

]

urls.py

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 def cors(request):

     return render(request,"core.html")

 view.py

view.py

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="button" value="获取用户列表" onclick="getUsers()">

 <ul id="user_list"></ul>

 <script src="/static/jquery-3.2.1.js"></script>

 <script>

     function getUsers() {

         $.ajax({

             url:"http://www.s5.com:9000/user/",

             type:"GET",

             success:function (arg) {

                 console.log(arg);

                 console.log(typeof arg);

                 for (var i = 0; i < arg.length; i++) {

                  var tag = document.createElement("li");

                 tag.innerText = arg[i];

                 document.getElementById("user_list").appendChild(tag);

                 }

             }

         })

     }

 </script>

 </body>

 </html>

 core.html

core.html

2. www.s5.com

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^user', views.user),

]

urls.py

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 import json

 def user(request):

     user_list = ["alex","egon","root"]

     user_list_str = json.dumps(user_list)

     obj = HttpResponse(user_list_str)

     obj["Access-Control-Allow-Origin"] = "http://www.s4.com:8000"

     return obj

 views.py

views.py

b.预检request.method == "OPTIONS

1. www.s4.com

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^cors/', views.cors),

]

urls.py

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 def cors(request):

     return render(request,"core.html")

 views.py

views.py

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

 <input type="button" value="获取用户列表" onclick="getUsers()">

 <ul id="user_list"></ul>

 <script src="/static/jquery-3.2.1.js"></script>

 <script>

     function getUsers() {

         $.ajax({

             url:"http://www.s5.com:9000/user/",

             type:"DELETE",

             success:function (arg) {

                 console.log(arg);

             }

         })

     }

 </script>

 </body>

 </html>

 core.html

core.html

2. www.s5.com

urlpatterns = [

    url(r'^admin/', admin.site.urls),

    url(r'^user', views.user),

]

urls

 from django.shortcuts import render,HttpResponse

 # Create your views here.

 import json

 def user(request):

     print(request.method)

     if request.method == "OPTIONS":

         obj = HttpResponse()

         obj["Access-Control-Allow-Origin"] = "*"

         obj["Access-Control-Allow-Methods"] = "DELETE"

         return obj

     obj = HttpResponse("..")

     obj["Access-Control-Allow-Origin"] = "*"

     return obj

 view.py

views.py

框架----Django之Ajax全套实例（原生AJAX，jQuery Ajax，“伪”AJAX，JSONP，CORS）的更多相关文章

  1. thinkphp中ajax使用实例（thinkphp内置支持ajax）

    thinkphp中ajax使用实例(thinkphp内置支持ajax) 一.总结 1.thinkphp应该是内置支持ajax的,所以请求类型里面才会有是否是ajax // 是否为 Ajax 请求 if ...

  2. 利用python web框架django实现py-faster-rcnn demo实例

    操作系统.编程环境及其他: window7  cpu  python2.7  pycharm5.0  django1.8x 说明:本blog是上一篇blog(http://www.cnblogs.co ...

  3. Ajax简单实例（基于jQuery）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. ajax常用实例代码总结新手向参考(一)

    http的交互方法有四种:get.post.put(增加数据).delete(删除数据) put和delete实现用的是get和post   get方式 页面不能被修改,只是获取查询信息.但是提交的数 ...

  5. 伪ajax上传文件

    伪ajax上传文件   最近在折腾伪ajax异步上传文件. 网上搜索了一下,发现大部分方法的input file控件都局限于form中,如果是在form外的呢? 必须动态生成一个临时form和临时if ...

  6. 伪ajax操作

    什么是伪Ajax操作? 说白了就是假的ajax操作,但是它和正常的ajax操作的目的是一样的,把前端的信息发送到后台 先看一下代码吧! ajax.html <form action=" ...

  7. Django（十九）Ajax全套

    参考博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html 提交: - Form - Ajax 一.Ajax,偷偷向后台发请求 - XMLHtt ...

  8. python_way day21 Django文件上传Form方式提交，原生Ajax提交字符处啊，Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式，Django验证码，抽屉示例，

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  9. Python 20 Ajax全套

    概述 对于web应用程序:用户浏览器发送请求,服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML)渲染并显示浏览器上. 1.传统的Web应用 一个简单操作需要 ...

随机推荐

  1. 408. Add Binary【LintCode java】

    Description Given two binary strings, return their sum (also a binary string). Example a = 11 b = 1 ...

  2. web _service 接口

    1.WebService 就是 http请求    post接口 2.需要加 请求头信息 Content-Type: text/xml; 3.需要把占位符换成需要的字符串 webservice接口可以 ...

  3. MongoDB开启权限认证

      MongoDB默认安装完后,如果在配置文件中没有加上auth = true,是没有用户权限认证的,这样对于一个数据库来说是相对不安全的,尤其是在外网的情况下. 接下来是配置权限的过程: //切入到 ...

  4. 首次使用windows管理界面访问安装在UNIX或linux下的DP服务器时提示无权限访问的解决方法

    用windwos GUI管理界面连接时提示无权限访问: 在/etc/opt/omni/server/users/userlist 添加一行: "" "*" &q ...

  5. Centos7 Zabbix添加主机、图形、触发器

    制作自定义key zabbix自带模板Template OS Linux (Template App Zabbix Agent)提供CPU.内存.磁盘.网卡等常规监控,只要新加主机关联此模板,就可自动 ...

  6. AJAX学习2

    作者声明:本博客中所写的文章,都是博主自学过程的笔记,参考了很多的学习资料,学习资料和笔记会注明出处,所有的内容都以交流学习为主.有不正确的地方,欢迎批评指正. 本文学习内容:https://www. ...

  7. 20181023-10 Alpha阶段第2周/共2周 Scrum立会报告+燃尽图 07

    作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2290 Scrum master:范靖旋 一.小组介绍 组长:王一可 组员: ...

  8. Thunder团队——选题展示

    团队名称:Thunder 组长:王航 成员:李传康.代秋彤.邹双黛.苗威.宋雨.胡佑蓉.杨梓瑞 项目名称:爱阅app 视频展示: http://www.cnblogs.com/lick468/p/76 ...

  9. 软工1816 · Alpha冲刺（9/10）

    团队信息 队名:爸爸饿了 组长博客:here 作业博客:here 组员情况 组员1(组长):王彬 过去两天完成了哪些任务 学习jQuery的AJAX部分的基础知识,对web端如何异步获取服务器信息有了 ...

  10. 1104 文法产生这段C程序的推导过程