Django和Ajax

时间 2019-11-16

标签 django ajax 栏目 Python 繁體版

原文原文链接

1、Ajax简介

向服务器发送请求的途径：javascript

（1）浏览器地址栏，默认get请求css

（2）form表单：get请求、post请求html

（3）a标签，默认get请求前端

（4）Ajax 特色：异步请求、局部刷新java

　　AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即用Javascript语言与服务器进行异步交互，传输的数据为XML（固然，传输的数据不仅是XML,如今更多使用json数据）。python

同步交互：客户端发出一个请求后，须要等待服务器响应结束后，才能发出第二个请求；
异步交互：客户端发出一个请求后，无需等待服务器响应结束，就能够发出第二个请求。

　　AJAX除了异步的特色外，还有一个就是：浏览器页面局部刷新；（这一特色给用户的感觉是在不知不觉中完成请求和响应过程）jquery

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

    <style>
        .error{
            color:red
        }
    </style>
</head>
<body>


<form class="Form">

    <p>姓名&nbsp;&nbsp;<input class="v1" type="text" name="username" mark="用户名"></p>
    <p>密码&nbsp;&nbsp;<input class="v1" type="text" name="email" mark="邮箱"></p>
    <p><input type="submit" value="submit"></p>

</form>

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

<script>

    $(".Form :submit").click(function(){

        flag=true;

        $("Form .v1").each(function(){

            var value=$(this).val();
            if (value.trim().length==0){
                 var mark=$(this).attr("mark");
                 var $span=$("<span>");
                 $span.html(mark+"不能为空!");
                 $span.prop("class","error");
                 $(this).after($span);

                 setTimeout(function(){
                      $span.remove();
                 },800);

                 flag=false;
                 return flag;

            }
        });
        return flag
    });


</script>


</body>
</html>

js实现的局部刷新

一、AJAX常见应用情景

　　当咱们在百度中输入一个“老”字后，会立刻出现一个下拉列表！列表中显示的是包含“传”字的4个关键字。ajax

　　其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，而后服务器会把查询到的结果响应给浏览器，最后浏览器把这4个关键字显示在下拉列表中。chrome

整个过程当中页面没有刷新，只是刷新页面中的局部位置而已！
当请求发出后，浏览器还能够进行其余操做，无需等待服务器的响应！

场景：数据库

AJAX使用Javascript技术向服务器发送异步请求

　　当输入用户名后，把光标移动到其余表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为yuan的用户是否存在，最终服务器返回true表示名为yuan的用户已经存在了，浏览器在获得结果后显示“用户名已被注册！”。

AJAX无须刷新整个页面，只是局部刷新了；
在请求发出后，浏览器不用等待服务器响应结果就能够进行其余操做；

二、AJAX的优缺点

优势：

AJAX使用Javascript技术向服务器发送异步请求；
AJAX无须刷新整个页面；
由于服务器响应内容再也不是整个页面，而是页面中的局部，因此AJAX性能高；

2、jquery实现ajax

一、基于jquery的ajax简单实现

Ajaxdemo/urls.py:

from django.contrib import admin
from django.urls import path

from app01 import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('index/', views.index),
    path('test_ajax/', views.test_ajax)
]

app01/views.py:

from django.shortcuts import render,HttpResponse
# Create your views here.

def index(request):
    return render(request, "index.html")

def test_ajax(request):
    return HttpResponse("Hello kobe!")

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<h2>this is Index!</h2>
<button class="Ajax">Ajax</button>
<p class="content"></p>
<script>
    $(".Ajax").click(function () {
        // 发送Ajax请求
        $.ajax({
            url:"/test_ajax",       // 请求url，不写ip和端口，默认使用这个脚本所在的地址和端口
            type:"get",   // 请求方式，还有post请求
            success:function (data) {   // 回调函数：事件执行完，对应执行的函数
                console.log(data)
                // 给html文本赋值
                $(".content").html(data)
            }
        })
    })
</script>
</body>
</html>

　　点击Ajax按钮后，出现以下效果：

　　上面是最简单的Ajax的get请求，若是想传递数据：

二、基于jQuery实现Ajax之传递数据

（1）get请求传递数据

