当前位置：首页 > news >正文

Ajax和JSON的基本用法

news 2025/11/5 5:56:51

局部请求页面不会变化，返回的响应我们要动态获取，获取后选择数据更新区域。

<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>//获取点…...

编程日记 2023/3/10 9:06:55

【项目实战】基于netty-websocket-spring-boot-starter实现WebSocket服务器长链接处理

一、背景项目中需要建立客户端与服务端之间的长链接，首先就考虑用WebSocket，再来SpringBoot原来整合WebSocket方式并不高效，因此找到了netty-websocket-spring-boot-starter 这款脚手架，它能让我们在SpringBoot中使用Netty来开发…...

编程日记 2023/3/10 9:05:50

BC双驱、ChatGPT大火，AI独角兽撬开盈利大门？

配图来自Canva可画放眼AI行业，各大AI玩家长期亏损、“钱”景堪忧。回看过去一年，部分AI独角兽的亏损问题愈发尖锐——云从科技2022年净亏损同比扩大至8.5亿元；寒武纪2022年净亏损11.6亿元，较上年同期扩大41.4%；地平…...

编程日记 2023/3/10 9:04:47

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.总结参考文献 …...

编程日记 2023/3/10 9:03:42

Git使用教程、命令

Git使用教程、命令基本配置 git的配置文件位置： win: c:\users\<userName>\.gitconfig linux: /home/<userName>/.gitconfig # 个人/etc/gitconfig # 系统全局# 修改git init时的默认分支为master&#x…...

编程日记 2023/3/10 9:02:37

《c++ primer笔记》第九章顺序容器

前言知识点很多，这里只记录遗忘的。从这章开始会对前面章节的内容进行一个扩充，如果以前的忘了读起来会有点吃力。总的来说，本章节难度不大。文章目录一、概述二、容器库概览2.1容器定义和初始化2.2赋值三、顺序容器操作3.1添加元素3.2删除…...

编程日记 2023/3/10 9:01:34

QML动画（弹动和翻转效果）

Flickable（弹动） QML中提供了一个Flickable元素，可以将其子项设置在一个可以拖拽和弹动的界面上，使得子项目的视图可以滚动。在传统的用户界面中，可以使用标准控件（如滚动条和箭头按钮）滚动视图…...

编程日记 2023/3/10 9:00:31

GPS启动方式、定位速度、定位精度介绍

前面文章介绍了GPS定位基础知识 GPS定位知识介绍 (qq.com) 本文主要介绍GPS启动方式。定位过程中最重要的辅助信息是时间、星历、位置。根据辅助信息不同，...

编程日记 2023/3/10 8:59:28

深度学习零基础学习之路——第五章个人数据集的制作

Python深度学习入门第一章 Python深度学习入门之环境软件配置第二章 Python深度学习入门之数据处理Dataset的使用第三章数据可视化TensorBoard和TochVision的使用第四章 UNet-Family中Unet、Unet和Unet3的简介第五章个人数据集的制作深度学习数据集的制作Python深度学…...

编程日记 2023/3/10 8:58:23

女神节 | PHP和Java算什么，女工程师才是最美最好的语言！

世界上第一个程序员是女性第一个发现Bug的也是女性在智领云有一群追求快乐和独立的女性工程师她们多有魅力？ 工位上她们专注于数据与代码平日里郊游、瑜伽、插花、科学养娃一件不落不仅用0和1编织数字世界也在用心装点自己的生活今天是国际劳动妇女节…...

编程日记 2023/3/10 8:57:20

【Python】装饰器

一、装饰器的作用装饰器能够为已经存在的对象添加额外的功能。二、什么是装饰器装饰器本质是一个python函数，它可以让其他函数在不需要做任何代码变动的前提下增加额外功能，装饰器的返回值也是一个函数对象。三、装饰器的应用场景插入日志、性能…...

编程日记 2023/3/10 8:56:13

Spring事务及传播机制

概念在MySQL中介绍过，当同一时间出现一起读写数据的情况，可能会导致最终的结果出错，因此可以使用事务来提高隔离级别而Spring中也可以实现事务手动添加事务使用SpringBoot中的DataSourceTransactionManager对象可以获取事务&#xff0…...

