设为首页收藏本站
开启辅助访问

MSIPO技术圈 › 首页 ›IT技术 › 查看内容

Django Ajax

2024-03-25

【一】Json

【1】介绍

  • JSON（javascript object otaition）是一种轻量级的数据交换格式
  • JSON使用了Javascript的一部分语法来定义其数据格式，但Json是独立于语言的
  • Json采用完全独立于语言的文本格式，使得Json成为理想的数据交互语言，几乎所有的现代编程语言都也有工具可以解析Json
  • 它是一种键值对形式的数据结构，易于人的阅读和编写，也易于机器的解析
  • Json格式的提出
    • 目的：取代繁琐笨重的XML格式

【2】格式

  • 属性名必须使用双引号
  • 不能使用十六进制值
  • 不能使用undefind
  • 不能使用日期和函数对象
{
    "name": "John Doe",
    "age": 30,
    "is_student": false,
    "subjects": ["Math", "English", "Science"],
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "state": "CA"
    }
}

【3】数据格式转换

请添加图片描述

【二】Ajax

【1】介绍

（1）概念

  • AJAX（全称：Asynchronous JavaScript and XML，异步的Javascript和和XML）
  • AJAX是一种无需重新加载整个页面的情况下，能够更新部分网页的技术
  • 简单说：AJAX是一种用于创动态网页的编程技术
  • 这意味着网页再被用户查看和交互的同时，可以与服务器进行数据交换和页面更新。
  • 尽管名字中含有XML，但是在实践中，数据格式通常是JSON，并非XML
  • 简单的将：异步交互、局部刷新

（2）大致工作原理

  1. 用户在浏览器进行操作（例如：点击一个按钮）
  2. Javascript创建一个XMLHttpRequest对象，然后向服务器发送请求
  3. 服务器处理这个请求
  4. 服务器将响应发送回网页
  5. Javascript读取响应，然后对网页进行响应的更新
  • 关键：
    • 关键是XMLHttpRequest对象
    • 这个对象是AJAX的主要接口，他提供了浏览器和服务器之间的进行异步通信的能力
  • 请求方式
    • 既可以发送get请求又可以发送post请求

（3）请求方式小结

  • 浏览器地址输入URL回车：GET请求
  • a标签的跳转：GET请求
  • form表单：既可以GET也可以POST
  • AJAX：既可以GET也可以POST

【2】加法案例

（1）前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>

<div>number_one: <input type="text" id="num1"></div>
<div>number_two: <input type="text" id="num2"></div>
<div>result: <input type="text" id="result"></div>
<button id="btn_result">求和计算</button>

