Django之Ajax介绍、文件上传、序列化（Django内置的serializers）、基于ajax实现二次确认

最新推荐文章于 2023-02-18 03:09:01 发布

原创

最新推荐文章于 2023-02-18 03:09:01 发布 · 451 阅读

本文介绍了Django中如何使用Ajax进行异步交互，包括Ajax的基本语法、发送不同类型的请求、文件上传（form与ajax方式）、Django内置serializers的使用，以及利用SweetAlert实现二次确认功能。详细讲解了每个步骤，帮助开发者掌握Django与Ajax的结合应用。

文章目录

一、 Django与ajax（入门）
二、 AJAX的优点
三、 ajax基本语法
四、写ajax跟后端交互
五、 ajax发送其他请求
六、文件上传（ajax和form两种方式）
七、 Ajax提交json格式数据
八、 Django内置的serializers（把对象序列化成json字符串）
九、基于ajax实现二次确认(SweetAlert插件)

一、 Django与ajax（入门）

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

通过在后台与服务器进行少量数据交换，AJAX可以使网页实现异步更新，这意味着在不重新加载整个网页页面的情况下，对网页的部分内容进行更新

AJAX是一种用于快速动态网页的技术

AJAX的工作原理：
相当于在用户和服务器之间加了一个中间层（AJAX引擎），使用户操作与服务器响应异步化。并不是所有的用户请求都提交给服务器，像一些数据验证和数据处理等都交给ajax引擎自己来做，只有确定需要从服务器读取数据时再由AJAX引擎代为向服务器提交请求

客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示：
在这里插入图片描述

要完整实现一个AJAX异步调用和局部刷新,通常需要以下几个步骤:

1.创建XMLHttpRequest对象,即创建一个异步调用对象.
2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
3.设置响应HTTP请求状态变化的函数.
4.发送HTTP请求.
5.获取异步调用返回的数据.
6.使用JavaScript和DOM实现局部刷新.

ps:AJAX传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）  　　
   基本上web页面都有很多ajax请求

二、 AJAX的优点

AJAX使用JavaScript技术向服务器发送异步请求；
AJAX请求无须刷新整个页面；
因为服务器响应内容不再是整个页面，而是页面中的部分内容，所以AJAX性能高；
两个关键点:1.局部刷新，2.异步请求

"""
同步:提交任务之后原地等待任务结果期间不做任何事
异步:提交任务之后不原地等待任务结果 等任务产生结果通过异步回调机制
"""

三、 ajax基本语法

$.ajax({
   
   
    url:'',
    type:'',
    data:'',
    success:function(args){
   
   }
})

四、写ajax跟后端交互

1 使用原生js写ajax请求（没有人用）
     第一：麻烦
     第二：区分浏览器，需要做浏览器兼容
2 现在主流做法（现成有人封装好了，jquery，axios..）
    以jquery为例

通过Ajax，实现前端输入两个数字，服务器做加法，返回到前端页面

视图函数views.py

def ajax_test(request):

    return render(request,'ajax_test.html')


def sum(request):
    import time
    time.sleep(2)
    # 先转成整型再加
    a1=int(request.GET.get('a1')) 
    a2=int(request.GET.get('a2'))
    return HttpResponse(a1+a2)

路由urls.py

urlpatterns = [
     url(r'^ajax_test/',views.ajax_test),
    url(r'^sum/',views.sum),
]

ajax_test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {
   
   % load static %}
    <script src="{% static 'JQuery3.6.0.js' %}"></script>

</head>
<body>
<input type="text" id="a1"> + <input type="text" id="a2">=<input type="text" id="sum">
<button id="btn_submit">计算</button>

</body>
<script>
    $('#btn_submit').click(function () {
   
   
        var a1 = $('#a1').val()
        var a2 = $('#a2').val()
        // 发送ajax请求，计算，返回结果
        $.ajax({
   
   
            url: '/sum/',  //ajax请求的地址
            type: 'get',//请求方式
            data: {
   
   'a1': a1, 'a2': a2}, //发送的数据
            success: function (data) {
   
      //服务端成功返回会回调，执行匿名函数
                console.log(data)
                
                // 查看input框并且写入数据
                $