一、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 jsondata = {"name": "Alice", "age": 25}
json_string = json.dumps(data)
print(json_string)
② 反序列化（将JSON字符串转换为数据结构）：
import jsonjson_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 不是新的编程语言，而是一种使用现有标准的新方法。(比较装饰器)
它的工作原理是：
- 触发事件：用户与网页交互，触发事件（如点击按钮）。
- 发送请求：客户端通过 JavaScript 发送 AJAX 请求，可以是 GET 或 POST 方式，也可以发送 JSON 或其它格式的数据。。
- 处理请求：HTTP 请求被发送到服务器，并被后端代码处理。后端代码可以使用 Java、PHP、Python 等多种编程语言来实现，返回数据通常是 JSON 或其它格式的字符串。
- 处理响应：前端 JavaScript 代码接收到后端返回的数据，根据数据类型进行解析和处理。对于 JSON 格式数据，通常使用 JSON.parse() 方法将字符串转换为对象。
- 更新页面：最终，前端 JavaScript 代码使用 DOM 操作更新页面内容，以此实现无需刷新页面即可更新数据的效果。
例如：
其精髓在于异步提交/局部刷新，例如动态获取用户名，实时跟后端确认并将结果展示给前端
2、Ajax的特点和优势
- 异步通信：Ajax允许在后台发送和接收数据，无需刷新整个页面。
- 实时性：通过Ajax，网页可以实时更新部分内容，提高用户体验。
- 减少带宽占用：由于只更新部分内容，减少了不必要的数据传输，节省了带宽。
- 交互性：Ajax使得网页更加交互式，用户可以与页面进行实时交互而无需等待页面刷新。
- 提高性能：减少了服务器和客户端之间的数据传输量，提高了网页性能。
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里面配置一个参数
所以在我们写Ajax的时候，可以直接将dataType参数加上，以防万一，或者后端就用JsonResponse。