$(".Ajax").click(function () {
    // 发送Ajax请求
    $.ajax({
        url:"/test_ajax",       // 请求url，不写ip和端口，默认使用这个脚本所在的地址和端口
        type:"get",   // 请求方式，还有post请求
        data:{a:1,b:2},   // 发送数据
        success:function (data) {   // 回调函数：事件执行完，对应执行的函数
            console.log(data)
            // 给html文本赋值
            $(".content").html(data)
        }
    })
})

　　在视图函数中打印传递的数据：

def test_ajax(request):
    print(request.GET)
    return HttpResponse("Hello kobe!")

　　控制台输出以下所示：<QueryDict: {'a': ['1'], 'b': ['2']}>

（2）POST请求传递数据

在urls.py中添加新视图路径：path('cal/', views.cal)

在views.py中添加新视图函数：

def cal(request):
    print(request.POST)  # <QueryDict: {'n1': ['12'], 'n2': ['23']}>
    n1 = int(request.POST.get("n1"))
    n2 = int(request.POST.get("n2"))
    ret = n1 + n2

    return HttpResponse(ret)

templates/index.html:

<input type="text" id="num1">+<input type="text" id="num2">=<input type="text" id="ret"><button class="cal">计算</button>
<script>
    // Ajax计算求值
    $(".cal").click(function () {
        $.ajax({
            url: "/cal/",    //发送给服务器视图处理运算
            type: "POST",
            data:{
                "n1": $("#num1").val(),
                "n2": $("#num2").val(),
            },
            // 数据发出去后，请求结果发给success函数，success能够决定将求完的值放在页面中的位置
            success:function (data) {
                console.log(data);
                $("#ret").val(data);
            }
        })
    })
</script>

　　显示效果以下所示：

三、基于Ajax的登陆验证

　　用户在表单输入用户名与密码，经过Ajax提交给服务器，服务器验证后返回响应信息，客户端经过响应信息肯定是否登陆成功，成功，则跳转到首页，不然，在页面上显示相应的错误信息。

首先须要建立一个user表来进行校验：

from django.db import models

# Create your models here.


# 建立一个user表来进行校验
class User(models.Model):
    name = models.CharField(max_length=32)
    pwd = models.CharField(max_length=32)

app01/models.py

　　执行数据库迁移：

$ python3 manage.py makemigrations

$ python3 manage.py migrate

　　添加以下用户数据：

随后在控制器添加login视图路径：

path('login/', views.login)

接着定义login视图函数：

def login(request):
    print(request.POST)  # <QueryDict: {'user': ['HQS'], 'pwd': ['123']}>
    user = request.POST.get("user")
    pwd = request.POST.get("pwd")

    print(User.objects.filter(name=user, pwd=pwd))
    """
    在数据库查询失败：<QuerySet []>
    在数据库查询对应数据：<QuerySet [<User: User object (1)>]>
    """
    user = User.objects.filter(name=user, pwd=pwd).first()
    print(user)  # User object (1)

    res = {"user": None, "msg": None}
    if user:
        # user有值的状况
        res["user"] = user.name
    else:
        res["msg"] = "username or password wrong!"

    import json   # 运用json把python的字典转换为json字符串进行传递
    return HttpResponse(json.dumps(res))  # HttpResponse方法只能传递字符串

　　注意：res为python的字典数据类型，须要先运用json把字段转换为json字符串再用HttpResponse方法进行传递。

最后是完成index.html页面和jquery事件编写：

