【零】JSON知识储备#

【1】JSON数据介绍#

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）
JSON 是轻量级的文本数据交换格式
JSON 独立于语言 *
JSON 具有自我描述性，更易理解

JSON 使用 JavaScript 语法来描述数据对象

但是 JSON 仍然独立于语言和平台。

JSON 解析器和 JSON 库支持许多不同的编程语言。

啥都别多说了，上图吧！

合格的json对象(json只认双引的字符串格式)：

1
["one", "two", "three"]
2
{ "one": 1, "two": 2, "three": 3 }
3
{"names": ["张三", "李四"] }
4
[ { "name": "张三"}, {"name": "李四"} ]

不合格的json对象：

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

【2】JS序列化JSON数据方法#

JavaScript中关于JSON对象和字符串转换的两个方法：

（1）JSON.parse()#

用于将一个 JSON 字符串转换为 JavaScript 对象(json只认双引的字符串格式)

1
JSON.parse('{"name":"Howker"}');
2
JSON.parse('{name:"Stack"}') ;   // 错误
3
JSON.parse('[18,undefined]') ;   // 错误

（2）JSON.stringify()#

用于将 JavaScript 值转换为 JSON 字符串。

1
JSON.stringify({"name":"Tonny"})

【3】和XML的比较#

JSON 格式于2001年由 Douglas Crockford 提出
- 目的就是取代繁琐笨重的 XML 格式。
JSON 格式有两个显著的优点：
- 书写简单，一目了然；
- 符合 JavaScript 原生语法，可以由解释引擎直接处理，不用另外添加解析代码。
所以，JSON迅速被接受，已经成为各大网站交换数据的标准格式，并被写入ECMAScript 5，成为标准的一部分。
XML和JSON都使用结构化方法来标记数据，下面来做一个简单的比较。
用XML表示中国部分省市数据如下：

1
<?xml version="1.0" encoding="utf-8"?>
2
<country>
3
    <name>中国</name>
4
    <province>
5
        <name>黑龙江</name>
6
        <cities>
7
            <city>哈尔滨</city>
8
            <city>大庆</city>
9
        </cities>
10
    </province>
11
    <province>
12
        <name>广东</name>
13
        <cities>
14
            <city>广州</city>
15
            <city>深圳</city>
16
            <city>珠海</city>
17
        </cities>
18
    </province>
19
    <province>
20
        <name>台湾</name>
21
        <cities>
22
            <city>台北</city>
23
            <city>高雄</city>
24
        </cities>
25
    </province>
26
    <province>
27
        <name>新疆</name>
28
        <cities>
29
            <city>乌鲁木齐</city>
30
        </cities>
31
    </province>
32
</country>

用JSON表示如下：

1
{
2
    "name": "中国",
3
    "province": [{
4
        "name": "黑龙江",
5
        "cities": {
6
            "city": ["哈尔滨", "大庆"]
7
        }
8
    }, {
9
        "name": "广东",
10
        "cities": {
11
            "city": ["广州", "深圳", "珠海"]
12
        }
13
    }, {
14
        "name": "台湾",
15
        "cities": {
16
            "city": ["台北", "高雄"]
17
        }
18
    }, {
19
        "name": "新疆",
20
        "cities": {
21
            "city": ["乌鲁木齐"]
22
        }
23
    }]
24
}

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

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

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

【一】Ajax简介#

【0】介绍#

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步的Javascript和XML”。
- 即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。（这一特点给用户的感受是在不知不觉中完成请求和响应过程）
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
- 同步交互：
  - 客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
- 异步交互：
  - 客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

【1】精髓#

精髓：异步提交/局部刷新

动态获取用户名，实时跟后端确认并将结果展示给前端

【2】发送请求的方式#

向后端发送请求的方式
- 浏览器地址直接url回车
  - GET请求
- a标签的 href 属性
  - GET请求
- form表单
  - GET请求/POST请求
- Ajax
  - GET请求/POST请求

【3】简介#

Ajax不是新的编程语言，而是一种使用现有标准的新方法(类比装饰器)

Ajax最大的优点就是不重新加载页面的情况下，可以与服务器交换数据并更新部分网页内容

这种特点给用户的感觉就是在不知不觉中完成了请求和响应过程

