脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 脚本专栏 → python → Django使用Ajax

Django环境下使用Ajax的操作代码

 更新时间：2024年03月14日 09:34:42   作者：Az_plus  
AJAX 的主要目标是在不刷新整个页面的情况下,通过后台与服务器进行数据交换和更新页面内容,通过 AJAX,您可以向服务器发送请求并接收响应,然后使用 JavaScript 动态地更新页面的部分内容,这篇文章主要介绍了Django环境下使用Ajax,需要的朋友可以参考下

Django环境下使用Ajax

介绍

AJAX 的主要目标是在不刷新整个页面的情况下，通过后台与服务器进行数据交换和更新页面内容。通过 AJAX，您可以向服务器发送请求并接收响应，然后使用 JavaScript 动态地更新页面的部分内容

简单来说就是将后端数据进行加工后传给前端，再利用js对数据进行加工或判断后渲染到前端

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行，AJAX 使用异步交互与服务器进行通信

  • 同步交互：
    • 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：
    • 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

前情提要

常见的发送请求方式：

  • 浏览器地址直接输入url回车
    • GET请求
  • a标签的href属性
    • GET请求/POST请求
  • form表单
    • GET请求/POST请求
  • Ajax
    • GET请求/POST请求

示例

预期效果

JS实现

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button>
<script>
    document.getElementById('b1').addEventListener('click', function () {
        var num1 = document.getElementById('num1').value
        var num2 = document.getElementById('num2').value
        var sum = parseInt(num1) + parseInt(num2)
        document.getElementById('num3').value = sum
    })
</script>
</body>

Ajax实现

将要计算的参数通过data传递给后端

