Json、Ajax

embedded/2024/11/9 16:46:00/

一、JSON

定义:是一种轻量级的数据交换格式
JSON是JavaScript Object Notation缩写

作用:
使用ajax进行前后台数据交换
移动端与服务端的数据交换

JSON数据格式

1. 对象格式:{"key1": obj1, "key2": obj2, "key3": obj3...}
2. 数组/集合格式[obj1, obj2, obj3...]
注:JSON的key是字符串,JSON的value是Object

规则:
1. 映射用冒号“:”表示。//名称:值
2. 并列的数据之间用逗号“,”分隔。//名称1:值1,名称2:值2
3. 映射的集合(对象)用大括号“{}”表示。//{名称1:值1,名称2:值2}
4. 并列数据的集合(数组)用方括号“[]”表示。
[
    {名称1:值1,名称2:值2}
    {名称1:值1,名称2:值2}
]
5. 元素可能具有的类型:string,number,object,array,true,false,null

JSON和XML比较

相比于XML,JSON的优势如下:
1. 没有结束标签,长度更短,读写更快
2. 能够直接被JavaScript解析器解析
3. 可以使用数组

二、Ajax

ajax的最大特点是异步请求、不刷新整个页面,只刷新局部,也叫局部刷新。

同步与异步

同步现象:客户端发送请求到服务器端,当服务器返回响应前,客户端处于等待卡死状态
异步现象:客户端发送请求到服务器端,无论服务器是否返回响应,客户端都可以随意做其他事,不会被卡死

Ajax运行原理

页面发起请求,会将请求发送给浏览器内核中的Ajax引擎,Ajax引擎会提交请求到服务器端,在这段时间里,客户端可以任意进行任何操作,直到服务器端将数据返回给Ajax引擎后,会触发设置好的事件,从而执行自定义的js逻辑代码完成某种页面功能。

JQuery的Ajax技术

$.get(url,[data],[callback],[type])    //后面三个是可选的,可以没有
$.post(url,[data],[callback],[type])
其中:
url:代表请求的服务器端地址
data:代表请求服务器端的数据(可以是key=value形式,也可以是json格式)
callback:表示服务器端成功响应所有触发的函数
type:表示服务器返回的数据类型(jquery会根据指定的类型自动类型转换)
常用的返回类型:text、json、html等

$.ajax({option1:value1,option2:value2...});
语法:$.ajax({键值对});

常用的option如下:
async:是否异步,默认是true代表异步。(注:get/post方式只能异步,不能配置)
data:发送到服务器的参数,建议使用json格式
dataType:服务器返回的数据类型,常用text和json
success:成功响应执行的函数,对应的类型是function类型
type:请求方式,POST/GET
url:请求服务器端地址

三、JSON数据和Java对象相互转换

常见的JSON解析器:Jsonlib,Gson,fastjson,jackson(SpringMVC内置的解析器)

1. 导入jackson的相关jar包
2. 创建jackson核心对象ObjectMapper
3. 调用ObjectMapper的相关方法进行转换
3.1 JSON转为Java对象
readValue(json字符串数据,Class)
3.2 Java对象转换JSON
writeValueAsString(obj):将对象转为json字符串

复杂java对象转换
1. List:数组[]
2. Map:对象格式一致 {}

四、前台向后台发送请求

1. 超链接<a herf=""></a>
2. form表单
3. location.herf=""
4.ajax


http://www.ppmy.cn/embedded/105701.html

相关文章

【百日算法计划】:每日一题,见证成长(007)

题目 移除链表元素 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回 新的头节点 示例&#xff1a; 输入&#xff1a;head [1,2,6,3,4,5,6], val 6 输出&#xff1a;[1,2,3,4,5] 思路1 不引入虚拟头节…

--- java数据结构 队列 ---

队列 队列是在队列的末位进行数据的插入&#xff0c;在队列的头进行数据的删除&#xff0c;很类似与我们日常中的排队 可以用链表实现&#xff0c;那么链表的头指针就是队列的头&#xff0c;链表的尾指针也就是队列的尾 也可以用数组实现&#xff0c;但如果是是在数组要满的时…

网络通信 Posix API的原理与使用

文章目录 1、Posix API简介2、Posix 网络 API简介3、API 具体介绍&#xff08;1&#xff09;套接字&#xff08;socket&#xff09;socket()bind()listen()accept()connect() &#xff08;2&#xff09;数据传输send()recv()sendto()recvfrom() &#xff08;3&#xff09;套接字…

Mac 电脑如何制作 GIF 动图

1&#xff09;键盘按 command 空格键 输入 截屏 2&#xff09;按自身需要&#xff0c;进行整屏或框选区域的录制 3&#xff09;录制完毕后&#xff0c;将录制好的视频保存在桌面&#xff0c;右键显示简介可以查看视频的尺寸 4&#xff09;打开 Keynote 演讲&#xff0c;之后点…

GPT-SoVITS:零样本语音合成AI

GPT-SoVITS 是一种语音合成模型&#xff0c;于 2024 年 2 月 18 日发布。它支持使用参考音频进行零样本语音合成&#xff0c;并且可以进行微调以提高性能。 GPT-SoVITS 的功能特性包括&#xff1a; Zero-Shot TTS&#xff1a;零样本语音合成&#xff0c;输入 5 秒音频样本即可…

1688精选货源API接口升级||1688选品

1688精选货源接口升级 阿里巴巴中国站获得1688商品详情 API 返回值说明 item_get-获得1688商品详情 1688.item_get 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&#xff09;secretString是调用密钥api_nameString是API接口名称&…

Verilog刷题笔记62

题目: Exams/review2015 fancytimer This is the fifth component in a series of five exercises that builds a complex counter out of several smaller circuits. You may wish to do the four previous exercises first (counter, sequence recognizer FSM, FSM delay, an…

基于AppBuilder自定义组件开发大模型应用

AppBuilder简介&#xff1a; 如果大家不了解AppBuilder的话&#xff0c;可以先到这里了解一下&#xff1a; https://cloud.baidu.com/doc/AppBuilder/s/6lq7s8lli 一句话简介&#xff1a; 千帆AppBuilder&#xff08;以下简称AppBuilder&#xff09;是基于大模型搭建AI原生应…