django web开发（九）Ajax请求_django的ajax请求

浏览器向网站发送请求时,URL 和 表单的形式提交

• GET
• POST
  两个请求

特点: 页面刷新

Ajax可以实现向后台偷偷发送请求，整个请求和收到回复的过程不需要刷新页面

• 依赖JQuery
• 编写Ajax代码
  是写在javascript

ajax get请求

新建 task_list.html
写错了，应该{% block js
新建 task.py

task_list.html

{% extends 'xlayout.html' %}

{% block mbname %}
    <div class="container">
        <input type="button" class="btn-primary" id="btn1" value="按钮" onclick="clikem()"></input>
    </div>

{% endblock %}
{% block css %}
    <script type="text/javascript">
    function clikem() {
        $.ajax({
                url:'/task/ajax/',
                type:'get',
                data: {
                    n1:123,
                    n2:345
                },
                success:function(res){
                    console.log(res);
            }
    })
    }
    </script>
{% endblock %}
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

ajax post请求

信任请求不需要token验证

装饰器
csrf_exempt可以免除在HTM中写CSRF

.py
.html
绑定事件
根据id选择，有click时，自动执行函数

ajax 请求的返回值

一般不会返回页面，而是返回json格式，传递过程为字符串
.py
html

传输输入框数据

数据多，批量输入

这样,我们就学会了如何在浏览器页面不刷新的情况下,如何向后台提交数据

案例

添加任务

新建数据库和页面

建表
models.py

class Task(models.Model):
    """任务"""

    level_choices = (
        (1, "紧急"),
        (2, "重要"),
        (3, "临时"),
    )
    level = models.SmallIntegerField(verbose_name="级别", choices=level_choices, default=1)
    title = models.CharField(verbose_name="标题", max_length=64)
    detail = models.TextField(verbose_name="详细信息")
    user = models.ForeignKey(verbose_name="负责人", to=Admin, on_delete=models.CASCADE)

1
2
3
4
5
6
7
8
9
10
11
12
13

task.py

task_list.html

解决显示外联主键的问题

修改models.py中admin表

that’s ok!

添加id、添加按钮，和js函数

{% extends 'xlayout.html' %}
{% load static %}

{% block mbname %}

    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">
            <form method="post" id="task_form" novalidate>
                <div>
                    {% for item in form %}
                    <div class="col-xs-6">
                        <div class="form-group">
                            <label>{{ item.label }}</label>
                            {{ item }}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </form>
            <div class="col-xs-12">
                <input id="submit" type="submit" value="提 交" class="btn btn-primary center-block" style="width: 100px;">
            </div>
        </div>
    </div>

{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function () {
            bindaddEvent();
        })
   function bindaddEvent() {
        $("#submit").click(function () {
            $.ajax({
                url: '/task/add/',
                type: "post",
                data: $("#task_form").serialize(),
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    console.log(res.status);
                    console.log(res.data);
                }
            })
        })
    }

{% endblock %}
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

添加 url task.py 中添加/task/add/'链接和函数
输出传入函数的内容

保存数据并进行数据校验

task.py
只能返回 HttpResponse(json.dumps(data_dict))，不能返回重定向和render 刷新页面
如果成功 data_dict = {“status”: True}
失败 data_dict = {“status”: False, “error”: form.errors}
error中携带了错误信息

task.py

# author : Sun;  time : 2023/2/10 18:14;
import json

from django import forms
from django.http import JsonResponse
from django.shortcuts import render, redirect, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from bm01.utils.form import BootStrapModelForm
from bm01.models import Task


class TaskModelForm(BootStrapModelForm):
    class Meta:
        model = Task
        fields = "__all__"
        widgets = {
            "detail": forms.TextInput,
        }

@csrf_exempt
def task_add(request):
    print(request.POST)
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {"status": True}
        return HttpResponse(json.dumps(data_dict))
    data_dict = {"status": False, 'error': form.errors}
    return JsonResponse(data_dict)

def task_list(request):
    form = TaskModelForm()
    return render(request, "task_list.html", {"form": form})

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

task.html

error 字典内容

前端优化

使得页面为绝对位置，而错误信息出现以相对的形式，不会撑起来div ，而是相对在每一个输入框下浮
提交按钮不会被向下挤

任务展示

添加数据后自动刷新

location.reload();
1

任务列表展示和翻页

task.py

def task_list(request):
    """任务列表添加,展示,搜索,同admin_list """
    # 添加框
    form = TaskModelForm()

    # 搜索框
    data_dict = {}
    search_data = request.GET.get('se', "")
    if search_data:
        data_dict = {"title__contains": search_data}
    queryset = models.Task.objects.filter(**data_dict)

    # 分页 页码跳转框
    page_obj = Pagination(request, queryset)
    context = {
        "search_data": search_data,
        "form": form,
        "queryset": page_obj.page_queryset,
        "page_string": page_obj.html()
    }
    return render(request, "task_list.html", context)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

