Django框架之Ajax基础

发布于：2024-05-10 ⋅ 阅读:(28) ⋅ 点赞:(0)

一、JSON知识回顾

1、什么是JSON

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，通常用于在网络之间传输数据。它基于JavaScript的语法，但是独立于编程语言，因此几乎所有编程语言都支持解析和生成JSON数据。

JSON数据采用键值对的形式来组织数据，其中键是字符串，值可以是字符串、数字、对象、数组、布尔值或null。JSON数据易于人类阅读和编写，也易于机器解析和生成，这使得它成为了一种流行的数据交换格式。

一个简单的JSON数据示例：

{
    "name": "Alice",
    "age": 25,
    "is_student": true,
    "hobbies": ["reading", "traveling"]
}

其他不合格的JSON对象：

{ name: "张三", 'age': 32 }  // 属性名必须使用双引号
[32, 64, 128, 0xFFF] // 不能使用十六进制值
{ "name": "张三", "age": undefined }  // 不能使用undefined
{ "name": "张三",
  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),
  "getName":  function() {return this.name;}  // 不能使用函数和日期对象
}

JSON在Web开发中被广泛应用，用于在客户端和服务器之间传输数据。在前端开发中，常常使用JSON来处理从服务器获取的数据，然后将其展示在网页上。在后端开发中，常常将数据序列化为JSON格式，然后通过API接口提供给客户端应用程序。

2、JSON序列化与反序列化

JSON序列化是指将数据结构或对象转换为JSON格式的过程。在编程中，JSON序列化通常用于将数据转换为字符串形式，以便在网络上传输或存储到文件中。

JSON反序列化是将JSON格式的字符串转换回原始数据结构的过程。在反序列化过程中，JSON格式的字符串被解析并转换回相应的数据结构，例如字典、列表或对象。

（1）Python

① 序列化（将数据转换为JSON字符串）：
import json

data = {"name": "Alice", "age": 25}
json_string = json.dumps(data)
print(json_string)
② 反序列化（将JSON字符串转换为数据结构）：
import json

json_string = '{"name": "Alice", "age": 25}'
data = json.loads(json_string)
print(data)

（2）JavaScript

① 序列化（将数据转换为JSON字符串）：
var data = { name: "Alice", age: 25 };
var json_string = JSON.stringify(data);
console.log(json_string);
② 反序列化（将JSON字符串转换为数据结构）：
var json_string = '{"name": "Alice", "age": 25}';
var data = JSON.parse(json_string);
console.log(data);

（3）Java

① 使用 Jackson 库进行序列化和反序列化：
import com.fasterxml.jackson.databind.ObjectMapper;

ObjectMapper mapper = new ObjectMapper();

// 序列化
String json = mapper.writeValueAsString(object);

// 反序列化
MyObject obj = mapper.readValue(json, MyObject.class);

（4）C#

① 使用 Newtonsoft.Json 库进行序列化和反序列化：
using Newtonsoft.Json;

// 序列化
string json = JsonConvert.SerializeObject(object);

// 反序列化
MyObject obj = JsonConvert.DeserializeObject<MyObject>(json);

（5）PHP

① 序列化（将数据转换为JSON字符串）：
$data = ["name" => "Alice", "age" => 25];
$json_string = json_encode($data);
echo $json_string;
② 反序列化（将JSON字符串转换为数据结构）：
$json_string = '{"name": "Alice", "age": 25}';
$data = json_decode($json_string, true);
print_r($data);

以上是几种常见编程语言中执行JSON序列化和反序列化的方法示例。每种语言都有其特定的库或内置函数来处理JSON数据，但通常遵循类似的模式和用法。

3、和XML的比较

  • JSON 格式于2001年由 Douglas Crockford 提出
    • 目的就是取代繁琐笨重的 XML 格式。
  • JSON 格式有两个显著的优点：
    • 书写简单，一目了然；
    • 符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。
  • 所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
  • XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。
  • 用XML表示中国部分省市数据如下：
