61、Django与Ajax

Django框架 / 2021-03-01

一、Django与Ajax

参考博客：博客园-JSONJi，原文链接：https://www.cnblogs.com/Dominic-Ji/p/9234099.html

Ajax，Asynchronous Javascript And XML，即异步的JS和XML，一种使用现有标准的新方法。

Ajax最大的特点就是在不重载整个页面的情况下，与服务器交换数据并刷新局部内容！比如我们在各大网站平台登录注册时，当输入有误时会有红色错误信息提示而不需要整个页面刷新，这就是运用到了Ajax技术。

朝后端发起请求的方式
  • 浏览器输入url访问：get请求。
  • a标签href属性：get请求。
  • form表单：get/post请求
  • Ajax

Ajax我们只学习jQuery封装之后的版本，不学原生的，因为原生的比较复杂，所以我们要在HTML里导入jQuery！

1.1、MTV与MVC模型

MTV

Django号称是MTV模型；M即models、T即templates、v即views；其实Django本质也是MVC！

MVC

M还是models；V即views; C即controller(urls.py)

MVVM

Vue框架的概念，后面学到再了解即可。

1.2、Ajax操作(重点)

Ajax基本使用

urls代码

urlpatterns = [
    url(r'Ajax_test', views.Ajax_test)
]

views代码

def Ajax_test(request):
    if request.method == 'POST':
        return HttpResponse('收到了')
    return render(request, 'Ajax_test.html')

HTML代码

<body>
<form action="" method="post">
    <p>username:<input type="text" id="i1" name="username"></p>
    <p>password:<input type="password" id="i2" name="password"></p>
    <input type="submit" value="提交" id="i3">
</form>

<script>
    $('#i3').on('click', function Ajax_func(){
        // 朝后端发起Ajax请求
        $.Ajax({
            // 指定后端地址
            url:'', // 不写则默认朝当前地址提交
            type: 'POST',  // 不指定则默认为get，大小写均可。
            data: {'username': $('#i1').val(), 'password': $('#i2').val()},  // 提交的数据
            success: function(args){  // success为回调函数，参数即后端给你返回的数据.
                alert(args)
            }
        })
    })
</script>
</body>
前后端传输数据编码格式

在Request Headers里面Content-Type可以看到格式的类型

Content-Type: application/x-www-form-urlencoded

主要有三种：

  • urlencoded
  • form-data
  • JSON

form表单无法发送JSON格式数据，它默认数据编码格式为urlencoded，而Django后端针对符合urlencoded编码格式的数据都会自动帮你解析并封装到request.POST中；如果把编码格式改成form-data，那么针对普通的键值对还是解析到request.POST，而将文件解析到request.FILES中，这是对WSGI的二次封装。

Ajax发送JSON格式数据

Ajax默认也是urlencoded格式，在前后端传输数据的时候，一定要确保编码格式跟数据真正的格式是一致的，即用contentType更改格式后，也要把发送过去的数据变成对应格式才是一致

<body>
<form action="" method="post" enctype="multipart/form-data">
    <p>username:<input type="text" id="i1" name="username"></p>
    <p>password:<input type="password" id="i2" name="password"></p>
    <input type="submit" value="提交" id="i3">
</form>

<script>
    $('#i3').on('click', function ajax_func(){
        // 朝后端发起ajax请求
        $.ajax({
            // 指定后端地址
            url:'', // 不写则默认朝当前地址提交
            type: 'POST',  // 不指定则默认为get，大小写均可。
            contentType: 'application/json',
            data: JSON.stringify({'username': $('#i1').val(), 'password': $('#i2').val()}),  // 提交的数据
            success: function(args){
                alert(args)
            }
        })
    })
</script>
</body>
request对象方法补充

Django后端不会处理JSON格式的数据，需要我们用is_ajax判断后自己手动处理它

views代码

def ajax_test(request):
    if request.method == 'POST':
        if request.is_ajax:  # 判断是否为ajax类型
            json_data = request.body  # 请求体内容
            decode_data = json.loads(json_data)  # 括号内如为二进制格式，则自动解码再反序列化。
            print(decode_data)
    return render(request, 'ajax_test.html')