<form action="">
    用户名 <input type="text" id="user">
    密码 <input type="password" id="pwd">
    {# <input type="submit"> 这里不用submit,用submit那是用form表单发送请求了,button不具备任何事件 #}
    <input type="button" value="submit" class="login_btn"><span class="error"></span>
</form>
<script>
    // 登陆验证
    $(".login_btn").click(function () {
        $.ajax({
            url:"/login/",
            type:"POST",
            data:{
                "user":$("#user").val(),
                "pwd":$("#pwd").val(),
            },
            success:function (data) {
                console.log(data);    // {"user": null, "msg": "username or password wrong!"}
                console.log(typeof data);  // string,须要注意这是一个json字符串

                var data = JSON.parse(data);     // 反序列化  object  {}
                console.log(data);    // {user: null, msg: "username or password wrong!"}
                console.log(typeof data);  // object

                if (data.user) {
                    // 若是有值，则登陆成功
                    location.href="http://www.baidu.com"
                } else {
                    // 若是没有值，则登陆失败，页面显示提示信息
                    $(".error").html(data.msg).css({"color":"red", "margin-left":"10px"})
                }
            }
        })
    })
</script>

　　注意：在使用JSON.parse(data)反序列化先后，data的值不变，可是数据类型从字符串变为了object类型。

　　在登陆成功后，页面跳转到百度首页；在登陆认证失败时，页面显示效果以下：

四、$ajax参数

（1）请求参数

######################------------data---------################

       data: 当前ajax请求要携带的数据，是一个json的object对象，ajax方法就会默认地把它编码成某种格式
             (urlencoded:?a=1&b=2)发送给服务端；此外，ajax默认以get方式发送请求。

             function testData() {
               $.ajax("/test",{     //此时的data是一个json形式的对象
                  data:{
                    a:1,
                    b:2
                  }
               });                   //?a=1&b=2
######################------------processData---------################

processData：声明当前的data数据是否进行转码或预处理，默认为true，即预处理；if为false，
             那么对data：{a:1,b:2}会调用json对象的toString()方法，即{a:1,b:2}.toString()
             ,最后获得一个［object，Object］形式的结果。
            
######################------------contentType---------################

contentType：默认值: "application/x-www-form-urlencoded"。发送信息至服务器时内容编码类型。
             用来指明当前请求的数据编码格式；urlencoded:?a=1&b=2；若是想以其余方式提交数据，
             好比contentType:"application/json"，即向服务器发送一个json字符串：
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦设定，data必须是json字符串，不能是json对象

             views.py:   json.loads(request.body.decode("utf8"))


######################------------traditional---------################

traditional：通常是咱们的data数据有数组时会用到 ：data:{a:22,b:33,c:["x","y"]},
              traditional为false会对数据进行深层次迭代；

（2）响应参数

/*

dataType：  预期服务器返回的数据类型,服务器端返回的数据会根据这个值解析后，传递给回调函数。
            默认不须要显性指定这个属性，ajax会根据服务器返回的content Type来进行转换；
            好比咱们的服务器响应的content Type为json格式，这时ajax方法就会对响应的内容
            进行一个json格式的转换，if转换成功，咱们在success的回调函数里就会获得一个json格式
            的对象；转换失败就会触发error这个回调函数。若是咱们明确地指定目标类型，就可使用
            data Type。
            dataType的可用值：html｜xml｜json｜text｜script
            见下dataType实例

*/

示例：

from django.shortcuts import render,HttpResponse
from django.views.decorators.csrf import csrf_exempt
# Create your views here.

import json

def login(request):

    return render(request,'Ajax.html')


def ajax_get(request):

    l=['alex','little alex']
    dic={"name":"alex","pwd":123}

    #return HttpResponse(l)      #元素直接转成字符串alexlittle alex
    #return HttpResponse(dic)    #字典的键直接转成字符串namepwd
    return HttpResponse(json.dumps(l))
    return HttpResponse(json.dumps(dic))# 传到前端的是json字符串,要想使用,须要JSON.parse(data)

//---------------------------------------------------
    function testData() {

        $.ajax('ajax_get', {
           success: function (data) {
           console.log(data);
           console.log(typeof(data));
           //console.log(data.name);
           //JSON.parse(data);
           //console.log(data.name);
                                     },
           //dataType:"json",
                            }
                       )}

注解:Response Headers的content Type为text/html,因此返回的是String;但若是咱们想要一个json对象
    设定dataType:"json"便可,至关于告诉ajax方法把服务器返回的数据转成json对象发送到前端.结果为object
    固然，
        return HttpResponse(json.dumps(a),content_type="application/json")

    这样就不须要设定dataType:"json"了。
    content_type="application/json"和content_type="json"是同样的！

五、csrf跨站请求伪造

方式1：后端将csrftoken传到前端，发送post请求时携带这个值发送

$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
});

方式2：

