Django--ajax

一 . Ajax简介　　

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
　　即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。
Ajax不是一种能新的编程语言,它是使用现有标准的新方法.
Ajax最大的优点就是不重新加载整个页面就可以与服务器交换数据,并更新部分网页内容(在用户不知不觉中就完成了)
Ajax是异步交互
Ajax不影响页面发送其他请求

　　下面看一下登录页面实际操作

HTML文件

 1  HTML文件
 2 {% load static %}
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>login</title>
 8     <!--bootstrap-->
 9     <link href="{% static 'bootstrap/css/bootstrap.min.css'%}" rel="stylesheet">
10     <link rel="stylesheet" href="{% static 'cssfiles/login.css' %}">
11 
12 </head>
13 <body>
14 <div class="container">
15     <div style="margin-top: 100px"></div>
16     <div class="row">
17         <div class="col-md-4 col-md-offset-4">
18             {% csrf_token %}    <!--这个必须有-->
19             <input id="username" type="text" class="form-control" placeholder="请输入用户名">
20             <input id="password" type="password" class="form-control" placeholder="请输入密码">
21             <button id="sub"  class="btn btn-primary btn-lg btn-block">登 录</button>
22             <div id="fail"></div>
23         </div>
24     </div>
25 </div>
26 
27 <script src="{% static 'jsfiles/jquery.js' %}"></script>
28 
29 <script>
30     $('#sub').click(function () {
31         var uname = $('#username').val();
32         var pwd = $('#password').val();
33         var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
34         //$.ajax({必须是键值对})
35         $.ajax({
36             url:"{% url 'login' %}",  //这个是必须有的
37             type:'post',             //这个是提交方式,必须有
38             data:{'username':uname, 'password':pwd, 'csrfmiddlewaretoken':csrf_token},
39             success:function (response) {  //这个response就是一个形参,接收视图中return后面传过来的数据
40                 if (response.status){
41                     location.href = response.home_url  //location.href的作用就是:如果走到这里就直接跳转页面
42                 }
43                 else{
44                     $('#fail').text('账号或密码不正确,请重新确认')
45                 }
46             }
47         })
48     })
49 </script>
50 </body>
51 </html>
复制代码
 


复制代码
 1 from django.shortcuts import render,HttpResponse
 2 from app_01 import models
 3 from django.http import JsonResponse
 4 from django.urls import reverse
 5 import json
 6 # Create your views here.
 7 
 8 def home(request):
 9     return render(request,'home.html')
10 
11 def login(request):
12     if request.method == 'GET':
13         return render(request, 'login.html')
14     else:
15         a = {'status':None, 'home_url':None}
16         # ajax提交数据
17         username = request.POST.get('username')  # get 后面的是Ajax里面的data的键
18         password = request.POST.get('password')
19         ret = models.UserMsg.objects.filter(username=username, password=password)
20         if ret.exists():
21             a['status'] = True
22             a['home_url'] = reverse('home')
23             # 方法一,这种方式只能传字典
24             return JsonResponse(a)
25             # 要想传其他类型(如列表)需要在a后面加上safe = False
26             return JsonResponse(a, safe=False)
27             # 方法二 方法三 见图ajax_json
28         else:
29             return HttpResponse('fail')

视图(views)

 1  from django.shortcuts import render,HttpResponse
 2  2 from app_01 import models
 3  3 from django.http import JsonResponse
 4  4 from django.urls import reverse
 5  5 import json
 6  6 # Create your views here.
 7  7 
 8  8 def home(request):
 9  9     return render(request,'home.html')
10 10 
11 11 def login(request):
12 12     if request.method == 'GET':
13 13         return render(request, 'login.html')
14 14     else:
15 15         a = {'status':None, 'home_url':None}
16 16         # ajax提交数据
17 17         username = request.POST.get('username')  # get 后面的是Ajax里面的data的键
18 18         password = request.POST.get('password')
19 19         ret = models.UserMsg.objects.filter(username=username, password=password)
20 20         if ret.exists():
21 21             a['status'] = True
22 22             a['home_url'] = reverse('home')
23 23             # 方法一,这种方式只能传字典
24 24             return JsonResponse(a)
25 25             # 要想传其他类型(如列表)需要在a后面加上safe = False
26 26             return JsonResponse(a, safe=False)
27 27             # 方法二 方法三 见图ajax_json
28 28         else:
29 29             return HttpResponse('fail')

　　方法二

　　方法三

二 . Ajax文件上传

　　请求头ContentType(请求体的编码类型,常见类型有三种)

　　1. application/x-www-form-urlencoded　　

最常见的就是POST方式提交, form表单提交,如果不设置enctype属性, 默认为 application/x-www-from-urlencoded方式提交数据,
ajax 也是默认的这个.

　　2. multipart/form-data

这也是POST数据提交的一种方式,必须要form表单中的enctype等于multipart/form-data,
上传文件的时候需要用这种enctype模式.

　　3. application/json　　