Ajax（Asynchronous JavaScript and XML）是一种用于创建动态网页的编程技术。
- 它通过在网页上进行异步数据传输，实现了在不重新加载整个页面的情况下更新部分页面内容的能力。
Ajax的核心技术包括使用JavaScript和XMLHttpRequest对象与服务器进行数据交互，以及利用DOM（Document Object Model）来动态地更新页面。
通过使用Ajax，网页可以在后台与服务器进行数据交换，并在不刷新整个页面的情况下，根据服务器返回的数据实时更新页面的某些部分。
这种技术带来了很多好处，比如提高了用户体验、减少了网络流量和服务器负载，并使得开发人员能够创建更加交互和动态的网页应用程序。
虽然Ajax最初是指Asynchronous JavaScript and XML，但如今已经不仅限于使用XML作为数据传输的格式，而是可以使用各种格式，如JSON（JavaScript Object Notation）。
总结起来，Ajax是一种强大的前端开发技术，通过异步数据传输和动态页面更新，提供了更好的用户体验和交互性，广泛应用于现代Web应用程序的开发中。

【二】Ajax案例#

页面上有三个 input 框
- 在前面两个框输入数字，点击按钮，朝后端发送Ajax请求
- 在后端计算出结果，再返回给前端动态展示的第三个input框中
要求
- 整个过程页面不能刷新，也不许在前端计算

【1】普通版#

（1）前端#

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

10
</head>
11
<body>
12
<div>number1 : <input type="text" id="numberOne"></div>
13
<div>number2 : <input type="text" id="numberTwo"></div>
14
<div>result : <input type="text" id="numberResult"></div>
15

16
<button id="btn_result">点我计算结果</button>
17
<script>
18
    // 等待页面元素加载完毕。
19
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
20
    $(document).ready(
21
        // 给按钮点击绑定事件
22
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
23
        $("#btn_result").click(function () {
24
            let numberOne = $("#numberOne").val();
25
            let numberTwo = $("#numberTwo").val();
26
            let result = $("#numberResult")
27
            // $.ajax为固定用法，表示启用ajax
28
            $.ajax(
29
                {
30
                    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
31
                    url: "",
32
                    //type为标定你这个ajax请求的方法
33
                    type: "post",
34
                    //data后面跟的就是你提交给后端的数据
35
                    data: {numberOne: numberOne, numberTwo: numberTwo},
36
                    //success为回调函数，参数data即后端给你返回的数据
37
                    success: function (data) {
38
                        // 注意：data 表示返回的数据。
39
                        console.log(data)
40
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
41
                        result.val(data)
42
                    }
43
                }
44
            )
45
        })
46
    )
47
</script>
48
</body>
49
</html>

（2）后端(字符串)#

直接返回字符串结果

1
from django.shortcuts import render, HttpResponse
2

3

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

（3）Ajax 语法#

1
<script>
2
    // 等待页面元素加载完毕。
3
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
4
    $(document).ready(
5
        // 给按钮点击绑定事件
6
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
7
        $("#btn_result").click(function () {
8
            let numberOne = $("#numberOne").val();
9
            let numberTwo = $("#numberTwo").val();
10
            let result = $("#numberResult")
11
            // $.ajax为固定用法，表示启用ajax
12
            $.ajax(
13
                {
14
                    //url后面跟的是你这个ajax提交数据的路径，向谁提交，不写就是向当前路径提交
15
                    url: "",
16
                    //type为标定你这个ajax请求的方法
17
                    type: "post",
18
                    //data后面跟的就是你提交给后端的数据
19
                    data: {numberOne: numberOne, numberTwo: numberTwo},
20
                    //success为回调函数，参数data即后端给你返回的数据
21
                    success: function (data) {
22
                        // 注意：data 表示返回的数据。
23
                        console.log(data)
24
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
25
                        result.val(data)
26
                    }
27
                }
28
            )
29
        })
30
    )
31
</script>

【2】升级版(json模块)#

后端返回的是字典格式(JSON)的数据
json模块序列化

1
from django.http import JsonResponse
2
from django.shortcuts import render, HttpResponse
3
import json
4

5

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

（1）前端#

新增Ajax中的参数 dataType,指定返回的参数自动被序列化后的格式

1
<script>
2
    // 等待页面元素加载完毕。
3
    // 注意：$(document).ready() 与 window.onload 类似，都是页面加载完毕时触发的事件。
