【Django】开发日报_10_Day：手机号码管理系统-使用Ajax

0、设置随机数字验证码（补充）

code.py

1、Ajax请求

通常我们浏览器发送的GET、POST请求都会造成页面刷新，而使用Ajax请求就会在浏览器不刷新的情况下也能更新数据。

2、Ajax测试示例（1）

（1）、DOM按钮绑定事件

urls.py

from app01.views import depart,user,pretty,admin,account,task
#------------------任务管理---------------------------------------------------
    path('task/list/', task.task_list),

views->task.py

from django.shortcuts import render,redirect
def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

task_list.html

{
    
    % extends "template.html" %}

{
    
    % block content %}
    <div class="container">
        <h1>任务管理</h1>

        <h3>示例1</h3>
    <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
    </div>
{
    
    % endblock %}

{
    
    % block js %}
    <script type="text/javascript">
        function clickMe(){
    
    
            console.log("点击了按钮");
        }
    </script>
{
    
    % endblock %}

修改模板template.html

访问页面

（2）、GET请求测试

urls.py

    path('task/ajax/', task.task_ajax),

task,py

from django.shortcuts import render,redirect,HttpResponse
def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了")

task_ajax.html

{
    
    % extends "template.html" %}

{
    
    % block content %}
    <div class="container">
        <h1>任务管理</h1>

        <h3>示例1</h3>
    <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
    </div>
{
    
    % endblock %}

{
    
    % block js %}
    <script type="text/javascript">
        function clickMe(){
    
    
            $.ajax({
    
    
                url:'/task/ajax/',
                type:"get",
                data:{
    
    
                    n1:123,
                    n2:456
                },
                sucess:function (res){
    
    
                    console.log(res);
                }
            })
        }
    </script>
{
    
    % endblock %}

访问：

（3）、POST请求测试

直接修改type会发生报错，因为没有验证cookie中的csrftoken
这里采用直接避免验证的方式进行post请求的访问

from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    return HttpResponse("成功了")

task_list.html

{
    
    % extends "template.html" %}

{
    
    % block content %}
    <div class="container">
        <h1>任务管理</h1>

        <h3>示例1</h3>
    <input type="button" class="btn btn-primary" value="点击" onclick="clickMe();"/>
    </div>
{
    
    % endblock %}

{
    
    % block js %}
    <script type="text/javascript">
        function clickMe(){
    
    
            $.ajax({
    
    
                url:'/task/ajax/',
                type:"post",
                data:{
    
    
                    n1:123,
                    n2:456
                },
                sucess:function (res){
    
    
                    console.log(res);
                }
            })
        }
    </script>
{
    
    % endblock %}

再次访问显示成功

（4）、JQuery按钮绑定事件

{
    
    % block js %}
    <script type="text/javascript">
        $(function () {
    
    
            //页面框架加载完成之后代码自动执行
            bindBtn1Event();
        })

        function bindBtn1Event() {
    
    
            $("#btn1").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: {
    
    
                        n1: 123,
                        n2: 456
                    },
                    sucess: function (res) {
    
    
                        console.log(res);
                    }
                })
            })
        }
    </script>
{
    
    % endblock %}

（5）、Ajax请求的返回值（后台数据传输到前端）

一般为JSON形式。
方法1：

import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
    
    
        "status":True,
        "data":[1,2,3,4]
    }
    json_string = json.dumps(data_dict)
    return HttpResponse(json_string)

方法2：

import json
from django.http import JsonResponse
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
    
    
        "status":True,
        "data":[1,2,3,4]
    }
    #json_string = json.dumps(data_dict)
    #return HttpResponse(json_string)
    return JsonResponse(data_dict)

因为返回给前端的是字符串，处理起来比较麻烦，所以在前端拿到数据要进行反序列化处理，将数据类型设为JSON

直接获取前端值

访问页面

3、Ajax测试示例（2）前端数据传输到后台

示例：bindBtn2Event

{
    
    % extends "template.html" %}

{
    
    % block content %}
    <div class="container">
        <h1>任务管理</h1>

        <h3>示例1</h3>
        <input type="button" id="btn1" class="btn btn-primary" value="点击"/>

        <h3>示例2</h3>
        <input type="text" id="txtName" placeholder="姓名"/>
        <input type="text" id="txtAge" placeholder="年龄"/>
        <input id="btn2" type="button" class="btn btn-primary" value="提交">
    </div>
{
    
    % endblock %}