task_list.html

 {% extends 'xlayout.html' %}
{% load static %}

{% block mbname %}
    <div class="container" style="height: 999px">
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body">
                <form method="post" id="task_form" novalidate>
                    <div>
                        {% for item in form %}
                            <div class="col-xs-6">
                                <div class="form-group" style="position: relative; margin-top: 20px">
                                    <label>{{ item.label }}</label>
                                    {{ item }}
                                    <span style="color:red;position: absolute"></span>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                </form>
                <div class="col-xs-12">
                    <input id="submit" type="submit" value="提 交" class="btn btn-primary center-block"
                           style="width: 100px;margin-top: 20px">
                </div>
            </div>
        </div>
        <div>
            <div class="panel panel-default">
                <!-- Default panel contents -->
                <div class="panel-heading">
                    <span class="glyphicon glyphicon-th-list" aria-hidden="true" style="margin-right: 5px;"></span>
                    <span>任务列表</span>
                    <div class="col-xs-4  navbar-right" style="margin-top: -7px">
                        <form method="get">
                            <div class="input-group" >
                                <input class="form-control" name="se" type="text" placeholder="任务名称"
                                       value="{{ search_data }}">
                                <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">搜索任务</button>
                        </span>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- Table -->
                <table class="table table-bordered">
                    <thead>
                    <tr>
                        <th>ID</th>
                        <th>标题</th>
                        <th>级别</th>
                        <th>负责人</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {% for obj in queryset %}
                        <tr>
                            <th>{{ obj.id }}</th>
                            <td>{{ obj.title }}</td>
                            <td>{{ obj.get_level_display }}</td>
                            <td>{{ obj.user.username }}</td>
                            <td>
                                <a class="btn btn-primary btn-xs" href="#">编辑</a>
                                <a class="btn btn-danger btn-xs" href="#">删除</a>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
        <ul class="pagination">
            {{ page_string }}
        </ul>
        <br>
        <form method="get">
            <div style="display:inline-block; width: 150px;">
                <div class="input-group">
                    <span><input type="text" class="form-control" placeholder="请输入页码" name="page"></span>
                    <span class="input-group-btn">
                <button class="btn btn-primary" type="submit">跳转</button>
            </span>
                </div>
            </div>
        </form>


    </div>

    <div>
        <h3>1</h3>
        <button class="btn-primary" id="btn1">按钮</button>
        <h3>2</h3>
        <input type="text" id='u' placeholder="用户名">
        <input type="text" id='a' placeholder="年龄">
        <button class="btn-primary" id="btn2">按钮</button>
        <h3>3</h3>
        <form id="form3">
            <input type="text" name='uu' placeholder="用户名">
            <input type="text" name='aa' placeholder="年龄">
            <input type="text" name='bb' placeholder="年龄">
            <input type="text" name='ee' placeholder="xx">
            <input type="text" name='ff' placeholder="xxx">
            <input type="text" name='gg' placeholder="xxx">
            <button class="btn-primary" id="btn3">按钮</button>
        </form>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript">
        $(function () {
            bindaddEvent();
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
        })

        function bindaddEvent() {
            $("#submit").click(function () {
                $.ajax({
                    url: '/task/add/',
                    type: "post",
                    data: $("#task_form").serialize(),
                    dataType: "JSON",
                    success: function (res) {
                        if (res.status) {
                            alert("添加成功!!!");
                            location.reload();
                        } else {
                            $.each(res.error, function (name, data) {
                                $("#id_" + name).next().text(data[0]);
                            })
                        }
                    }
                })
            })
        }

        function bindBtn1Event() {
            $('#btn1').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: {
                        n1: 123,
                        n2: 345
                    },
                    {#拿到字符串自动转化为前端对象#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                        console.log(res.a);
                        console.log(res.b);
                        console.log(res.c);
                    }
                })
            })
        }

        function bindBtn2Event() {
            $('#btn2').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: {
                        user: $("#u").val(),
                        age: $("#a").val(),
                    },
                    {#拿到字符串自动转化为前端对象#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

        function bindBtn3Event() {
            $('#btn3').click(function () {
                $.ajax({
                    url: '/task/ajax/',
                    type: 'post',
                    data: $("#form3").serialize(),
                    {#拿到字符串自动转化为前端对象#}
                    dataType: "JSON",
                    success: function (res) {
                        console.log(res);
                    }
                })
            })
        }

    </script>
{% endblock %}
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197

添加：

展示：
数据库中特殊数据进行展示

按任务名称搜索：

分页，搜索页