Python-Django学习笔记15-Django（Ajax）

Employee

Web开发

发布于：2023年10月13日

字数：1.8k字

时长：9分钟

Ajax实现任务管理

1. Ajax请求

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

GET
POST

特点：页面会刷新

除此之外，也可以基于Ajax向后台发送请求（偷偷的发送请求，页面不会刷新）

依赖jQuery
编写Ajax代码

$.ajax({
    url:"发送的地址",
    type:"发送请求的方式：get/post...",
    data:{
        n1:123,
        n2:456
    },
    success:function(res){
        console.log(res);
    }
})

1.1 GET请求

from django.shortcuts import render,HttpResponse


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

""" 收到客户端通过Ajax提交的GET请求并返回数据 """
def task_ajax(request):
    print(request.GET)
    return HttpResponse("成功了！！！")

<div class="container">
    <h1>任务管理</h1>
    <h3>示例1</h3>
    <input type="button" class="btn btn-primary" value="点击" onclick="clickMe()"/>
</div>

<script type="text/javascript">
    function clickMe() {
        // console.log("点击了按钮");
        $.ajax({
            url: '/task/ajax/',
            type: 'get',
            data: {
                n1: 123,
                n2: 456
            },
            success: function (res) {
                console.log(res);
            }
        });
    }
</script>

1.2 POST请求

# 免除csrf token的认证
@csrf_exempt
def task_ajax(request):
    print(request.POST)
    return HttpResponse("成功了！！！")

<script type="text/javascript">
    function clickMe() {
        // console.log("点击了按钮");
        $.ajax({
            url: '/task/ajax/',
            type: 'post',
            data: {
                n1: 123,
                n2: 456
            },
            success: function (res) {
                console.log(res);
            }
        });
    }
</script>

方式2

<script type="text/javascript">
  $(function () {
    // 页面框架加载完成之后代码自动执行
    bindBtn1Event();
  });
  
  function bindBtn1Event() {
    $("#btn1").click(function () {
      $.ajax({
        url: "/task/ajax/",
        type: "post",
        data: {
          n1: 123,
          n2: 456,
        },
        success: function (res) {
          console.log(res);
        },
      });
    });
  }
</script>

2. Ajax请求的返回值

一般都会返回JSON格式

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

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

# 免除csrf token的认证
@csrf_exempt
def task_ajax(request):
    print(request.POST)

    data_dict = {"status": True, "data": [11,22,33,44]}
    # json_str = json.dumps(data_dict)
    # return HttpResponse(json_str)
    return JsonResponse(data_dict)

其他提交方式示例

<div class="container">
  <h1>任务管理</h1>
  <h3>示例1</h3>
  <input id="btn1" type="button" class="btn btn-primary" value="点击1" />

  <h3>示例2</h3>
  <input type="text" id="txtUser" , placeholder="用户名" />
  <input type="text" id="txtAge" placeholder="年龄" />
  <input id="btn2" type="button" class="btn btn-primary" value="点击2" />

  <h3>示例3</h3>
  <form action="#" id="form3">
    <input type="text" name="user" , 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="点击3" />
</div>

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

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

  function bindBtn2Event() {
    $("#btn2").click(function () {
      $.ajax({
        url: "/task/ajax/",
        type: "post",
        data: {
          name: $("#txtUser").val(),
          age: $("#txtAge").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>

# 免除csrf token的认证
@csrf_exempt
def task_ajax(request):
    print(request.POST)

    data_dict = {"status": True, "data": [11,22,33,44]}
    json_str = json.dumps(data_dict)
    # return HttpResponse(json_str)
    return JsonResponse(data_dict)

3. 案例：添加任务

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">新建任务</div>
    <div class="panel-body">
      <form id="formAdd">
        <div class="clearfix">
          {% for field in form %}
          
            
              {{field.label}}
              {{ field }}
              
              
            
          
          {% endfor %}
          <div class="col-xs-12">
            <button id="btnAdd" type="button" class="btn btn-primary">
              提 交
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

function bindBtnAddEvent() {
$("#btnAdd").click(function () {
  $(".error-msg").empty();
  $.ajax({
    url: "/task/add/",
    type: "post",
    data: $("#formAdd").serialize(),
    dataType: "JSON",
    success: function (res) {
      if (res.status) {
        alert("添加成功");
      } else {
        $.each(res.error, function (name, data) {
          // console.log(name, data);
          $("#id_" + name)
            .next()
            .text(data[0]);
        });
      }
    },
  });
});
}

@csrf_exempt
def task_add(request):
    # print("添加任务", request.POST)

    # 1.用户发送过来的数据进行校验
    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 HttpResponse(json.dumps(data_dict, ensure_ascii=False))

4. Django开发

4.1 知识点回顾

安装Django

pip install django

创建Django项目
- 注意：PyCharm也可以创建（需要先将settings.py中的DIR templates 删除）

>>> django-admin startproject mysite

创建APP
- 需要将APP注册在settings.py中
- 注意：否则APP下的models.py写类时，无法在数据库中创建表

>>> python manage.py startapp app01
>>> python manage.py startapp app02
>>> python manage.py startapp app03

INSTALLED_APPS = [
    ...
    'app01.apps.App01Config',
]

配置静态文件路径 & 模板路径
- 放在APP目录下

配置数据库相关操作(MySQL)

第三方模块(django3版本)

pip install mysqlclient

自己先去MySQL创建一个数据库

配置数据库连接settings.py

DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",   # 数据库类型
        "NAME": "djangotest03",                 # 数据库名称
        "USER": "root",                         # 用户名
        "PASSWORD": "root123",                  # 密码
        "HOST": "127.0.0.1",                    # 主机
        "PORT": "3306",                         # 端口
    }
}

在APP下的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

    
""" 任务表 """
class Task(models.Model):
    level_choices = (
        (1, "紧急"),
        (2, "重要"),
        (3, "一般"),
    )
    level = models.SmallIntegerField(verbose_name="任务级别", choices=level_choices, default=3)
    title = models.CharField(verbose_name="任务标题", max_length=64)
    detail = models.TextField(verbose_name="任务详情")
    user = models.ForeignKey(verbose_name="负责人", to="Admin", to_field="id", on_delete=models.CASCADE)

执行两个命令（创建数据库中的表）

>>> python manage.py makemigrations
>>> python manage.py migrate

在urls.py，路由（URL和视图函数的对应关系）
在views.py中，写视图函数，编写业务逻辑
templates目录，编写HTML模板（含有模板语法、继承、{% static 'xxx' %}、…）
ModelForm & Form组件，在我们开发增删改查功能
- 生成HTML标签（生成默认值…）
- 对用户提交的数据进行校验
- 保存到数据库（ModelForm）
- 获取显示错误信息
Cookie & Session，用户登录信息保存起来
中间件，基于中间件实现用户认证；基于：process_request
ORM操作

models.User.objects.filter(id="xxx")
models.User.objects.filter(id="xxx").order_by("-id")

封装分页组件

更新于：2023年10月13日

次浏览

Python-Django学习笔记16-Django（订单管理）

Ajax实现订单管理 1. 订单数据模型""" 订单表 """ class Order(models.Mo...

Python-Django学习笔记14-Django（用户认证）

用户登录、认证、验证码、注销 1. 用户登录什么是cookie和session？无状态 & 短链接 http://127.0.0.1:8000/ad...