Ajax技术+layer弹窗

合集 - Django web框架(16)
1.django 初识2.Django 连接数据库、迁移数据库、连接池3.Django 之 ORM表关系创建、请求生命周期4.一文搞懂 CGI, FastCGI, WSGI, uWSGI5.Django之url函数、有名无名分组、反向解析、url转换器6.序列化、CBV源码分析、模版层7.Django之models模型层18.Django之models模型层29.ORM 字段和参数10.简单图书管理系统
11.Ajax技术+layer弹窗
12.MTV和MVC、contentType、批量插入数据13.cookie和session14.Django之CBV装饰器、中间件、csrf 跨站请求伪造15.Django之Auth模块16.BBS项目
收起

一、Ajax技术简介

1、AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。

即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML,现在更多使用json数据）。

局部刷新、一步提交

2、作用

前端技术，把前端的数据提交到后端的。Ajax技术就是局部刷新，异步提交，它不需要刷新整个页面，只需要刷新局部的，主要就是刷新的时候是无感知的

3、案例

html 前端页面：

注意：Ajax 提交数据到后端的4个步骤

?
1
2
3
4
5
6
7
8
9
10
$.ajax({
        url:'/index/?a=1&b=2',
        type:'post',
        data:{'a':1, b:2}
        success:function(res) {
            # res:什么时候反序列化，什么时候不反序列化
            console.log(res.username)
            console.log(res.data.password)
        }
    })

$.ajax({ }) ajax的调用，

后端返回的数据给res，大多数情况下，后端返回的数据直接就是json格式，如果是json格式的，就不用反序列化了

如果返回的是JSON格式的字符串，就需要反序列化

后端视图函数：

?
1
2
3
4
5
6
7
8
9
10
11
def index(request):
    if request.method == 'POST':
        # 接收参数
        d1 = request.POST.get('d1')
        d2 = request.POST.get('d2')
 
        # 做运算
        d3 = int(d1) + int(d2)
        return HttpResponse(d3)  # 返回给res
 
    return render(request, 'index.html')

注意⚠️后端返回数据的多种情况：

第一种：

当后端返回的值 res为string类型时，即 return HttpResponse(d3)。前端html页面可以直接使用。

前端自行反序列化 JSON.parse()后可以改变类型，比如前端传来的d3是一个string，JSON.parse()后是number。