<form>
{% csrf_token %}
</form><br><br><br>$.ajax({<br>...<br>data:{

　　获取form中隐藏标签的csrftoken值，加入到请求数据中传给后端:

data: {
    csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()
},

方式3：cookie中存在csrftoken,将csrftoken值放到请求头中

<script src="{% static 'js/jquery.cookie.js' %}"></script>

$.ajax({ 
    headers:{"X-CSRFToken":$.cookie('csrftoken')},
})

3、JS实现ajax

Django-Ajax

4、文件上传

一、基于form表单的文件上传

（1）模板部分

<h3>基于form表单的文件上传</h3>
<form action="" method="post" enctype="multipart/form-data">
    用户名<input type="text" name="user">
    头像  <input type="file" name="avatar">
    <input type="submit">
</form>

　　注意：form标签要添加属性enctype="multipart/form-data"。enctype：用来编码表单内容的 MIME 类型。form表单在你不写enctype属性时，也默认为其添加了enctype属性值，默认值是enctype="application/x- www-form-urlencoded".

（2）视图部分

def file_put(request):
　　if request.method == "POST":
　　　　# print(request.body)    # 原始的请求体数据
　　　　# print(request.GET)     # GET请求数据
　　　　print(request.POST)    # POST请求数据：<QueryDict: {'user': ['yuan']}>
　　　　print(request.FILES)   # 上传的文件数据：<MultiValueDict: {'avatar': [<InMemoryUploadedFile: bojie.jpg (image/jpeg)>]}> 

　　　　file_obj = request.FILES.get("avatar")
　　　　with open(file_obj.name, "wb") as f:
　　　　　　for line in file_obj:
　　　　　　　　f.write(line)

　　　　return HttpResponse("OK")

　　return render(request, "file_put.html")

　　注意：必须从request.FILES中去取，才能将相应的文件取到。

（3）页面及文件上传效果：

　　能够看到图片上传到程序根目录，且使用上传时的名称。

二、ContentType请求头

（1）application/x-www-form-urlencoded

　　这是最多见的 POST 提交数据的方式。浏览器的原生 <form> 表单，若是不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。请求相似于下面这样（无关的请求头在本文中都省略掉了）：

POST http://www.example.com HTTP/1.1     # 请求首行
Content-Type: application/x-www-form-urlencoded;charset=utf-8     # 请求头

user=yuan&age=22     # 请求体

　　注意：只适用于上传普通键值。

（2）multipart/form-data

　　这也是一个常见的 POST 数据提交的方式。使用表单上传文件时，必须让 <form> 表单的 enctype 等于 multipart/form-data。

POST http://www.example.com HTTP/1.1
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryrGKCBY7qhFd3TrwA

------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="user"

yuan
------WebKitFormBoundaryrGKCBY7qhFd3TrwA
Content-Disposition: form-data; name="file"; filename="chrome.png"
Content-Type: image/png

PNG ... content of chrome.png ...
------WebKitFormBoundaryrGKCBY7qhFd3TrwA--

　　上面这个例子首先生成了一个 boundary 用于分割不一样的字段，为了不与正文内容重复，boundary 很长很复杂。而后 Content-Type 里指明了数据是以 multipart/form-data 来编码，本次请求的 boundary 是什么内容。消息主体里按照字段个数又分为多个结构相似的部分，每部分都是以 --boundary 开始，紧接着是内容描述信息，而后是回车，最后是字段具体内容（文本或二进制）。若是传输的是文件，还要包含文件名和文件类型信息。消息主体最后以 --boundary-- 标示结束。关于 multipart/form-data 的详细定义，请前往 rfc1867 查看。

　　注意：这种方式通常用来上传文件，各大服务端语言对它也有着良好的支持。

　　上面提到的这两种 POST 数据的方式，都是浏览器原生支持的，并且现阶段标准中原生 <form> 表单也只支持这两种方式（经过 <form> 元素的 enctype 属性指定，默认为 application/x-www-form-urlencoded。其实 enctype 还支持 text/plain，不过用得很是少）。

（3）application/json

　　application/json 这个 Content-Type 做为响应头并不陌生，如今愈来愈多的人把它做为请求头，用来告诉服务端消息主体是序列化后的 JSON 字符串。因为 JSON 规范的流行，除了低版本 IE 以外的各大浏览器都原生支持 JSON.stringify，服务端语言也都有处理 JSON 的函数，使用 JSON 不会赶上什么麻烦。

　　JSON 格式支持比键值对复杂得多的结构化数据，这一点也颇有用。在须要提交的数据层次很是深时，能够把数据 JSON 序列化后再提交的。不过须要把 JSON 字符串做为 val，仍然放在键值对里，以 x-www-form-urlencoded 方式提交。

三、基于Ajax的数据传输

（1）contentType:"application/json"方式传递数据

模板层file_put.html：

<head>
    <script src="/static/jquery-3.3.1.js"></script>
</head>
<body>
<h3>基于Ajax文件上传</h3>
    用户名<input type="text" name="user">
    <input type="button" class="btn" value="Ajax">

<script>
    $(".btn").click(function () {
        $.ajax({
            url: "",
            type: "post",
            contentType:"application/json",   // 告诉服务器编码类型改成json数据
            data: JSON.stringify({     // JSON序列化的方法
                a:1,
                b:2
            }),
            success: function(data){
                console.log(data)
            }
        })
     })
</script>
</body>

　　注意：jquery的JSON序列化方法JSON.stringify()。

（2）默认用application/x-www-form-urlencoded 方式传递数据

模板层：

<script>
    $(".btn").click(function () {
        $.ajax({
            url: "",
            type: "post",
            //不加contentType，默认是application/x-www-form-urlencoded 方式
            data: {  
                a:1,
                b:2
            },
            success: function(data){
                console.log(data)
            }
        })
    })
</script>

（3）视图层，及输出分析

def file_put(request):

    if request.method == "POST":
        print("body", request.body)    # 请求报文的请求体
        # print(request.GET)     # GET请求数据
        print("post", request.POST)    # POST请求数据：<QueryDict: {'user': ['yuan']}>
        """
        只有contentType=urlencoded的时候，request.POST才会有数据：
        body b'a=1&b=2'
        post <QueryDict: {'a': ['1'], 'b': ['2']}>
        
        contentType:"application/json"  状况下输出：
        body b'{"a":1,"b":2}'
        post <QueryDict: {}>
        """
        return HttpResponse("OK")

    return render(request, "file_put.html")

　　注意：POST只有当请求是urlencoded的时候，才会将request.body里的内容解析成一个字典格式，方便的去获取值。所以使用其余格式时，须要本身去对body进行解析。

四、基于Ajax的文件上传

（1）模板

<h3>基于Ajax文件上传</h3>
    用户名<input type="text" id="user">
    头像  <input type="file" id="avatar">
    <input type="button" class="btn" value="Ajax">

<script>
    // ajax上传文件
    $(".btn").click(function () {
        var formdata = new FormData();  // 注意构建的formdata对象
        formdata.append("user", $("#user").val());   // append键值
        formdata.append("avatar", $("#avatar")[0].files[0]);
        $.ajax({
            url:"",
            type:"post",
            // 传formdata数据必定要写下面这两个参数
            contentType:false,   // 在ajax这一层不作任何编码(不设置内容类型)
            processData:false,   // 在ajax这一层不作预处理(不处理数据)
            data:formdata,       // 将formdata对象放在data里面发送
            success: function (data) {
                console.log(data);
            }
        })
    });
</script>

（2）jquery取上传文件固定语法：$("#avatar")[0].files[0]

（3）视图及输出

def file_put(request):
    if request.method == "POST":
        print("body", request.body)    # 请求报文的请求体
        # print(request.GET)     # GET请求数据
        print("post", request.POST)    # POST请求数据
        print(request.FILES)   # 上传的文件数据
        """
        body b'------WebKitFormBoundary7aWZK41JdkpQEnfA\r\nContent-Disposition: form-data; name="user"\r\n\r\nyuan\r\n------WebKitFormBoundary7aWZK41JdkpQEnfA\r\nContent-Disposition: form-data; name="avatar"; filename="bojie.jpg"\r\nContent-Type: image/jpeg.....
        post <QueryDict: {'user': ['yuan']}>
        <MultiValueDict: {'avatar': [<InMemoryUploadedFile: bojie.jpg (image/jpeg)>]}>
        """

        file_obj = request.FILES.get("avatar")
        with open(file_obj.name, "wb") as f:
            for line in file_obj:
                f.write(line)

        return HttpResponse("OK")

    return render(request, "file_put.html")

　　文件上传完成：