# 执行结果
{'username': 'sanxi', 'password': 666}

HTML代码

<body>
<input type="submit" value="提交" id="i3">
<script>
    $('#i3').on('click', function ajax_func(){
        $.ajax({
            url:'',
            type: 'POST',
            contentType: 'application/json',
            data: JSON.stringify({'username': 'sanxi', 'password': 666}),
            success: function(args){
                console.log(args)
            }
        })
    })
</script>
</body>
Ajax发送JSON格式数据注意事项：

1、contentType参数指定成：application/json

2、发送的数据一定要是真正的JSON格式数据

3、Django后端不会帮你处理JSON格式数据，要自己去request.body获取并处理

Ajax发送文件

Ajax发送文件需要借助于JS内置对象formdata

<body>
<p>username:<input type="text" id="i1" name="username"></p>
<p>password:<input type="password" name="password" id="i2"></p>
<p><input type="file" name="files" id="i3"></p>
<p><input type="submit" value="提交" id="i4"></p>

<script>
    $('#i4').on('click', function ajax_func(){
        let formDataObj = new FormData();  // 利用FormData创建对象
        formDataObj.append('username', $('#i1').val());  // 追加普通键值对数据
        formDataObj.append('password', $('#i2').val());
        formDataObj.append('files', $('#i3')[0].files[0])  // 追加文件对象
        // 朝后端发起ajax请求
        $.ajax({
            url:'', // 不写则默认朝当前地址提交
            type: 'POST',  // 不指定则默认为get，大小写均可。
            contentType: false,  // 不用指定编码，Django可自动识别FormData对象。
            processData: false,  // 通知浏览器不要对数据进行任何处理
            data: formDataObj,  // 直接将FormData对象放这
            success: function(args){
                console.log(args)
            }
        })
    })
</script>
</body>

views代码

def ajax_test(request):
    if request.method == 'POST':
        if request.is_ajax:
            print(request.POST)
            print(request.FILES)
    return render(request, 'ajax_test.html')
Ajax发送文件总结：

1、需要利用内置的对象formdata

2、需要指定两个关键性参数

3、Django后端能够直接识别到formdata对象并且能够将内部的普通键值对自动解析并封装到request.POST中，文件数据自动解析并封装到request.FILES中

1.3、Django自带的序列化

实际项目中前后端分离是很常见的，所以我们后端处理好数据只要能序列化返回给前端即可，然后写个接口文档给前端说明都是些什么意思，一般都是处理成列表套字典形式，因为它是公共形式。

所谓的写接口，就是处理好数据后写文档交代。

案例演示
views代码
from django.shortcuts import render, HttpResponse
from django.db import models
from study import models
from django.core import serializers  # 需要先导入这个模块
# Create your views here.


def ajax_test(request):
    user_obj = models.UserInfo.objects.all()
    json_obj = serializers.serialize('json', user_obj)  # 第一个参数定义格式，第二个直接扔数据对象，Django会自动处理。
    return render(request, 'json_info.html', locals())
HTML代码

没错，就是一行

<body>
{{ json_obj }}
</body>
执行结果，

页面显示，超级详细！！！

[{"model": "study.userinfo", "pk": 1, "fields": {"name": "sanxi", "gender": 1}},
{"model": "study.userinfo", "pk": 2, "fields": {"name": "chrystal", "gender": 2}}, 
{"model": "study.userinfo", "pk": 3, "fields": {"name": "haha", "gender": 3}}]

二、自定义分页器

当我们需要使用到非Django内置的第三方功能或者组件代码的时候，一般会创建一个名为utils文件夹，在该文件夹内对模块进行功能性划分，utils可以在每个应用下创建，具体结合实际情况。

参考博客：JsonJi，原文链接：https://www.cnblogs.com/Dominic-Ji/articles/12035722.html

文章目录

最新评论

最新文章

世间微尘里 独爱茶酒中