djangorestframework如何处理请求 python django发送请求

转载

Python数据分析 2023-07-14 09:48:40

一.Ajax向本地后台发送数据：
方式一：引入JQuery通过Ajax发送GET请求
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.GET)                      #接收到：<QueryDict: {'xixi': ['123']}>
    return HttpResponse('...')

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>引入JQuery通过Ajax发送GET请求</h1>
    <div>
        <a class="btn" onclick="AjaxSubmit1();">点击</a>
    </div>

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

    <script>
        function  AjaxSubmit1() {                                {#Query_Ajax发送GET请求#}
            $.ajax({
                url: '/ajax1.html',                              {#传给ajax1.html#}
                type:'GET',                                      {#GET方式#}
                data: {'xixi':123},                              {#传输数据#}
                success:function (arg) {
                }
            })
        }
    </script>
</body>
</html>

访问点击：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_html

服务端接收到：
[21/Mar/2019 11:38:57] "GET /ajax1.html?xixi=123 HTTP/1.1" 200 3
<QueryDict: {'xixi': ['123']}>
方式二：引入JQuery通过Ajax发送POST请求
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.POST)                     #接收到：<QueryDict: {'xixi': ['123']}>
    return HttpResponse('...')

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>引入JQuery通过Ajax发送POST请求</h1>
    <div>
        <a class="btn" onclick="AjaxSubmit2();">点击</a>
    </div>

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

    <script>
        function  AjaxSubmit2() {                                {#Query_Ajax发送GET请求#}
            $.ajax({
                url: '/ajax1.html',                              {#传给ajax1.html#}
                type:'POST',                                     {#POST方式#}
                data: {'xixi':123},                              {#传输数据#}
                success:function (arg) {
                }
            })
        }
    </script>
</body>
</html>

访问点击：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_html_02

服务端接收到：
<QueryDict: {'xixi': ['123']}>
[21/Mar/2019 12:06:41] "POST /ajax1.html HTTP/1.1" 200 3
方式三：通过原生Ajax叫XMLHttpRequest对象发送GET请求
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.GET)                      #接收到：<QueryDict: {'xixi': ['123']}>
    return HttpResponse('...')

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>通过原生Ajax叫XMLHttpRequest对象发送GET请求</h1>
    <div>
        <a class="btn" onclick="AjaxSubmit1();">点击</a>
    </div>

    <script>
        function AjaxSubmit1() {
            var xhr = new XMLHttpRequest();                    {#创建XMLHttpRequest对象赋值给xhr#}
            xhr.onreadystatechange = function () {             {#在send前设置回调，onreadystatechange回调函数当某个状态更改的时候执行#}
                if(xhr.readyState == 4){                       {#状态等于4是接收完毕服务器返回的数据#}

                    console.log(xhr.responseText);             {#接收的数据在responseText#}

                }
            };
            xhr.open('GET','/ajax1.html?xixi=123');             {#利用open方法以GET方式向ajax1.html创建连接#}
            xhr.send(null);                                     {#send发送连接,GET方式为null#}
        }
    </script>
</body>
</html>

访问点击：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_数据_03

服务端接收到：
<QueryDict: {'xixi': ['123']}>
[21/Mar/2019 11:50:35] "GET /ajax1.html?xixi=123 HTTP/1.1" 200 3
方式四：通过原生Ajax叫XMLHttpRequest对象发送POST请求
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.GET)                      #接收到：<QueryDict: {'xixi': ['123']}>
    return HttpResponse('...')

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>通过原生Ajax叫XMLHttpRequest对象发送POST请求</h1>
    <div>
        <a class="btn" onclick="AjaxSubmit2();">点击</a>
    </div>

    <script>
       function AjaxSubmit2() {
            var xhr = new XMLHttpRequest();                    {#创建XMLHttpRequest对象赋值给xhr#}
            xhr.onreadystatechange = function () {             {#在send前设置回调，onreadystatechange回调函数当某个状态更改的时候执行#}
                if(xhr.readyState == 4){                       {#状态等于4是接收完毕服务器返回的数据#}

                    console.log(xhr.responseText);             {#接收的数据在responseText#}

                }
            };
            xhr.open('POST','/ajax1.html');                                                           {#利用open方法以POST方式向ajax1.html创建连接#}
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); {#POST需要把请求头也发到服务端，才能把发过去的数据从body里转换到POST里#}
            xhr.send("xixi=123");                                                                     {#send发送连接和内容#}
        }
    </script>
</body>
</html>

访问点击：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_ajax_04

服务端接收到：
<QueryDict: {'xixi': ['123']}>
[21/Mar/2019 12:11:34] "POST /ajax1.html HTTP/1.1" 200 3
方式五：伪造Ajax请求通过iframe标签+form表单
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.POST)                     #接收到：<QueryDict: {'xixi': ['123']}>
    ret = {'status': True, 'message': '....'}
    import json
    return HttpResponse(json.dumps(ret))

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>基于Iframe+Form表单实现伪造ajax</h1>
   <div>
        <iframe id="iframe" name="ifra"></iframe>                            {#设定iframe(不刷新的特性,提交后返回的值在iframe里) #}
        <form id="fm" action="/ajax1.html" method="POST" target="ifra">      {#设定from(提交数据)，from和ifram关联，target="ifra" #}
            <input name="xixi" value="123" />
            <a onclick="AjaxSubmit1()">提交</a>                               {#通过a标签把表单提交，把a标签绑定事件#}
        </form>

    </div>

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

    <script>
       function AjaxSubmit1() {
            document.getElementById('iframe').onload = reloadIframe;       //在提交过去之前给iframe绑定onload事件
            document.getElementById('fm').submit();                        //找到fm表单提交
        }

        function reloadIframe() {                                         //当数据返回回来自动执行调用reloadIframe
            var content = this.contentWindow.document.body.innerHTML;     //this=当前标签，回调函数的内容
            var obj = JSON.parse(content);                                //把content转换成对象
            if(obj.status){
                alert(obj.message);                                       //弹出框
            }
        }
    </script>
</body>
</html>

访问点击：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_html_05

服务端接收到：
<QueryDict: {'xixi': ['123']}>
[21/Mar/2019 14:46:38] "POST /ajax1.html HTTP/1.1" 200 35
二.Ajax向后台发送文件：
1.通过FormData文件上传
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.POST)
    print(request.FILES)
    ret = {'status': True, 'message': '....'}
    import json
    return HttpResponse(json.dumps(ret))

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>通过FormData文件上传</h1>
    <input type="file" id="img" />
    <a class="btn" onclick="AjaxSubmit1();">上传</a>

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

    <script>
       function AjaxSubmit1() {
            document.getElementById('img')[0]                           //获取到上传文件img选择器对象，[0]代表上传的文件对象
            var data = new FormData();                                  //创建FormData对象封装文件信息和文件内容到data
            data.append('k1','v1');                                     //上传的文本，构造特殊的字典
            data.append('k3',document.getElementById('img').files[0]);  //上传的文件对象

            $.ajax({
                url: '/ajax1.html',
                type: 'POST',
                data:data,                                              //data获取文件
                success:function (arg) {                                //传给后端
                    console.log(arg)                                    //在控制台上输出
                },
                 processData: false,                                   //tell jQuery not to process the data
                 contentType: false                                    //tell jQuery not to set contentType

            })
        }

    </script>
</body>
</html>

访问发送文件：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_ajax_06

服务端接收到：
<QueryDict: {'k1': ['v1']}>
<MultiValueDict: {'k3': [<InMemoryUploadedFile: 笔记.txt (text/plain)>]}>
[21/Mar/2019 15:58:06] "POST /ajax1.html HTTP/1.1" 200 35
2.基于Iframe+Form表单实现伪造ajax文件上传
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^index.html$', views.index),
    url(r'^ajax1.html$', views.ajax1),                  #提交的数据
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
def index(request):                        #主页面发送请求

    return render(request,'index.html')

def ajax1(request):                         #接收ajax提交的数据
    print(request.POST)
    print(request.FILES)
    ret = {'status': True, 'message': '....'}
    import json
    return HttpResponse(json.dumps(ret))

(3)发送页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>                                       {#点击按钮CSS#}
        .btn{
            display: inline-block;
            padding: 5px 10px;
            background-color: coral;
            color: white;
        }
    </style>
</head>
<body>
    <h1>基于Iframe+Form表单实现伪造ajax文件上传</h1>
    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>                                {#设定iframe(不刷新的特性,提交后返回的值在iframe里) #}
    <form id="fm1" action="/ajax1.html" method="POST" enctype="multipart/form-data" target="ifra1">  {#文件上传enctype="multipart/form-data" #}
        <input type="text" name="k1" />
        <input type="text" name="k2" />
        <input type="file" name="k3" />
        <a class="btn" onclick="AjaxSubmit1()">上传</a>                              {#通过a标签把表单提交，把a标签绑定事件#}
    </form>

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

    <script>
       function AjaxSubmit1() {
            document.getElementById('iframe1').onload = reloadIframe;     //在提交过去之前给iframe绑定onload事件
            document.getElementById('fm1').submit();                      //找到fm表单提交
        }
        function reloadIframe() {
            var content = this.contentWindow.document.body.innerHTML;     //this=当前标签，回调函数的内容
            var obj = JSON.parse(content);                                //把content转换成对象
            console.log(obj);                                             //在控制台上输出
        }

    </script>
</body>
</html>

访问上传：http://127.0.0.1:8080/index.html

djangorestframework如何处理请求 python django发送请求_html_07

服务端接收到：
<QueryDict: {'k1': ['xixi'], 'k2': ['123']}>
<MultiValueDict: {'k3': [<InMemoryUploadedFile: 笔记.txt (text/plain)>]}>
[21/Mar/2019 16:30:56] "POST /ajax1.html HTTP/1.1" 200 35
3.Ajax往本地上传图片后并显示图片
(1)URL：xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^upload.html$', views.upload),
    url(r'^upload_img.html$', views.upload_img),
]

(2)视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse
import json
def upload(request):                                   #主页函数
    return render(request,'upload.html')

def upload_img(request):                               #接收上传文件函数
    import os
    import uuid

    nid = str(uuid.uuid4())                           #生成随机字符串
    ret = {'status':True,'data':None,'message':None}  #定义ret给用户返回用
    obj = request.FILES.get('k3')                     #k3对象(文件大小,文件名称,文件内容等)因为发送name=k3，所以接收的名字也是k3赋值给obj

    file_path = os.path.join('static', nid+obj.name)  #file_path上传文件存放的绝对路径(static/随机字符串+文件名)

    f = open(file_path,'wb')                          #在服务器端创建一个文件(文件名跟用户提交的文件名一样)
    for line in obj.chunks():                         #去obj里一块一块的拿内容
        f.write(line)                                 #每拿一点写一点
    f.close()
    ret['data'] = file_path                           #把路径存放在data里会随ret返回给用户
    return HttpResponse(json.dumps(ret))              #把ret给用户返回

(3)上传显示页面：xixi\templates\index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn{
            display: inline-block;
            padding: 5px 10px;
           
            color: white;
        }
    </style>
</head>
<body>
    <iframe style="display: none" id="iframe1" name="ifra1"></iframe>
    <form id="fm1" action="/upload_img.html" method="POST" enctype="multipart/form-data" target="ifra1">
        <input type="file" name="k3" onchange="uploadFile();" />                                            {#点击预览文件的时候触发#}
    </form>

    <h3>预览上传照片</h3>
    <div id="preview">                                                   {#如果上传成功让preview里新增img标签#}
    </div>

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

        function uploadFile() {
            document.getElementById('iframe1').onload = reloadIframe1;    //在提交过去之前给iframe绑定onload事件当数据返回回来自动执行调用reloadIframe1
            document.getElementById('fm1').submit();                      //找到fm1标签做提交把要上传的文件传到后台
        }

        function reloadIframe1() {
            var content = this.contentWindow.document.body.innerHTML;     //this=当前标签，里面是回调函数的内容赋值给content
            var obj = JSON.parse(content);                                //把content转换成对象

            var tag = document.createElement('img');                      //生成img标签
            tag.src = obj.data;                                           //等于后端传过来的上传照片的路径
            $('#preview').empty().append(tag);                            //给preview添加照片显示(每次添加前empty()清空历史)
        }
    </script>
</body>
</html>

访问上传图片后：http://127.0.0.1:8080/upload.html

djangorestframework如何处理请求 python django发送请求_数据_08

三、通过JSONP方式进行跨域Ajax
1.浏览器同源策略：XMLHttpRequest遵循这个策略只能往本地发请求，巧妙的机制JSONP可以往别的网站发
2.JSONP：执行方式：
(1)本地利用创建script块，在其中执行src属性为远程的url
(2)在服务端返回的时候把数据包裹一个函数：函数(返回值)
(3)本地定义一个函数执行：
function 函数(arg){

}
3.手动实现JSONP方式：
(1)远程服务器：URL：\xi\xi\urls.py

from django.conf.urls import url
from django.contrib import admin
from yao import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^yao.html$', views.yao),
]

(2)远程服务器视图函数：xi\yao\views.py

from django.shortcuts import render,HttpResponse

def yao(request):
    return HttpResponse('func("我是远程服务器");')     #遵循JSONP格式函数(返回值)

访问：http://127.0.0.1:8000/yao.html
返回：func("我是远程服务器");
(1)本地服务器URL：\xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^jsonp.html$', views.jsonp),    #发送主页
]

(2)本地服务器视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse

def jsonp(request):
    return render(request,'jsonp.html')

(3)本地服务器页面：xixi\templates\jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="content"></div>
    <input type="button" value="JSONP方式" onclick="submitJsonp1();" />
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>
        function submitJsonp1() {
            var tag = document.createElement('script');   //第一：创建script标签[利用script不受同源策略机制]
            tag.src = 'http://127.0.0.1:8000/yao.html';   //把src路径写上远程地址路径(src相当于是js文件，返回的内容是"func("我是远程服务器")")
            document.head.appendChild(tag);               //发一个请求在head里加上这个script标签
            document.head.removeChild(tag);               //然后删掉
        }

        function func(arg) {              //第二：返回的数据是以js代码进行解释的给它包裹一个函数func，在本地执行远端传来的func函数---func("我是远程服务器")
            $('#content').html(arg);      //拿到数据返回到页面
        }
    </script>
</body>
</html>

访问点击JSONP方式：http://127.0.0.1:8080/jsonp.html

返回结果：

djangorestframework如何处理请求 python django发送请求_html_09

4.通过jquery类库实现JSONP：
远程服务器：
(1)远程服务器URL：\xi\xi\urls.py

from django.conf.urls import url
from django.contrib import admin
from yao import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^yao.html$', views.yao),
]

(2)远程服务器视图函数：xi\yao\views.py

from django.shortcuts import render,HttpResponse

def yao(request):
    name = request.GET.get('callback')                        #传的函数名
    return HttpResponse('%s("我是远程服务器");' %(name))     #遵循JSONP格式函数(返回值)

访问：http://127.0.0.1:8000/yao.html
返回：func("我是远程服务器");
(1)本地服务器URL：\xixi\xixi\urls.py

from django.conf.urls import url
from django.contrib import admin
from ajax_app import views
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^jsonp.html$', views.jsonp),    #发送主页
]

(2)本地服务器视图函数：xixi\ajax_app\views.py

from django.shortcuts import render,HttpResponse

def jsonp(request):
    return render(request,'jsonp.html')

(3)本地服务器页面：xixi\templates\jsonp.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

    <div id="content"></div>
    <input type="button" value="JSONP方式" onclick="submitJsonp1();" />
    <script src="/static/js/jquery-3.1.1.js"></script>
    <script>
        function submitJsonp1() {
            $.ajax({                                                  //$.ajax方式发(内部创建script标签)
                url: 'http://127.0.0.1:8000/yao.html',                //远程地址路径,
                type: 'GET',                                          //jsonp只能发GET请求
                dataType: 'jsonp',                                    //加上jsonp后就不会通过XMLHttpRequest对象发送，在内部创建script代码在head里增加后在删除掉
                jsonp: 'callback',                                    //callbak表示?callback=
                jsonpCallback: 'func'                                 //func表示?callback等于号后面的func
            })
        }
        function func(arg) {                                          //执行func函数
            $('#content').html(arg);                                  //拿到数据返回到页面
        }
    </script>
</body>
</html>

访问点击JSONP：http://127.0.0.1:8080/jsonp.html

djangorestframework如何处理请求 python django发送请求_数据_10