<script>
    {#等待页面加载完毕#}
    $(document).ready(
        {#给按钮绑定事件#}
        $("#btn_result").click(function () {
            {#异步触发AJAX#}
            $.ajax(
                {
                    {#提交数数据路径， 和action一样#}
                    url: "",
                    {#提交方式#}
                    type: "post",
                    {#表示期望从数据库返回的数据类型（json、xml、script、html）#}
                    dataType:"json",
                    {#提交给后端的数据, 键值可以直接写#}
                    data: {
                        number1: $("#num1").val(),
                        "number2": $("#num2").val()
                    },
                    {#回调函数，data是后端返回的数据#}
                    success: function (data) {
                        console.log(data, typeof data)
                        {#102 string#}
                        $("#result").val(data)
                    }
                }
            )
        })
    )
</script>


</body>
</html>

（2）后端

from django.shortcuts import render, HttpResponse, JsonResponse


def home(request):
    if request.method == "POST":
        data = request.POST
        print(data)
        num1 = data.get("number1")
        num2 = data.get("number2")
        result = int(num1) + int(num2)
        return HttpResponse(result)
		return JsonResponse(result)
        
    return render(request, 'home.html')

（3）不同方式数据返回

  • 在Django框架中，HttpResponse和JsonResponse是两种不同的响应方式。

    • HttpResponse通常用于返回文本数据
    • JsonResponse用于返回JSON格式的数据

  • 如果后端使用HttpResponse返回数据

    • 那么数据（包括字典）将作为字符串返回，客户端（例如JavaScript）需要手动对其进行解析或反序列化。
    • 例如，如果返回的是JSON格式的字符串，那么在JavaScript中，需要使用JSON.parse()函数将其转换为JavaScript对象。
    • 或者在后端中使用json.dumps()方法将数据转换成

  • 如果后端使用JsonResponse返回数据

    • 那么Django将自动将Python字典或列表转换为JSON格式的字符串。
    • 在客户端，如果使用的是JavaScript的fetch API或jQuery的$.ajax方法（并且dataType参数被设置为'json'），那么这些函数将自动将JSON字符串转换为JavaScript对象，无需手动进行反序列化。
<script>
    {#等待页面加载完毕#}
    $(document).ready(
        {#给按钮绑定事件#}
        $("#btn_result").click(function () {
            {#异步触发AJAX#}
            $.ajax(
                {
                    {#提交数数据路径， 和action一样#}
                    url: "",
                    {#提交方式#}
                    type: "post",
                    {#表示期望从数据库返回的数据类型（json、xml、script、html）#}
                    dataType: "json",
                    {#提交给后端的数据, 键值可以直接写#}
                    data: {
                        number1: $("#num1").val(),
                        "number2": $("#num2").val()
                    },
                    {#回调函数，data是后端返回的数据#}
                    success: function (data) {
                        console.log(data, typeof data)
                        {#{message: 'OK', result: 7712}#}
                        {# 'object'#}
                        $("#result").val(data.result)
                    }
                }
            )
        })
    )
</script>

def home(request):
    if request.method == "POST":
        data = request.POST
        print(data)
        num1 = data.get("number1")
        num2 = data.get("number2")
        res = {
            "message": "OK",
            "result": int(num1) + int(num2)
        }
        return JsonResponse(res)

    return render(request, 'home.html')

【三】前后端传输数据的编码格式(contentType)

  • 由于get请求数据是直接放在url后面的
    • url?username=bruce&password=123
  • 所以主要研究POST请求

【1】urlencoded

  • application/x-www-form-urlencoded（urlencoded）
    • 这是最常见的POST数据提交的方式。
    • 浏览器的原生 <form> 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
    • 键值对都是通过**&符号分隔，键值之间等号（=**）连接。
      • 例如：key1=value1&key2=value2。

【2】formdata

  • multipart/form-data（formdata）
    • 这种数据格式通常用于文件上传。
    • 当表单中包含 <input type="file"> 时，就需要使用这种格式来提交表单。

【3】json

  • application/json（json）
    • 这种数据格式用于发送 JSON 格式的数据。
    • 在现代的Web应用中，这种格式越来越常见，特别是在构建 RESTful API 时。
    • form表单没有这种格式

【4】plain

  • 表单 <form> 的 enctype 属性还可以设置为 text/plain

  • text/plain 是一种简单的数据格式

    • 它和 application/x-www-form-urlencoded 类似
    • 但是它不对字符进行URL编码
    • 这意味着，如果你的数据中包含特殊字符（例如空格、&、=等），这些字符在 text/plain 格式中将保持原样，而不会被转换为URL编码。
      • 空格被转换为 +，@ 被转换为 %40·

  • ext/plain 格式并不常用，因为它不进行URL编码，可能会导致数据传输过程中出现问题。

【四】AJAX传输数据编码格式

【1】request补充

（1）.body

  • 在 Django 中，request.body 属性包含了 HTTP 请求的原始内容，它通常用于处理非表单数据的 POST 请求。
    • 比如，当发送 JSON、XML 或者其他类型的数据时，你会使用 request.body 来获取这些数据。
  • request.body 返回的是一个字节字符串
    • 所以如果你发送的是 JSON 数据，你需要使用 Python 的 json 模块来解析这个字节字符串
  • 需要注意的是，request.body 只能被读取一次
    • 因为它是从 socket 读取的，读取后数据就会被清空。
    • 如果试图多次读取 request.body，你会得到一个空的字节字符串。
    • 如果需要多次使用请求的数据，你需要将它保存到一个变量中。
  • 要使用尽量放在最千面

（2）.is_ajax()

  • is_ajax()是HttpRequest对象的一个方法

    • 它用于检查HTTP请求是否是一个AJAX请求。
    • 这个方法检查HTTP请求头中的X-Requested-With字段是否为XMLHttpRequest。
    • 如果是，则返回True，否则返回False。

  • 需要注意的是，is_ajax()方法并不完全可靠

    • 因为它依赖于客户端设置正确的X-Requested-With头。
    • 如果一个恶意的客户端发送一个伪造的请求，并设置X-Requested-With为XMLHttpRequest，那么is_ajax()会错误地认为这是一个AJAX请求。

【2】默认格式

（1）前端界面

<button class="btn btn=success" id="b1">Click</button>

<script>
    $(document).ready(
        $("#b1").click(function () {
            $.ajax({
                    url: "",
                    type: "post",
                    data: {"username": "bruce", "password": "123"},
                    success: function (args) {
                    }}
            )
        })
    )
</script>

（2）后端

def home(request):
    body = request.body
    print(body, type(body))
    if request.method == "POST":
        data = request.POST
        print(data, type(data))
    return render(request, 'home.html')
# b'username=bruce&password=123' <class 'bytes'>
# <QueryDict: {'username': ['bruce'], 'password': ['123']}> <class 'django.http.request.QueryDict'>

（3）结果

  • 默认值是 'application/x-www-form-urlencoded; charset=UTF-8'，这表示数据是以表单的形式提交的。
    • 特殊的字符串类型
    • 编码方式将每个键值对（key-value pair）转换为key=value的形式，并使用&符号连接多个键值对。

【3】Json格式

（1）前端页面

<button class="btn btn=success" id="b1">Click</button>

<script>
    $(document).ready(
        $("#b1").click(function () {
            $.ajax({
                    url: "",
                    type: "post",
                    contentType:"applications/json",
                    data: JSON.stringify({"username": "bruce", "password": "123"}),
                    success: function (args) {
                    }}
            )
        })
    )
</script>

（2）后端

def home(request):
    body = request.body
    print(body, type(body))
    if request.method == "POST":
        data = request.POST
        print(data, type(data))

    if body:
        # 先解码
        json_str = body.decode('utf-8')
        # 类型转换
        json_dict = json.loads(json_str)
        print(json_dict, type(json_dict))
    return render(request, 'home.html')

b'{"username":"bruce","password":"123"}' <class 'bytes'>
<QueryDict: {}> <class 'django.http.request.QueryDict'>
{'username': 'bruce', 'password': '123'} <class 'dict'>

# 在没有设置类型时
# b'{"username":"bruce","password":"123"}' <class 'bytes'>
# <QueryDict: {'{"username":"bruce","password":"123"}': ['']}> <class 'django.http.request.QueryDict'>

（3）结果

  • contentType:"applications/json"

  • 首先在没有上述设置之前

    • 默认按照urlencoded格式
    • 是特殊的字符串格式
    • 所以在POST中看到的是
      • <QueryDict: {'{"username":"bruce","password":"123"}': ['']}> <class 'django.http.request.QueryDict'>
      • 将所有的数据当成连连在一起的字符，作为一个键值传入

  • 在添加上述设置以后

    • 我们在POST中拿不到任何数据了，是一个空的querydict
    • 我们此时只能在body中拿去数据
    • 但是该数据是字节字符串
      • 所以需要先解码
      • 在使用json.loads()转换格式后
      • 才可以拿到想要的数据

【4】文件格式

（1）前端界面

<p>username: <input type="text" id="d1" name="username"></p>
<p>username: <input type="password" id="d2" name="password"></p>
<p>file: <input type="file" id="d3" name="file"></p>
<button class="btn btn-success" id="b1">submit</button>

<script>
    $("#b1").on('click', function () {
        {#传输文件需要内置对象formdata#}
        let formDataObj = new FormData();
        formDataObj.append('username', $("#d1").val());
        formDataObj.append('password', $("#d2").val());
        formDataObj.append('file', $("#d3")[0].files[0]);

        $.ajax({
            url: "",
            type: "post",
            data: formDataObj,
            {#不需要使用任何编码，django后端能自动识别formdate对象#}
            contentType: false,
            {#告诉浏览器不要对我的数据进行处理#}
            processData: false,
            success: function (args) {
            }
        })
    })
</script>

（2）后端

def home(request):
    if request.is_ajax() and request.method == "POST":
        print(request.POST)
        print(request.FILES)

    return render(request, 'home.html')
# <QueryDict: {'username': ['456'], 'password': ['123']}>
# <MultiValueDict: {'file': [<InMemoryUploadedFile: 53efb9d8079c6e4f904ed602f5c1e4e.png (image/png)>]}>

（3）结果

  • 想要传输文件需要

    • javascript内置对象
      • formdata
      • 可以通过append方法
      • 添加在键值对
      • 文件内容在$("#d1")[0].files[0]中
    • 两个配置
      • 不使用任何编码contentType: false，后端自动识别formdata
      • 不对数据进行任何处理：processData: false

  • 后端可以通过is_ajax和post一起来判断

    • 是否是ajax的post请求
    • 文件在request.FILES中
    • 其他键值对在request.POST中

【五】sweetleart

【1】官网

（1）sweetleart1

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js">
查看全文

原文地址：https://blog.csdn.net/weixin_48183870/article/details/136998001

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：https://www.msipo.com/article-657124.html 如若内容造成侵权/违法违规/事实不符，请联系MSIPO邮箱：3448751423@qq.com进行投诉反馈，一经查实，立即删除！

上一篇：StarRocks 助力金融营销数字化进化之路下一篇：Ubuntu开启麦克风降噪功能

相关阅读

热门文章