<?xml version="1.0" encoding="utf-8"?>
<country>
    <name>中国</name>
    <province>
        <name>黑龙江</name>
        <cities>
            <city>哈尔滨</city>
            <city>大庆</city>
        </cities>
    </province>
    <province>
        <name>广东</name>
        <cities>
            <city>广州</city>
            <city>深圳</city>
            <city>珠海</city>
        </cities>
    </province>
    <province>
        <name>台湾</name>
        <cities>
            <city>台北</city>
            <city>高雄</city>
        </cities>
    </province>
    <province>
        <name>新疆</name>
        <cities>
            <city>乌鲁木齐</city>
        </cities>
    </province>
</country>
  • 用JSON表示如下：
{
    "name": "中国",
    "province": [{
        "name": "黑龙江",
        "cities": {
            "city": ["哈尔滨", "大庆"]
        }
    }, {
        "name": "广东",
        "cities": {
            "city": ["广州", "深圳", "珠海"]
        }
    }, {
        "name": "台湾",
        "cities": {
            "city": ["台北", "高雄"]
        }
    }, {
        "name": "新疆",
        "cities": {
            "city": ["乌鲁木齐"]
        }
    }]
}

由上面的两端代码可以看出

JSON 简单的语法格式和清晰的层次结构明显要比 XML 容易阅读

并且在数据交换方面，由于 JSON 所使用的字符要比 XML 少得多，可以大大得节约传输数据所占用得带宽。

二、Ajax

1、什么是Ajax

Ajax（Asynchronous JavaScript and XML）是一种用于创建交互式网页应用程序的技术。它允许在不重新加载整个页面的情况下，通过在后台与服务器进行数据交换，更新部分页面内容。Ajax的核心在于通过异步通信与服务器交换数据，使用户能够在不中断当前页面的情况下与服务器进行数据交互。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。(比较装饰器)

它的工作原理是：

  1. 触发事件：用户与网页交互，触发事件（如点击按钮）。
  2. 发送请求：客户端通过 JavaScript 发送 AJAX 请求，可以是 GET 或 POST 方式，也可以发送 JSON 或其它格式的数据。。
  3. 处理请求：HTTP 请求被发送到服务器，并被后端代码处理。后端代码可以使用 Java、PHP、Python 等多种编程语言来实现，返回数据通常是 JSON 或其它格式的字符串。
  4. 处理响应：前端 JavaScript 代码接收到后端返回的数据，根据数据类型进行解析和处理。对于 JSON 格式数据，通常使用 JSON.parse() 方法将字符串转换为对象。
  5. 更新页面：最终，前端 JavaScript 代码使用 DOM 操作更新页面内容，以此实现无需刷新页面即可更新数据的效果。
    例如：

其精髓在于异步提交/局部刷新，例如动态获取用户名，实时跟后端确认并将结果展示给前端

2、Ajax的特点和优势

  1. 异步通信：Ajax允许在后台发送和接收数据，无需刷新整个页面。
  2. 实时性：通过Ajax，网页可以实时更新部分内容，提高用户体验。
  3. 减少带宽占用：由于只更新部分内容，减少了不必要的数据传输，节省了带宽。
  4. 交互性：Ajax使得网页更加交互式，用户可以与页面进行实时交互而无需等待页面刷新。
  5. 提高性能：减少了服务器和客户端之间的数据传输量，提高了网页性能。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）

3、向后端发送请求的方式

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

4、注意

现在我学的是jQuery封装之后的版本，所以我们在前端页面使用Ajax的时候需要确保导入了jQuery。

ps：并不只有jQuery能够实现ajax，其他的框架也可以，但是原理都是一样滴

三、Ajax小练习

1、需求

页面上有三个 input 框

  • 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
  • 在后端计算出结果，再返回给前端动态展示的第三个input框中

要求

  • 整个过程页面不能刷新，也不许在前端计算

2、普通版

（1）前端

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>
<div>number1 : <input type="text" id="numberOne"></div>
<div>number2 : <input type="text" id="numberTwo"></div>
<div>result : <input type="text" id="numberResult"></div>

<button id="btn_result">点我计算结果</button>
<script>
    // 等待页面元素加载完毕。
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
    $(document).ready(
        // 给按钮点击绑定事件
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
        $("#btn_result").click(function () {
            let numberOne = $("#numberOne").val();
            let numberTwo = $("#numberTwo").val();
            let result = $("#numberResult")
            // $.ajax为固定用法，表示启用ajax
            $.ajax(
                {
                    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
                    url: "",
                    //type为标定你这个ajax请求的方法
                    type: "post",
                    //data后面跟的就是你提交给后端的数据
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    //success为回调函数，参数data即后端给你返回的数据
                    success: function (data) {
                        // 注意：data 表示返回的数据。
                        console.log(data)
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
                        result.val(data)
                    }
                }
            )
        })
    )