4
    $(document).ready(
5
        // 给按钮点击绑定事件
6
        // 注意：$("#btn_result") 表示获取 id 为 btn_result 的元素。
7
        $("#btn_result").click(function () {
8
            let numberOne = $("#numberOne").val();
9
            let numberTwo = $("#numberTwo").val();
10
            let result = $("#numberResult")
11
            $.ajax(
12
                {
13
                    url: "",
14
                    type: "post",
15
                    data: {numberOne: numberOne, numberTwo: numberTwo},
16
                    // 前端反序列化数据 方式一
17
                    // 在Ajax上加参数
18
                    // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
19
                    dataType: "json",
20
                    success: function (data) {
21
                        // 注意：data 表示返回的数据。
22
                        console.log(data) // {message: 'success', result: 4}
23
                        //  注意：result.val(data) 表示将返回的数据赋值给 id 为 result 的元素的 value 属性。
24
                        result.val(data.result)
25
                    }
26
                }
27
            )
28
        })
29
    )
30
</script>

（2）后端#

1
from django.shortcuts import render, HttpResponse
2
import json
3

4

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

【3】进阶版(JsonResponse)#

1
from django.http import JsonResponse
2
from django.shortcuts import render, HttpResponse
3
import json
4

5

6
# Create your views here.
7

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

【三】Ajax小结#

（1）基本语法#

1
<script>
2
    // 先给按钮绑定点击事件
3
    $('#btn').click(function () {
4
        // 向后端发送Ajax请求
5
        $.ajax({
6
            // （1）指定发送后端的请求接口
7
            url: '',// 不写就是朝当前地址发送请求
8

9
            // （2）请求方式
10
            type: "post", // 不指定默认就是 get 全小写
11

12
            // dataType 参数应该是一个字符串，表示期望从服务器返回的数据类型（如 "json", "xml", "script", "html" 等）
13
            // dataType: "json",
14

15
            // （3）提交数据
16
            data: {'i1': $('#d1').val(), 'i2': $('#d2').val()},
17

18
            // （4）异步提交有一个回调函数 （异步回调机制）
19
            // 当后端返回结果的时候会自动触发，args 会自动接受后端传过来的结果
20
            success: function (args) {
21
                {#alert(args)#}
22
                // 通过DOM操作动态数据渲染到第三个 input 框中
23
                console.log(args) // string
24
                $('#d3').val(args)
25
            },
26
        })
27
    })
28
</script>

（2）注意#

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

（3）HttpResponse 解决方式#

后端先进行序列化，再返回数据给前端
前端加参数进行反序列化

【四】练习（用户名是否已被注册）#

【1】功能介绍#

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。
服务器返回这个用户名是否已经被注册过。

【2】案例分析#

页面中给出注册表单；
在username input标签中绑定onblur事件处理函数。
当input标签失去焦点后获取 username表单字段的值，向服务端发送AJAX请求；
django的视图函数中处理该请求，获取username值，判断该用户在数据库中是否被注册，如果被注册了就返回“该用户已被注册”，否则响应“该用户名可以注册”。

音乐

音乐

【零】JSON知识储备#

【1】JSON数据介绍#

【2】JS序列化JSON数据方法#

（1）JSON.parse()#

（2）JSON.stringify()#

【3】和XML的比较#

【一】Ajax简介#

【0】介绍#

【1】精髓#

【2】发送请求的方式#

【3】简介#

【二】Ajax案例#

【1】普通版#

（1）前端#

（2）后端(字符串)#

（3）Ajax 语法#

【2】升级版(json模块)#

（1）前端#

（2）后端#

【3】进阶版(JsonResponse)#

【三】Ajax小结#

（1）基本语法#

（2）注意#

（3）HttpResponse 解决方式#

【四】练习（用户名是否已被注册）#

【1】功能介绍#

【2】案例分析#

支持与分享

音乐

Ajax基础操作

【零】JSON知识储备#

【1】JSON数据介绍#

【2】JS序列化JSON数据方法#

（1）JSON.parse()#

（2）JSON.stringify()#

【3】和XML的比较#

【一】Ajax简介#

【0】介绍#

【1】精髓#

【2】发送请求的方式#

【3】简介#

【二】Ajax案例#

【1】普通版#

（1）前端#

（2）后端(字符串)#

（3）Ajax 语法#

【2】升级版(json模块)#

（1）前端#

（2）后端#

【3】进阶版(JsonResponse)#

【三】Ajax小结#

（1）基本语法#

（2）注意#

（3）HttpResponse 解决方式#

【四】练习（用户名是否已被注册）#

【1】功能介绍#

【2】案例分析#

支持与分享