再由success接受后端返回的数据进行渲染

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button>
<script>
    document.getElementById('b1').addEventListener('click', function () {
        var num1 = document.getElementById('num1').value
        var num2 = document.getElementById('num2').value
        $.ajax({
            {#url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址#}
            url:'',
            {#type：请求类型 GET / POST 默认是GET#}
            type:'post',
            {#data：传给后端的数据#}
            data:{
                'num1':num1,
                'num2':num2,
            },
            {#success：回调函数 接受后端传过来的数据#}
            success:function (data){
                console.log(data)
                document.getElementById('num3').value = data
            }
        })
    })
</script>
</body>

后端接受到data数据并返回sum参数

def test(request):
    if request.method == 'POST':
        data = request.POST
        num1 = data.get('num1')
        num2 = data.get('num2')
        sum = int(num1) + int(num2)
        return HttpResponse(sum)
    return render(request, 'app01/test.html', locals())

传递JSON格式数据

success获取由后端返回的数据并使用JSON.parse(data)进行数据转换，这样便可以直接用.属性获取参数
JSON.stringify：ajax中将需要传递的数据转换成json类型
json.loads(request.body.decode())：后端接受数据时需要通过request.body来获取请求体，然后loads手动解析json数据

<body>
<input type="text" id="num1">+
<input type="text" id="num2">=<input type="text" id="num3"><br>
<button id="b1">点我计算结果</button>
<script>
    document.getElementById('b1').addEventListener('click', function () {
        var num1 = document.getElementById('num1').value
        var num2 = document.getElementById('num2').value
        $.ajax({
            {#url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址#}
            url: '',
            {#type：请求类型 GET / POST 默认是GET#}
            type: 'post',
            {#data：以json格式传递给后端数据#}
            data: JSON.stringify({
                'num1': num1,
                'num2': num2,
            }),
            {#success：回调函数 接受后端传过来的数据#}
            success: function (data) {
                var new_data = JSON.parse(data)
                if (new_data.code != 200) {
                    alert('非法数据')
                } else {
                    console.log(data)
                    document.getElementById('num3').value = new_data.sum
                }
            }
        })
    })
</script>
</body>

接受数据并返回json格式数据(主力这里回调函数用的是data.参数)

def test(request):
    if request.method == 'POST':
    	# 提取json数据必须通过request.body获取请求体 并手动解析 JSON 数据
        data = json.loads(request.body.decode())
        num1 = data.get('num1')
        num2 = data.get('num2')
        sum = int(num1) + int(num2)
        # HttpResponse发送给前端的是str对象 需要在success重新转换类型
        return HttpResponse(json.dumps({'code':200,'sum':sum}))
    return render(request, 'app01/test.html', locals())

传递文件数据

<script>
    $(document).ready(
        $("#btn_result").click(function () {
            let numberOne = $("#number1").val();
            let numberTwo = $("#number2").val();
            let fileVal = $("#file_input")[0].files[0];
            // Ajax携带文件数据需要借助第三方的 formData对象
            // （1）实例化得到一个 form对象
            // 将所有的键值对数据都要放到 form对象中
            let formDataObj = new FormData();
            formDataObj.append("numberOne", numberOne)
            formDataObj.append("numberTwo", numberTwo)
            formDataObj.append("file", fileVal)
            console.log(fileVal)
            console.log(formDataObj)
            // 基于Ajax发送请求
            $.ajax({
                // url：指定当前数据提交的网址,如果不写就和form表单的action一样，默认释放前路由地址
                url: "",
                // type：请求类型 GET / POST 默认是GET
                type: "post",
                // data：传给后端的数据
                //（1）传输的data直接放上面的 form对象即可
                data: formDataObj,
                //（2）走form对象不能让他使用编码对数据进行编码
                contentType: false, // 默认编码是 urlencoded
                //（3）告诉浏览器不要对数据进行额外的处理
                processData: false,
                {#data: {'number_one': numberOne, "number_two": numberTwo},#}
                // success：回调函数 接受后端传过来的数据
                success: function (data) {
                    console.log(data)
                    console.log(typeof (data))
                    // 使用 js自己的序列化方法序列化数据
                    {#let dataVal = JSON.parse(data)#}
                    console.log(typeof (data))
                    if (data.code === 200) {
                        $("#result").val(data.result)
                    } else {
                        alert("非法的数据")
                    }
                }
            })
        })
    )
</script>
def test(request):
    if request.method == "POST":
        # 可以用来判断当前的请求方式是否是Ajax
        print(request.is_ajax()) # True
        # print(type(request.body.decode("utf-8")[0]))
        # 获取普通的键值对数据只需要通过 POST方法
        data = request.POST
        print(data)  # <QueryDict: {'numberOne': ['2'], 'numberTwo': ['2']}>
        # 获取form对象中的文件数据也要借助 FILES
        print(request.FILES)  # <MultiValueDict: {'file': [<InMemoryUploadedFile: avatar.jpg (image/jpeg)>]}>
        return JsonResponse({"code": 200, "result": "ok"})
    return render(request, "app01/test.html", locals())

Django自带的序列化组件

什么是序列化？

就是当我想要从数据库提取出数据后将数据对象转换为可以直接使用的数据的过程

基于jsonresponse序列化数据

from app01.models import User
def get_user(request):
    # 查询所有的用户数据
    user_data_list = []
    # 此时获取到的是对象数据<QuerySet [<Author: Author object (1)>, <Author: Author object (2)>]>
    user_queryset = User.objects.all()
    # 将数据字段提取后装进列表
    for user_obj in user_queryset:
        user_data_list.append({
            "username": user_obj.username,
            "age": user_obj.age,
            "gender": user_obj.get_gender_display(),
        })
    print(user_data_list)
    # 将列表返回前端
    return JsonResponse(user_data_list,safe=False)
[{'username': 'drema', 'age': 18, 'gender': 'female'}, {'username': 'opp', 'age': 28, 'gender': 2}, {'username': 'hope', 'age': 38, 'gender': 'female'}]

基于Django自带的serializers

需要导入serializers模块

from app01 import models
from django.core import serializers
def test(request):
    author = models.Author.objects.all()
    author_list = serializers.serialize("json", author)
    print(author_list)
    return JsonResponse(user_data_list, safe=False)
[{"model": "app01.author", "pk": 1, "fields": {"name": "张三", "age": 11, "gender": 2}}, {"model": "app01.author", "pk": 2, "fields": {"name": "李四", "age": 19, "gender": 2}}]

注册示例

# 前端
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    引入jQuery-->
    <script src="{% static 'js/jquery.js' %}"></script>
    <!--    引入Bootstrap的CSS文件-->
    <link href="{% static 'css/bootstrap.min.css' %}" rel="external nofollow"  rel="stylesheet">
    <!--    引入Bootstrap的JavaScript文件-->
    <script src="{% static 'js/bootstrap.js' %}"></script>
    <style>
        /* 左侧空白区域 */
        .left-section {
            background-color: dimgrey;
            width: 25%;
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
        }
        /* 右侧空白区域 */
        .right-section {
            background-color: dimgrey;
            width: 25%;
            height: 100vh;
            position: fixed;
            top: 0;
            right: 0;
        }
        .d1 {
            position: fixed;
            left: 35%;
        }
        .form-control:focus {
            outline: none;
            box-shadow: 0 0 5px cornflowerblue;
        }
        .btn-default + .btn-primary {
            margin-left: 150px; /* 调整为所需的间距 */
        }
    </style>
</head>
<body>
<div class="left-section"></div>
<div class="right-section"></div>
<div class="d1">
{#    <form action="" method="post">#}
        <div class="form-group">
            <label for="username">用户名</label><br>
            <input type="text" class="form-control" id="username" placeholder="Username"><br>
            <hr>
        </div>
        <div class="form-group">
            <label for="pwd">密码</label><br>
            <input type="password" class="form-control" id="password" placeholder="Password"><br>
            <hr>
        </div>
        <div class="form-group">
            <label for="pwd2">再次输入密码</label><br>
            <input type="password" class="form-control" id="password2" placeholder="Password"><br>
        </div>
        <button type="reset" class="btn btn-default">重置</button>
        <button class="btn btn-primary" id="b1">确认</button>
{#    </form>#}
</div>
<script>
    var b1 = document.getElementById("b1")
    $(document).ready(function () {
        b1.addEventListener('click', function () {
            $.ajax({
                url: '',
                type: 'post',
                data: JSON.stringify({
                    'username': document.getElementById("username").value,
                    'password': document.getElementById("password").value,
                    'password2': document.getElementById("password2").value
                }),
                contentType: 'application/json',
                success: function (data) {
                    alert(JSON.parse(data.state))
                },
                error: () => {
                    console.log('错误')
                }
            })
        })
    })
</script>
</body>
</html>
# 后端
def register(request):
    if request.method == 'POST' and request.is_ajax():
        # data = request.POST
        data = json.loads(request.body.decode())
        print(data)
        username = data.get('username')
        password = data.get('password')
        print(username, password)
        # models.User.objects.create(username=username,password=password)
        state = {'state': 200}
        return JsonResponse(state)
    return render(request, 'app01/register.html')

到此这篇关于Django环境下使用Ajax的文章就介绍到这了,更多相关Django使用Ajax内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 通过Python实现自动填写调查问卷

    通过Python实现自动填写调查问卷

    这篇文章主要介绍了通过Python实现自动填写调查问卷的相关资料,需要的朋友可以参考下
    2017-09-09
  • 浅析NumPy 切片和索引

    浅析NumPy 切片和索引

    这篇文章主要介绍了NumPy 切片和索引的相关资料，帮助大家更好的理解和学习NumPy的相关知识，感兴趣的朋友可以了解下。
    2020-09-09
  • py3nvml实现GPU相关信息读取的案例分析

    py3nvml实现GPU相关信息读取的案例分析

    这篇文章主要介绍了py3nvml实现GPU相关信息读取,此时就可以考虑使用py3nvml这样的工具，针对于GPU任务执行的过程进行细化的分析，有助于提升GPU的利用率和程序执行的性能，需要的朋友可以参考下
    2022-01-01
  • python的scipy.stats模块中正态分布常用函数总结

    python的scipy.stats模块中正态分布常用函数总结

    在本篇内容里小编给大家整理的是一篇关于python的scipy.stats模块中正态分布常用函数总结内容，有兴趣的朋友们可以学习参考下。
    2021-02-02
  • 布同 统计英文单词的个数的python代码

    布同 统计英文单词的个数的python代码

    最近需要翻译英文文章，所以需要统计单词个数。索性写了一段代码在此，可以简单的统计单词的个数
    2011-03-03
  • 在Matplotlib图中插入LaTex公式实例

    在Matplotlib图中插入LaTex公式实例

    这篇文章主要介绍了在Matplotlib图中插入LaTex公式实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2020-04-04
  • python保存两位小数的多种方法汇总

    python保存两位小数的多种方法汇总

    很多小伙伴在学习python的时候可能会遇到对数据进行格式化输出的需求,其中最常见的需求为:保留几位小数,下面这篇文章主要给大家介绍了关于python保存两位小数的多种方法,需要的朋友可以参考下
    2021-12-12
  • python使用plot绘制未来15天气温折线图

    python使用plot绘制未来15天气温折线图

    本文主要介绍了py使用plot绘制未来15天气温折线图，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-09-09
  • python中string模块各属性以及函数的用法介绍

    python中string模块各属性以及函数的用法介绍

    下面小编就为大家带来一篇python中string模块各属性以及函数的用法介绍。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-05
  • python多线程方式执行多个bat代码

    python多线程方式执行多个bat代码

    这篇文章主要为大家详细介绍了python多线程方式执行多个bat的实现代码，感兴趣的小伙伴们可以参考一下
    2016-06-06

最新评论