{
    
    % block js %}
    <script type="text/javascript">
        $(function () {
    
    
            //页面框架加载完成之后代码自动执行
            bindBtn1Event();
            bindBtn2Event();
        })

        function bindBtn1Event() {
    
    
            $("#btn1").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: {
    
    
                        n1: 123,
                        n2: 456
                    },
                    dataTypes: "JSON",
                    sucess: function (res) {
    
    
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

        function bindBtn2Event() {
    
    
            $("#btn2").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: {
    
    
                        name:$("#txtName").val(),
                        age:$("#txtAge").val(),
                    },
                    dataTypes: "JSON",
                    sucess: function (res) {
    
    
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

    </script>
{
    
    % endblock %}

后台：

import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
    
    
        "status":True,
        "data":[1,2,3,4]
    }
    json_string = json.dumps(data_dict)
    return HttpResponse(json_string)

输出

4、Ajax测试示例（3）（使用form表单）

当提交的数据过多时，也可使用表单提交

<h3>示例3</h3>
        <form id="form3">
            <input type="text" name="name" placeholder="姓名"/>
            <input type="text" name="age" placeholder="年龄"/>
            <input type="text" name="email" placeholder="邮箱"/>
            <input type="text" name="more" placeholder="个人介绍"/>
        </form>
        <input id="btn3" type="button" class="btn btn-primary" value="发送">

事件绑定并打包数据

前端

后台

import json
from django.shortcuts import render,redirect,HttpResponse
from django.views.decorators.csrf import csrf_exempt

def task_list(request):
    """任务列表"""
    return render(request,"task_list.html")

@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
    
    
        "status":True,
        "data":[1,2,3,4]
    }
    json_string = json.dumps(data_dict)
    return HttpResponse(json_string)

输出

5、Ajax项目实例（连接数据库）

（1）创建一张任务表

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)

运行manage.py

makemigrations
migrate

（2）查看数据库

（3）修改管理员表将对象显示成文字

models.py

class Admin(models.Model):
    """管理员"""
    username = models.CharField(verbose_name="用户名", max_length=32)
    password = models.CharField(verbose_name="密码", max_length=64)
    #当输出该类的对象时，显示对象名字
    def __str__(self):
        return self.username

（4）为task表创建ModelForm

form,py

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

（5）创建发送Ajax请求的网址

urls.py

    path('task/add/', task.task_add),

（6）创建和修改视图函数

task.py

import json
from django.http import JsonResponse
from django.shortcuts import render, redirect, HttpResponse
from django.views.decorators.csrf import csrf_exempt
from app01.utils.form import TaskModelForm


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


@csrf_exempt
def task_ajax(request):
    print(request.GET)
    print(request.POST)
    data_dict = {
    
    
        "status": True,
        "data": [1, 2, 3, 4]
    }
    json_string = json.dumps(data_dict)
    return HttpResponse(json_string)


@csrf_exempt
def task_add(request):
    """添加任务"""
    #print(request.POST)
    # <QueryDict: {'level': ['1'], 'title': ['111'], 'detail': ['11'], 'user': ['1']}>
    # 1、对用户发送的数据表单进行校验（此处使用ModelForm进行校验）
    form = TaskModelForm(data=request.POST)
    if form.is_valid():
        form.save()
        data_dict = {
    
    "status": True}
        return JsonResponse(data_dict)
    data_dict = {
    
    
        "status": False,
        "error": form.errors
    }
    return JsonResponse(data_dict)

（7）修改网页格式与Ajax事件绑定

task_list.html

{
    
    % extends "template.html" %}

{
    
    % block content %}
    <div class="container">
        <!--实际案例-->
        <div class="panel panel-default">
            <div class="panel-heading">表单</div>
            <div class="panel-body">
                <form id="formAdd">
                    <div class="clearfix"><!--与栅格连用-->
                        {
    
    % for obj in form %}
                            <div class="col-xs-6"><!--栅格为6-->
                                <div class="form-group" style="position: relative;margin-bottom: 20px;">
                                    <label> {
    
    {
    
     obj.label }} </label>
                                    {
    
    {
    
     obj }}
                                    <span class="error-msg" style="color:red;position: absolute;"></span>
                                </div>
                            </div>
                        {
    
    % endfor %}
                        <div class="col-xs-6">
                            <button id="btnAdd" type="button" class="btn btn-primary">提 交</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>

        <!--学习样例-->
        <hr/>
        <h1>Ajax学习</h1>
        <h3>示例1</h3>
        <input type="button" id="btn1" class="btn btn-primary" value="点击"/>
        <h3>示例2</h3>
        <input type="text" id="txtName" placeholder="姓名"/>
        <input type="text" id="txtAge" placeholder="年龄"/>
        <input id="btn2" type="button" class="btn btn-primary" value="提交">
        <h3>示例3</h3>
        <form id="form3">
            <input type="text" name="name" placeholder="姓名"/>
            <input type="text" name="age" placeholder="年龄"/>
            <input type="text" name="email" placeholder="邮箱"/>
            <input type="text" name="more" placeholder="个人介绍"/>
        </form>
        <input id="btn3" type="button" class="btn btn-primary" value="发送">
    </div>
{
    
    % endblock %}

{
    
    % block js %}
    <script type="text/javascript">
        $(function () {
    
    
            //页面框架加载完成之后代码自动执行
            //学习案例
            bindBtn1Event();
            bindBtn2Event();
            bindBtn3Event();
            //实际案例
            bindBtnAddEvent();
        })

        function bindBtn1Event() {
    
    
            $("#btn1").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: {
    
    
                        n1: 123,
                        n2: 456
                    },
                    dataTypes: "JSON",
                    success: function (res) {
    
    
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

        function bindBtn2Event() {
    
    
            $("#btn2").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: {
    
    
                        name: $("#txtName").val(),
                        age: $("#txtAge").val(),
                    },
                    dataTypes: "JSON",
                    success: function (res) {
    
    
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);
                    }
                })
            })
        }

        function bindBtn3Event() {
    
    
            $("#btn3").click(function () {
    
    
                $.ajax({
    
    
                    url: '/task/ajax/',
                    type: "post",
                    data: $("#form3").serialize(),
                    dataTypes: "JSON",
                    success: function (res) {
    
    
                        console.log(res);
                    }
                })
            })
        }

        function bindBtnAddEvent() {
    
    
            $("#btnAdd").click(function () {
    
    //绑定按钮

                $("#btnAdd").click(function () {
    
    
                    $(".error-msg").empty();
                })

                $.ajax({
    
    
                    url: '/task/add/',
                    type: "post",
                    data: $("#formAdd").serialize(),//表单数据
                    dataTypes: "JSON",
                    success: function (res) {
    
    

                        console.log(res.status);
                        if (res.status) {
    
    
                            alert("添加成功");
                        } else {
    
    
                            console.log(res.error);
                            $.each(res.error, function (name, data) {
    
    
                                console.log(name.data);
                                $("#id_" + name).next().text(data[0]);
                            })
                        }
                    }
                })
            })
        }
    </script>
{
    
    % endblock %}

（8）网页访问