</script>
</body>
</html>

（2）后端(字符串)

  • 直接返回字符串结果
from django.shortcuts import render, HttpResponse


# Create your views here.
def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        # 返回响应数据
        return HttpResponse(result)
    return render(request, "index.html")

3、升级版(json模块)

  • 后端返回的是字典格式(JSON)的数据
  • json模块序列化
from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def ab_ajax(request):
    if request.method == 'POST':
        # print(request.POST)  # <QueryDict: {'i1': ['3'], 'i2': ['4']}>
        num1 = request.POST.get('i1')  # 3 - 文本类型
        num2 = request.POST.get('i2')  # 4 - 文本类型
        # 强转类型并做运算
        sum = int(num1) + int(num2)
        # 返回数据
        data = {
            "message": "success",
            "sum": sum,
        }
        # 需要将数据序列化进行传输
        return HttpResponse(json.dumps(data))
    return render(request, 'ab_ajax.html')

（1）前端

  • 新增Ajax中的参数 dataType,指定返回的参数自动被序列化后的格式
<script>
    // 等待页面元素加载完毕。
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
    $(document).ready(
        // 给按钮点击绑定事件
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
        $("#btn_result").click(function () {
            let numberOne = $("#numberOne").val();
            let numberTwo = $("#numberTwo").val();
            let result = $("#numberResult")
            $.ajax(
                {
                    url: "",
                    type: "post",
                    data: {numberOne: numberOne, numberTwo: numberTwo},
                    // 前端反序列化数据 方式一
                    // 在Ajax上加参数
                    // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
                    dataType: "json",
                    success: function (data) {
                        // 注意：data 表示返回的数据。
                        console.log(data) // {message: 'success', result: 4}
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
                        result.val(data.result)
                    }
                }
            )
        })
    )
</script>

（2）后端

from django.shortcuts import render, HttpResponse
import json


# Create your views here.
def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        # 返回响应数据 - 使用json模块序列化成json字符串
        return HttpResponse(json.dumps(result))
    return render(request, "index.html")

4、进阶版(JsonResponse)

from django.http import JsonResponse
from django.shortcuts import render, HttpResponse
import json


# Create your views here.

def add_number(request):
    if request.method == "POST":
        data = request.POST
        #  获取前端传递的参数
        # <QueryDict: {'numberOne': ['1'], 'numberTwo': ['2']}>
        number_one = data.get("numberOne")
        number_two = data.get("numberTwo")
        # 计算结果 ： 注意从前端取出来的数字是字符串类型，需要做类型转换才能运算
        result = int(number_one) + int(number_two)
        result = {
            "message": "success",
            "result": result
        }
        # 返回响应数据 - 使用JsonResponse对象序列化成json字符串
        return JsonResponse(result)
    return render(request, "index.html")

四、小结

1、ajax基本语法

<script>
    // 先给按钮绑定点击事件
    $('#btn').click(function () {
        // 向后端发送Ajax请求
        $.ajax({
            // （1）指定发送后端的请求接口
            url: '',// 不写就是朝当前地址发送请求
            
            // （2）请求方式
            type: "post", // 不指定默认就是 get 全小写
          
            // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
            // dataType: "json",
          
            // （3）提交数据
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
            
            // （4）异步提交有一个回调函数 （异步回调机制）
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
            success: function (args) {
                {#alert(args)#}
                // 通过DOM操作动态数据渲染到第三个 input 框中
                console.log(args) // string
                $('#d3').val(args)
            },
        })
    })
</script>

2、注意

  • 针对后端如果是用 HttpResponse 返回的数据，回调函数不会自动帮我们反序列化
  • 针对后端如果是用 JsonResponse 返回的数据，回调函数会自动帮我们反序列化

3、HttpResponse 解决方式

  • 后端先进行序列化，再返回数据给前端
  • 前端利用JSON.parse()
  • 前端加参数进行反序列化
    • 在ajax里面配置一个参数dataType:'json'

所以在我们写Ajax的时候，可以直接将dataType参数加上，以防万一，或者后端就用JsonResponse。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布