编程日记 2023/3/10 8:55:07

43-Golang中的goroutine！！！

Golang中的goroutine进程和线程说明并发和并行并发并行Go协程和Go主线程案例小结goroutine的调度机制MPG模式基本介绍MPG模式运行的状态1MPG模式运行的状态2设置GOlang运行的CPU数不同 goroutine之间如何通讯使用全局变量加锁同步改进程序进程和线程说明 1.进程就是程序在操作…...

编程日记 2023/3/10 8:54:02

[深入理解SSD系列闪存实战2.1.5] NAND FLASH基本读操作及原理_NAND FLASH Read Operation源码实现

前言上面是我使用的NAND FLASH的硬件原理图，面对这些引脚，很难明白他们是什么含义, 下面先来个热身：问1. 原理图上NAND FLASH只有数据线，怎么传输地址？答1．在DATA0～DATA7上既传输数据，又传输地址当ALE为高电平时传输的是地址，问2. 从NAND FLASH芯片手册可知，要…...

编程日记 2023/3/10 8:52:58

pandas库中的read_csv函数读取数据时候的路径问题详解(ValueError: embedded null character)

read_csv()函数不仅是R语言中的一个读取csv文件的函数，也是pandas库中的一个函数。pandas是一个用于数据分析和处理的python库。它的read_csv函数可以读取csv文件里的数据，并将其转化为pandas里面的DataFrame对象。它由很多参数可以设置，例如…...

编程日记 2023/3/10 8:51:55

【量化交易笔记】4.移动平均值的实现

上一讲已经讲A股的数据下载到本地或保存数据库，我们可以随时使用。移动平均MA(Moving Average) ，是用统计分析的方法，将一定时期内的证券价格（指数）加以平均，并把不同时间的平均值连接起来，形成…...

编程日记 2023/3/10 8:50:51

2023年3月份的野兔在线工具系统版本更新

这个是野兔在线工具系统中文版更新，这次更新的功能，和修改的问题还是比较多的，也修复系统部分功能，应该也是目前市面上在线工具比较多的一个系统了。系统名称：野兔在线工具系统系统语言：中文版系统源码&…...

编程日记 2023/3/10 8:49:45

科技成果赋智中小企业深度行边界无限靖云甲ADR入选十大优秀案例

近日，国家工业信息安全发展研究中心、青岛市工业和信息化局、青岛市民营经济发展局、青岛市即墨区人民政府、青岛蓝谷管理局联合举办的科技成果赋智中小企业“深度行”活动（青岛站）成功举办，同步举行了赋智“深度行”活动&#xf…...

编程日记 2023/3/10 8:48:43

我们的理性何处安放

每天工作压力和各种人相处都让我们非常忙碌，我们上大学，努力工作，都是想获得更好的人生场景，素养，提升自身的认知，这样就是对我们大多数人生最负责任。如何让自己理性与人为善，并能被人温柔以待…...

编程日记 2023/3/10 8:47:35

首先就是了解ListView和RecyclerView的区别1.ListView相比RecycleView的优点a.ListView实现添加HeaderView和FooderView有直接的方法b.分割线可以直接设置c.ListView实现onItemClickListence和onItemLongClickListence有直接的方法2.RecyclerView相比ListView的优点a.封装了Vie…...

编程日记 2023/3/10 8:46:30

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件： 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

编程新知 2025/10/31 18:32:29

FFmpeg 低延迟同屏方案

引言在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...

编程新知 2025/11/4 6:26:59

Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例

使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件，常用于在两个集合之间进行数据转移，如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。核心特性与用法基本属性 v-model：绑定右侧列表的值&…...

编程新知 2025/11/1 16:04:43

聊聊 Pulsar：Producer 源码解析

一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台，以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中，Producer（生产者） 是连接客户端应用与消息队列的第一步。生产者…...

编程新知 2025/11/3 17:57:11

ESP32读取DHT11温湿度数据

芯片：ESP32 环境：Arduino 一、安装DHT11传感器库红框的库，别安装错了二、代码注意，DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

编程新知 2025/11/3 4:13:05