Ajax和JSON的基本用法
局部请求页面不会变化，返回的响应我们要动态获取，获取后选择数据更新区域。
<body>
<input id="btnLoad" type="button" value="加载">
<div id="divContent"></div>
<script>//获取点击按钮document.getElementById("btnLoad").onclick=function (){var xmlhttp;//根据不同的浏览器，创建xmlhttp的对象if(window.XMLHttpRequest){xmlhttp = new XMLHttpRequest();}else{xmlhttp=new ActiveXObject("eage.xmlhttp")}console.log("xmlhttpRequest", xmlhttp);//创建一个请求xmlhttp.open("GET", "/content");//发送一个请求xmlhttp.send();//监听ajax的执行过程xmlhttp.onreadystatechange = function () {if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {//获取响应的文本var t=xmlhttp.responseText;console.log(t);console.log(document.getElementById("divContent").innerHTML);document.getElementById("divContent").innerHTML=document.getElementById("divContent").innerHTML+"<br/>"+t;}};}
</script>全局请求会更新整个页面例子如下。
<body><form action="/request" method="post"><input name="username"/><input name="password" type="password"/><input type="submit"></form>
</body>@WebServlet("/request")
public class RequestServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("get");直接更新了整个页面}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse respose) throws ServletException, IOException {respose.getWriter().println("post");}
}respose.getWriter().println("get");会将原来的页面销毁掉，重新生成另一张页面，但是在原来的页面中有不需要刷新的页面，我们想要的效果只是小部分区域进行显示刷新出来的内容，这时就要用到Ajax。
[{"empno": "7369",数字可以加双引号也可以不加"ename": "李宁","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"},{"empno": "73691","ename": "李上","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"}
]
JS如何展示json数据利用json数据如下
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript">var employeeList=[{"empno": "7369","ename": "李宁","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"},{"empno": "73691","ename": "李上","job": "软件工程师","hiredate": "2015-02-2","salary": 1300,"dname": "研发部"}]for(var i=0;i<employeeList.length;i++){var employee=employeeList[i];console.log(employee);document.write("<h1>");document.write(employee.ename);document.write(employee.empno);document.write(employee.job);document.write("</h1>");}</script>
</head>
注意：ajax请求返回的不再与展现相关，而是纯纯的数据，浏览器接受后要考虑如何展示。
两个数据转换核心问题：
数据对象序列化为JSON字符串----JacKson解决序列化问题
JSON字符串如何转换成数据对象--
@WebServlet("/news")
public class NewServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {List<News> list = new ArrayList<>();list.add(new News("TIOBE:2018编程语言排行趋势","2018","TIBOT","...."));list.add(new News("TIOBE:2017编程语言排行趋势","2017","TIBOT","...."));list.add(new News("TIOBE:2016编程语言排行趋势","2016","TIBOT","...."));//序列化过程，可能报错ObjectMapper objectMapper=new ObjectMapper();String json = objectMapper.writeValueAsString(list);response.setContentType("text/json;charset=utf-8");response.getWriter().println(json);}
}Tomcat配置问题：Warning:The selected directory is not a TomEE home
解决：tomcat选择的时候选错了
错误: 代理抛出异常错误: java.rmi.server.ExportException: Port already in use: 1099; nested exception is:
java.net.BindException: Address already in use: JVM_Bind
解决：端口占用了
解决：中途导入的jar包和依赖没有被out出来，最后允许的目录在Out,如果jar添加了，out没有，那么此时需要手动添加
反序列化过程：
<body><div id="container"></div><script>//开始纯手工处理ajaxvar xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("XMLHTTP");}xmlhttp.open("GET","/news");xmlhttp.send();xmlhttp.onreadystatechange = function () {if(xmlhttp.readyState==4&&xmlhttp.status==200){var str=xmlhttp.responseText;//JSON.parse()方法，把字符串编程json的对象console.log(JSON.parse(str));//渲染页面（二次加工数据）for (var i = 0; i < json.length; i++) {var news=json[i];var container = document.getElementById("container");container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";}}};</script>
</body>
原生的ajax要创建对象，接受并且判断响应，很麻烦，有封装好的。
get方式发送请求：
<body>
<div id="container"></div><script>// 第一个参数是对应的url是什么,，第二个向服务器传递的参数//axios.get('/news?t=pypl').then。。的传参方式也可axios.get('/news',{params:{"t":"pypl"}}).then(function (response) {console.log(response);var json=response.data;for (var i = 0; i < json.length; i++) {var news=json[i];var container = document.getElementById("container");container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";}}).catch(function (error) {console.log(error);});</script>
</body>post方式发送请求：
<script>//写法一//"t=pypl&1=abc连续的参数用&隔开//{headers:{"content-type":"application/x-www-form-urlencoded"}}手动定义请求头固定写法// axios.post("/news1","t=pypl&1=abc",// {headers:{"content-type":"application/x-www-form-urlencoded"}})//写法二const params = new URLSearchParams();params.append("t","pypl");params.append("l","abc");axios.post("/news",params).then(function (response) {console.log(response);var json = response.data;for (var i = 0; i < json.length; i++) {var news = json[i];var container = document.getElementById("container");container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";}}).catch(function (error) {console.log(error);});</script>
异步执行代码实例：
<body><div id="container"></div><script>var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("XMLHTTP");}xmlhttp.open("GET","/news?t=pypl");xmlhttp.send();console.log("请求已经发送");xmlhttp.onreadystatechange = function () {if(xmlhttp.readyState==4&&xmlhttp.status==200){var str=xmlhttp.responseText;//JSON.parse()方法，把字符串编程json的对象console.log(JSON.parse(str));//渲染页面（二次加工数据）for (var i = 0; i < json.length; i++) {var news=json[i];var container = document.getElementById("container");container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";}}};</script>
结果：send没有收到响应，就执行console.log("请求已经发送");这句话，然后随着状态变化事件得到执行。
<body><div id="container"></div><script>var xmlhttp;if(window.XMLHttpRequest){xmlhttp=new XMLHttpRequest();}else {xmlhttp=new ActiveXObject("XMLHTTP");}xmlhttp.open("GET","/news?t=pypl",false);xmlhttp.send();console.log("请求已经发送");if(xmlhttp.readyState==4&&xmlhttp.status==200){var str=xmlhttp.responseText;//JSON.parse()方法，把字符串编程json的对象console.log(JSON.parse(str));//渲染页面（二次加工数据）for (var i = 0; i < json.length; i++) {var news=json[i];var container = document.getElementById("container");container.innerHTML = container.innerHTML + "<h2>" + news.title + "</h2>";}}xmlhttp.onreadystatechange = function () {};</script>
</body>结果：当send执行没有结束，没有收到响应，不会执行console.log("请求已经发送");，导致事件状态变化监听失败，所以if必须提前，那么就可以执行相应的语句；
效果
准备数据
@WebServlet("/channel")
public class ChannerServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//levels为一级目录大类，parent为一级大类的code，这两个都是用户选择的参数//用户根据需要选择一级大类，然后根据用户的选择获取大类的code，再用parent和用户选择的比较，得到二级大类String level=request.getParameter("level");String parent = request.getParameter("parent");List<Channel> chlist = new ArrayList<>();if (level==null){level = "0";} else if (parent==null) {parent = "0";}if (level.equals("1")) {chlist.add(new Channel("ai","人工智能"));chlist.add(new Channel("web","前端开发"));}else if(level.equals("2")){if (parent.equals("ai")) {chlist.add(new Channel("dl","深度学习"));chlist.add(new Channel("cv","计算机视觉"));chlist.add(new Channel("nlp","自然语言处理"));} else if (parent.equals("web")) {chlist.add(new Channel("html","前端html"));chlist.add(new Channel("css","前端css"));chlist.add(new Channel("js","前端js"));}}ObjectMapper objectMapper = new ObjectMapper();String json = objectMapper.writeValueAsString(chlist);response.setContentType("application/json;charset=utf-8");response.getWriter().println(json);}
}实体类：
public class Channel {private String code;private String name;public Channel(String code, String name) {this.code = code;this.name = name;}public String getCode() {return code;}public void setCode(String code) {this.code = code;}public String getName() {return name;}public void setName(String name) {this.name = name;}
}
前端界面发送请求：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<select id="lv1" style="width: 200px;height: 30px"><option value="-1" selected="selected">请选择</option>
</select><!--//不写option标签，直接往里边添加会直接显示-->
<select id="lv2" style="width: 200px;height: 30px">
</select>
<script>//获取lv1标签，为了往lv1的option中放数据var lv1 = document.getElementById("lv1");axios.get("/channel",{params:{"level":1}}).then(function (response) {var json = response.data;console.log(json);for (var i=0;i<json.length;i++){var channel = json[i];//新创建的option对象，第一个参数是text,第二个是value// new(text?: string, value?: string,...)//如果有选择，那么select的value就是option的valuelv1.options.add(new Option(channel.name, channel.code));}});var lv2 = document.getElementById("lv2");lv1.onchange=function () {axios.get("/channel",{params:{"level":2,"parent":lv1.value}}).then(function (response) {var json = response.data;//直接把之前的数据清除的办法，length=0就行了lv2.length=0;console.log(json);for (var i=0;i<json.length;i++){var channel = json[i];lv2.options.add(new Option(channel.name, channel.code));}});}
</script>
</body>
</html>相关文章：
Ajax和JSON的基本用法
局部请求页面不会变化，返回的响应我们要动态获取，获取后选择数据更新区域。<body> <input id"btnLoad" type"button" value"加载"> <div id"divContent"></div> <script>//获取点…...
【项目实战】基于netty-websocket-spring-boot-starter实现WebSocket服务器长链接处理
一、背景 项目中需要建立客户端与服务端之间的长链接，首先就考虑用WebSocket，再来SpringBoot原来整合WebSocket方式并不高效，因此找到了netty-websocket-spring-boot-starter 这款脚手架，它能让我们在SpringBoot中使用Netty来开发…...
BC双驱、ChatGPT大火，AI独角兽撬开盈利大门？
配图来自Canva可画 放眼AI行业，各大AI玩家长期亏损、“钱”景堪忧。 回看过去一年，部分AI独角兽的亏损问题愈发尖锐——云从科技2022年净亏损同比扩大至8.5亿元；寒武纪2022年净亏损11.6亿元，较上年同期扩大41.4%；地平…...
1/4车、1/2车、整车悬架H2/H∞控制仿真合集
目录 前言 1. 1/4悬架系统 1.1数学模型 1.2 H2/H∞求解反馈阵阵 1.3仿真分析 2. 1/2悬架系统 2.1数学模型 2.2 H2/H∞求解反馈阵阵 2.3仿真分析 3. 整车悬架系统 3.1数学模型 整车7自由度主动悬架数学模型 3.2 H2/H∞求解反馈阵阵 3.3仿真分析 4.总结 参考文献 …...
Git使用教程、命令
Git使用教程、命令 基本配置 git的配置文件位置： win: c:\users\<userName>\.gitconfig linux: /home/<userName>/.gitconfig # 个人/etc/gitconfig # 系统全局# 修改git init时的默认分支为master&#x…...
《c++ primer笔记》第九章 顺序容器
前言 知识点很多，这里只记录遗忘的。从这章开始会对前面章节的内容进行一个扩充，如果以前的忘了读起来会有点吃力。总的来说，本章节难度不大。 文章目录一、概述二、容器库概览2.1容器定义和初始化2.2赋值三、顺序容器操作3.1添加元素3.2删除…...
QML动画（弹动和翻转效果）
Flickable（弹动） QML中提供了一个Flickable元素，可以将其子项设置在一个可以拖拽和弹动的界面上，使得子项目的视图可以滚动。在传统的用户界面中，可以使用标准控件（如滚动条和箭头按钮）滚动视图…...
GPS启动方式、定位速度、定位精度介绍
前面文章介绍了GPS定位基础知识 GPS定位知识介绍 (qq.com) 本文主要介绍GPS启动方式。 定位过程中最重要的辅助信息是时间、星历、位置。 根据辅助信息不同，...
深度学习零基础学习之路——第五章 个人数据集的制作
Python深度学习入门 第一章 Python深度学习入门之环境软件配置 第二章 Python深度学习入门之数据处理Dataset的使用 第三章 数据可视化TensorBoard和TochVision的使用 第四章 UNet-Family中Unet、Unet和Unet3的简介 第五章 个人数据集的制作 深度学习数据集的制作Python深度学…...
女神节 | PHP和Java算什么，女工程师才是最美最好的语言！
世界上第一个程序员是女性 第一个发现Bug的也是女性 在智领云有一群追求快乐和独立的女性工程师 她们多有魅力？ 工位上她们专注于数据与代码 平日里郊游、瑜伽、插花、科学养娃一件不落 不仅用0和1编织数字世界 也在用心装点自己的生活 今天是国际劳动妇女节…...
【Python】装饰器
一、装饰器的作用 装饰器能够为已经存在的对象添加额外的功能。 二、什么是装饰器 装饰器本质是一个python函数，它可以让其他函数在不需要做任何代码变动的前提下增加额外功能，装饰器的返回值也是一个函数对象。 三、装饰器的应用场景 插入日志、性能…...
Spring事务及传播机制
概念 在MySQL中介绍过，当同一时间出现一起读写数据的情况，可能会导致最终的结果出错，因此可以使用事务来提高隔离级别 而Spring中也可以实现事务 手动添加事务 使用SpringBoot中的DataSourceTransactionManager对象可以获取事务࿰…...
43-Golang中的goroutine！！！
Golang中的goroutine进程和线程说明并发和并行并发并行Go协程和Go主线程案例小结goroutine的调度机制MPG模式基本介绍MPG模式运行的状态1MPG模式运行的状态2设置GOlang运行的CPU数不同 goroutine之间如何通讯使用全局变量加锁同步改进程序进程和线程说明 1.进程就是程序在操作…...
[深入理解SSD系列 闪存实战2.1.5] NAND FLASH基本读操作及原理_NAND FLASH Read Operation源码实现
前言 上面是我使用的NAND FLASH的硬件原理图，面对这些引脚，很难明白他们是什么含义, 下面先来个热身： 问1. 原理图上NAND FLASH只有数据线，怎么传输地址？ 答1．在DATA0～DATA7上既传输数据，又传输地址 当ALE为高电平时传输的是地址， 问2. 从NAND FLASH芯片手册可知，要…...
pandas库中的read_csv函数读取数据时候的路径问题详解(ValueError: embedded null character)
read_csv()函数不仅是R语言中的一个读取csv文件的函数，也是pandas库中的一个函数。pandas是一个用于数据分析和处理的python库。它的read_csv函数可以读取csv文件里的数据，并将其转化为pandas里面的DataFrame对象。它由很多参数可以设置，例如…...
【量化交易笔记】4.移动平均值的实现
上一讲已经讲A股的数据下载到本地或保存数据库，我们可以随时使用。 移动平均MA(Moving Average) ，是用统计分析的方法，将一定时期内的证券价格（指数）加以平均，并把不同时间的平均值连接起来，形成…...
2023年3月份的野兔在线工具系统版本更新
这个是野兔在线工具系统中文版更新，这次更新的功能，和修改的问题还是比较多的，也修复系统部分功能，应该也是目前市面上在线工具比较多的一个系统了。系统名称：野兔在线工具系统系统语言：中文版系统源码&…...
科技成果赋智中小企业深度行 边界无限靖云甲ADR入选十大优秀案例
近日，国家工业信息安全发展研究中心、青岛市工业和信息化局、青岛市民营经济发展局、青岛市即墨区人民政府、青岛蓝谷管理局联合举办的科技成果赋智中小企业“深度行”活动（青岛站）成功举办，同步举行了赋智“深度行”活动…...
我们的理性何处安放
每天工作压力和各种人相处都让我们非常忙碌，我们上大学，努力工作，都是想获得更好的人生场景，素养，提升自身的认知，这样就是对我们大多数人生最负责任。如何让自己理性与人为善，并能被人温柔以待…...
RecyclerView的详细使用
首先就是了解ListView和RecyclerView的区别1.ListView相比RecycleView的优点a.ListView实现添加HeaderView和FooderView有直接的方法b.分割线可以直接设置c.ListView实现onItemClickListence和onItemLongClickListence有直接的方法2.RecyclerView相比ListView的优点a.封装了Vie…...
大话软工笔记—需求分析概述
需求分析，就是要对需求调研收集到的资料信息逐个地进行拆分、研究，从大量的不确定“需求”中确定出哪些需求最终要转换为确定的“功能需求”。 需求分析的作用非常重要，后续设计的依据主要来自于需求分析的成果，包括: 项目的目的…...
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility
Cilium动手实验室: 精通之旅---20.Isovalent Enterprise for Cilium: Zero Trust Visibility 1. 实验室环境1.1 实验室环境1.2 小测试 2. The Endor System2.1 部署应用2.2 检查现有策略 3. Cilium 策略实体3.1 创建 allow-all 网络策略3.2 在 Hubble CLI 中验证网络策略源3.3 …...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式（Singleton Pattern&#…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上，所以报错，到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本，cu、torch、cp 的版本一定要对…...
html-＜abbr＞ 缩写或首字母缩略词
定义与作用 <abbr> 标签用于表示缩写或首字母缩略词，它可以帮助用户更好地理解缩写的含义，尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时，会显示一个提示框。 示例&#x…...
技术栈RabbitMq的介绍和使用
目录 1. 什么是消息队列？2. 消息队列的优点3. RabbitMQ 消息队列概述4. RabbitMQ 安装5. Exchange 四种类型5.1 direct 精准匹配5.2 fanout 广播5.3 topic 正则匹配 6. RabbitMQ 队列模式6.1 简单队列模式6.2 工作队列模式6.3 发布/订阅模式6.4 路由模式6.5 主题模式…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币，另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额，返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
GraphQL 实战篇：Apollo Client 配置与缓存
GraphQL 实战篇：Apollo Client 配置与缓存 上一篇：GraphQL 入门篇：基础查询语法 依旧和上一篇的笔记一样，主实操，没啥过多的细节讲解，代码具体在： https://github.com/GoldenaArcher/graphql…...
基于单片机的宠物屋智能系统设计与实现（论文+源码）
本设计基于单片机的宠物屋智能系统核心是实现对宠物生活环境及状态的智能管理。系统以单片机为中枢，连接红外测温传感器，可实时精准捕捉宠物体温变化，以便及时发现健康异常；水位检测传感器时刻监测饮用水余量，防止宠物…...
Yii2项目自动向GitLab上报Bug
Yii2 项目自动上报Bug 原理 yii2在程序报错时, 会执行指定action, 通过重写ErrorAction, 实现Bug自动提交至GitLab的issue 步骤 配置SiteController中的actions方法 public function actions(){return [error > [class > app\helpers\web\ErrorAction,],];}重写Error…...