?
1
2
3
4
5
6
success : function(res){
                res = JSON.parse(res);
                console.log(res);
                console.log(res.code);
                {#$("#d3").val(res)#}
            }

没有反序列化：前端能直接使用后端传来的string数据

反序列化以后：反序列化之后依旧可以直接使用，数据类型变为number

第二种：

后端直接返回 JsonResponse()数据，前端不需要在反序列化，可以直接取值。

JsonResponse()返回的数据就是json数据

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# 后端
from django.http  import JsonResponse
 
def index(request):
    if request.method == 'POST':
        d = {'code': 200, 'meg': '请求成功', 'data': {'username': 'jingzhi'}}
        return JsonResponse(d)
 
    return render(request, 'index.html')
 
# 前端
 $.ajax({
            // 1、提交到哪里
            url: "",
            // 2、要指定请求方式提交
            type: "post",
            // 3、指定要传递的数据
            data: {'d1':d1,'d2':d2},
            // 4、回调函数, 接收后端返回的数据
            success : function(res){
                console.log(res);
                console.log(res.code);
                console.log(res.meg);
            }
        })

 第三种： 

后端序列化后使用HttpResponse()方式，前端需要指定数据类型dataType: "json",

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 后端
def index(request):
    if request.method == 'POST':
        d = {'code': 200, 'meg': '请求成功', 'data': {'username': 'jingzhi'}}
        import json
        res = json.dumps(d, ensure_ascii=False)  # res序列化为字符串
        return HttpResponse(res)  # 返回给res
 
    return render(request, 'index.html')
 
# 前端
$.ajax({
            // 1、提交到哪里
            url: "",
            // 2、要指定请求方式提交
            type: "post",
            // 3、指定要传递的数据
            data: {'d1':d1,'d2':d2},
            dataType: "json",
            // 4、回调函数, 接收后端返回的数据
            success : function(res){
                console.log(res);
                console.log(res.code);
                console.log(res.meg);
            }
        })

二、Ajax提交json格式的数据

要满足的两个条件
1. 你传的数据一定要是json格式的
2. 一定要把ajax默认提交的urlencode改为'application/json'

1、html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<button class="btn btn-info">按钮</button>
 
<script>
    $(".btn").click(function () {
        $.ajax({
            url: '/index/',
            type: 'post',
            data: JSON.stringify({a1: 1, a2: 2}),
            contentType : 'application/json',
            success: function (res) {
                console.log(res)
            }
        })
    })
</script>
</body>
</html>

2、views

?
1
2
3
4
5
6
7
8
9
from django.shortcuts import render
import json
 
# Create your views here.
def index(request):
    print(request.body)  # b'{"a1":1,"a2":2}'
    json_str = json.loads(request.body)  # json.loads 能够自动进行二进制解码，然后再反序列化
    print(json_str.get('a1'))
    return render(request, 'index.html')

注意：

1.  针对ajax提交的json格式的数据，django后端不在把数据封装到request.POST中了。

2. 前端发送json数据的前提：数据进行序列化、指定内容类型

?
1
2
data: JSON.stringify({a1: 1, a2: 2}),
contentType : 'application/json',

3、后端拿到数据是纯原生的，发送过来的数据是二进制形式的，后端需要解码、反序列化 

三、Ajax提交文件数据(重要)

1、html

关于 var myfile = $("#my_file")[0].files[0]; 的补充

$("#my_file") 返回一个包含匹配元素的数组。由于我们只对一个元素感兴趣，通过 [0] 来获取这个元素。

.files[0]: 一旦我们有了文件输入字段元素，我们可以通过 .files 属性访问用户选择的文件列表。因为文件输入字段允许用户一次选择多个文件，这是一个文件列表。在这里，我们使用 [0] 来获取列表中的第一个文件。因此，$("#my_file")[0].files[0] 返回用户选择的第一个文件。

2、views

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
from django.shortcuts import render
 
# Create your views here.
def index(request):
    # print(request.body)  # b'{"a1":1,"a2":2}'
    # json_str = json.loads(request.body)  # json.loads 能够自动进行二进制解码，然后再反序列化
    # print(json_str.get('a1'))
    if request.method == 'POST':
        print(request.POST.get('username'))  # <QueryDict: {'username': ['DSAD'], 'password': ['DSADAS']}>
        print(request.FILES.get('myfile'))  # <MultiValueDict: {'myfile': [<InMemoryUploadedFile: 462_001_afm_3600_5400.jpg (image/jpeg)>]}>
 
        file_obj = request.FILES.get('myfile')
        with open(file_obj.name, 'wb') as f:
            for line in file_obj:
                f.write(line)
    return render(request, 'index.html') 

四、AJax结合layer弹窗实现删除的二次确认

1、layer弹窗

layer 弹出层组件 - jQuery 弹出层插件 (layuiweb.com)

layui 颜色参考 - 页面元素 - Layui (layuiweb.com)

下载

引入static文件

?
1
<script src="/static/layer/layer.js"></script>

引用效果

2、html

3、views

?
1
2
3
4
5
6
def book_del(request):
    del_id = request.POST.get('id')  # 这个id是 ajx传的 id = $(this).attr('delete_id');
    print(del_id)
    models.Book.objects.filter(pk=del_id).delete()
    # return redirect('/authors_list/') ajax发过来的数据，不需要页面跳转
    return JsonResponse({'code': 200, 'msg': '删除成功！'})  # 如果需要给前端返回数据+'data':{}

4、效果

五、Ajax 实操 

简易图书管理系统，前端通过Ajax传数据到后端

html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{% extends 'home.html' %}
 
{% block content %}
    <h1 class="text-center">修改作者</h1>
    <div class="container">
        <div class="row">
                <div class="form-group">
                    <input type="hidden" id="hidden_id" value="{{ author_obj.pk }}" name="hidden_id">
                    <div class="form-group">
                        作者名：<input type="text" id="name" class="form-control" name="name" value="{{ author_obj.name }}">
                    </div>
                </div>
                <div class="form-group">
                    年龄：<input type="text" id="age" class="form-control" name="age" value="{{ author_obj.age }}">
                </div>
                <div class="form-group">
                    phone：<input type="text" id="phone" class="form-control" name="phone"
                                 value="{{ author_obj.author.phone }}">
                </div>
                <div class="form-group">
                    addr：<input type="text" id="addr" class="form-control" name="addr"
                                value="{{ author_obj.author.addr }}">
                </div>
                <div class="form-group">
                    <input type="button" id="submitButton" class="btn btn-success btn-block" value="Submit">
                </div>
            <script>
                $("#submitButton").click(function () {
                    let id = $("#hidden_id").val();
                    let name = $("#name").val();
                    let age = $("#age").val();
                    let phone = $("#phone").val();
                    let addr = $("#addr").val();
                    console.log(id)
                    console.log(name)
                    $.ajax({
                        url: '/authors_edit/',
                        type: 'post',
                        data: {'id':id,'name': name, 'age': age, 'phone': phone, 'addr': addr},
                        success: function (res) {
                            // 这里可以添加一些成功后的处理逻辑
                            alert(res.msg);
                            window.location.href=res.url;
                        },
                        error: function (err) {
                            // 这里可以添加一些错误处理逻辑
                            alert("提交失败，请重试");
                        }
                    })
                })
            </script>
        </div>
    </div>
{% endblock %}

views

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 修改作者
def authors_edit(request):
    author_edit_id = request.GET.get('id')  # 先获取GET传参的id
    author_obj = models.Author.objects.filter(pk=author_edit_id).first()  # 获取一个publish_obj对象
    author_detail_obj = models.Author.objects.filter(pk=author_edit_id).first()  # 获取一个publish_obj对象
    if request.method == 'POST':
        new_id = request.POST.get('id')
        new_name = request.POST.get('name')
        new_age = request.POST.get('age')
        new_phone = request.POST.get('phone')
        new_addr = request.POST.get('addr')
 
        # 写入数据库
        models.Author.objects.filter(pk=new_id).update(name=new_name, age=new_age)
        models.Authordetail.objects.filter(author__pk=author_edit_id).update(phone=new_phone, addr=new_addr)
 
        res = {'url': '/authors_list/', 'code': 200, 'msg': '后端拿到数据！', 'data': {'username': new_name}}
        return JsonResponse(res)
    return render(request, 'authors_edit.html', locals())

　　

 

 

 

 

12-Django与Ajax (yuque.com)

posted @   凡人半睁眼  阅读(159)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue之后端交互、计算、监听、组件间通信
·  BBS项目
·  11_07、Ajax
·  Django基础之Ajax
·  Django之Ajax
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
· Manus的开源复刻OpenManus初探

阅读目录(Content)

此页目录为空

点击右上角即可分享
微信分享提示