form 表单不支持json类型的Content-Type数据类型,但是ajax支持,而且现在越来越多的人把application/json  这个Content-Type作为响应头
这也是为什么ajax被广泛应用的原因,ajax还可以自己加请求头,这点也是ajax受欢迎的原因之一. 除了低版本的IE以外,其他的各大浏览器都支持
原生JSON.stringify.

　　如果ajax里面写上这个contentType,那个data数据必须是json字符串类型,contentType:'json',只写这个他也能识别application/json类型

django不认识json,他只能识别application/x-www-form-urlencoded 和 multipart/form-data, 
所以如果需要拿到json的数据类型需要自己写逻辑

　　基于form表单的文件上传

<form action="{% url 'upload' %}" method="post" enctype="multipart/form-data">  <!--这个enctype类型是传文件用的-->
                {% csrf_token %}
                <div class="form-group">
                    <input type="text" class="form-control"  placeholder="请输入用户名" name="username">
                </div>
                <div class="form-group">
                    <input type="file"  name="file">   <!--type='file'是上传文件-->
                </div>
                <button type="submit" class="btn btn-default">提交</button>
            </form>

　　视图(views.py)

def upload(request):
    if request.method == 'GET':
        return render(request, 'upload.html')
    else:
        file = request.FILES.get('file')  # 获取文件对象
        print('>>>>>', file)   # 打印出来显示的是文件名字,但是是一个文件对象
        print('==>', type(file))  # <class 'django.core.files.uploadedfile.InMemoryUploadedFile'>, 一个文件对象,可以理解为一个文件句柄
        file_name = file.name  #  这个是真正的名字(字符串)
        print('>>>文件名', file_name,type(file_name))
        import os
        from upload import settings
        path = os.path.join(settings.BASE_DIR, 'statics', 'image', file_name)  # 存文件的路径,statics/image/file_name
        with open(path, 'wb') as f:
            # for data in file:
            #     f.write(data)
            for chunks in file.chunks():  # 默认一次返回2.5M,是一个生成器(常用)
                f.write(chunks)
        return HttpResponse('OK')

　　基于Ajax上传文件

HTML文件

 1  HTML文件
 2 {% load static %}
 3 <!DOCTYPE html>
 4 <html lang="en">
 5 <head>
 6     <meta charset="UTF-8">
 7     <title>login</title>
 8     <!--bootstrap-->
 9     <link href="{% static 'bootstrap/css/bootstrap.min.css'%}" rel="stylesheet">
10     <link rel="stylesheet" href="{% static 'cssfiles/login.css' %}">
11 
12 </head>
13 <body>
14 <div class="container">
15     <div style="margin-top: 100px"></div>
16     <div class="row">
17         <div class="col-md-4 col-md-offset-4">
18             {% csrf_token %}    <!--这个必须有-->
19             <input id="username" type="text" class="form-control" placeholder="请输入用户名">
20             <input id="password" type="password" class="form-control" placeholder="请输入密码">
21             <button id="sub"  class="btn btn-primary btn-lg btn-block">登 录</button>
22             <div id="fail"></div>
23         </div>
24     </div>
25 </div>
26 
27 <script src="{% static 'jsfiles/jquery.js' %}"></script>
28 
29 <script>
30     $('#sub').click(function () {
31         var uname = $('#username').val();
32         var pwd = $('#password').val();
33         var csrf_token = $('input[name=csrfmiddlewaretoken]').val();
34         //$.ajax({必须是键值对})
35         $.ajax({
36             url:"{% url 'login' %}",  //这个是必须有的
37             type:'post',             //这个是提交方式,必须有
38             data:{'username':uname, 'password':pwd, 'csrfmiddlewaretoken':csrf_token},
39             success:function (response) {  //这个response就是一个形参,接收视图中return后面传过来的数据
40                 if (response.status){
41                     location.href = response.home_url  //location.href的作用就是:如果走到这里就直接跳转页面
42                 }
43                 else{
44                     $('#fail').text('账号或密码不正确,请重新确认')
45                 }
46             }
47         })
48     })
49 </script>
50 </body>
51 </html>
复制代码
 


复制代码
 1 from django.shortcuts import render,HttpResponse
 2 from app_01 import models
 3 from django.http import JsonResponse
 4 from django.urls import reverse
 5 import json
 6 # Create your views here.
 7 
 8 def home(request):
 9     return render(request,'home.html')
10 
11 def login(request):
12     if request.method == 'GET':
13         return render(request, 'login.html')
14     else:
15         a = {'status':None, 'home_url':None}
16         # ajax提交数据
17         username = request.POST.get('username')  # get 后面的是Ajax里面的data的键
18         password = request.POST.get('password')
19         ret = models.UserMsg.objects.filter(username=username, password=password)
20         if ret.exists():
21             a['status'] = True
22             a['home_url'] = reverse('home')
23             # 方法一,这种方式只能传字典
24             return JsonResponse(a)
25             # 要想传其他类型(如列表)需要在a后面加上safe = False
26             return JsonResponse(a, safe=False)
27             # 方法二 方法三 见图ajax_json
28         else:
29             return HttpResponse('fail')

视图(views)