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

JavaWeb（四：Ajax与Json）

news 文章来源：https://blog.csdn.net/xpy2428507302/article/details/140383906 2025/2/9 14:09:36

一、Ajax

1.定义

Ajax（Asynchronous JavaScript And XML）：异步的 JavaScript 和 XML

AJAX 不是新的编程语言，指的是⼀种交互方式：异步加载。

客户端和服务器的数据交互更新在局部页面的技术，不需要刷新整个页面 --> 局部刷新。

优点：

① 局部刷新，效率更高

② 用户体验更好

2.原理

3.基于 jQuery 的 AJAX 语法

$.ajax({

        属性，

})

常用的属性参数：

url请求的后端服务地址
type请求方式，默认 get
data请求所携带的参数
dataType服务器返回的数据类型：text / json
success请求成功的回调函数
error请求失败的回调函数
complete请求完成的回调函数（无论成功或者失败，都会调用）
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body><input id="text" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url: '/test',type: 'post',data: 'id=1',dataType: 'text',success: function (data) {var text = $("#text");text.before("<span>" + data + "</span><br/>");}});});})</script>
</body>
</html>
@WebServlet("/test")
public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String id = req.getParameter("id");try {Thread.sleep(1500);//1.5s} catch (InterruptedException e) {e.printStackTrace();}String str = "Hello World";resp.getWriter().write(str);}
}

注意：

① 不能用表单提交请求（同步请求），改用 jQuery 方式动态绑定事件来提交。

② Servlet 不能跳转到 jsp，只能将数据返回（通过 response.getWriter() 将数据写回到页面）。

success 回调函数中的 data，就代表返回的数据。

如果跳转到 jsp 的话，会将 jsp 的整个页面代码作为 data 返回。

4.传统的 WEB 数据交互 与 AJAX 数据交互 的区别

① 客户端请求的方式不同：

        传统：浏览器发送同步请求 （form、a）

        AJAX：异步引擎对象发送异步请求

② 服务器响应的⽅式不同：

        传统：响应⼀个完整 JSP 页面（视图）

        AJAX：响应需要的数据

③ 客户端处理方式不同：

        传统：需要等待服务器完成响应并且重新加载整个页面之后，用户才能进行后续的操作。

        AJAX：动态更新页面中的局部内容，不影响用户的其他操作

二、Json

1.定义

JavaScript Object Notation：⼀种轻量级数据交互格式，完成 js 与 Java 等后端开发语⾔对象数据之间的转换 。

客户端和服务器之间传递对象数据，需要用到 JSON 格式。

2.使用步骤：

① 导入 json 依赖

        <!-- 添加JSON依赖--><dependency><groupId>net.sf.json-lib</groupId><artifactId>json-lib</artifactId><version>2.4</version><!-- 必须添加JDK版本号--><classifier>jdk15</classifier></dependency><dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</artifactId><version>1.9.2</version></dependency><dependency><groupId>commons-collections</groupId><artifactId>commons-collections</artifactId><version>3.2.1</version></dependency><dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.5</version></dependency><dependency><groupId>net.sf.ezmorph</groupId><artifactId>ezmorph</artifactId><version>1.0.3</version></dependency><dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.2</version></dependency>

② 将 Java 对象转换为 Json 格式

public class TestServlet extends HttpServlet {@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws IOException {User user = new User(1, "张三", 96.5);//处理中文乱码resp.setCharacterEncoding("UTF-8");//将 Java 对象转为 JSON 格式JSONObject jsonObject = JSONObject.fromObject(user);resp.getWriter().write(jsonObject.toString());}
}

注意：

如果是一个普通的 Java 对象，使用 JSONObject.fromObject() 进行转换；

如果是一个 Java 对象的集合，使用 JSONArray.fromObject() 进行转换；

如果是多个 Java 对象的集合，可以创造一个类进行封装，类的属性就是这多个集合。然后返回该对象，如下：

public class Location {private List<String> cities;//市private List<String> areas;//区public List<String> getCities() {return cities;}public void setCities(List<String> cities) {this.cities = cities;}public List<String> getAreas() {return areas;}public void setAreas(List<String> areas) {this.areas = areas;}
}

③ Ajax 中以 json 格式返回数据

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head><title>Title</title><script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
</head>
<body>编号：<input id="id" type="text"/><br/>姓名：<input id="name" type="text"/><br/>成绩：<input id="score" type="text"/><br/><input id="btn" type="button" value="提交"/><script type="text/javascript">$(function () {var btn = $("#btn");btn.click(function () {$.ajax({url:'/test',type:'post',dataType:'json',success:function(data){$("#id").val(data.id);$("#name").val(data.name);$("#score").val(data.score);}})});})</script>
</body>
</html>

相关文章：

JavaWeb（四：Ajax与Json）

一、Ajax 1.定义 Ajax&#xff08;Asynchronous JavaScript And XML&#xff09;&#xff1a;异步的 JavaScript 和 XML AJAX 不是新的编程语言&#xff0c;指的是⼀种交互方式&#xff1a;异步加载。 客户端和服务器的数据交互更新在局部页面的技术&#xff0c;不需要刷新…...

编程日记 2024/7/13 9:02:59

Spring源码中的模板方法模式

1. 什么是模板方法模式 模板方法模式&#xff08;Template Method Pattern&#xff09;是一种行为设计模式&#xff0c;它在操作中定义算法的框架&#xff0c;将一些步骤推迟到子类中。模板方法让子类在不改变算法结构的情况下重新定义算法的某些步骤。 模板方法模式的定义&…...

编程日记 2024/7/13 8:59:55

初学SpringMVC之 JSON 篇

JSON&#xff08;JavaScript Object Notation&#xff0c;JS 对象标记&#xff09;是一种轻量级的数据交换格式 采用完全独立于编程语言的文本格式来存储和表示数据 JSON 键值对是用来保存 JavaScript 对象的一种方式 比如&#xff1a;{"name": "张三"}…...

编程日记 2024/7/13 8:58:54

Mojo AI编程语言（三）数据结构：高效数据处理

目录 1. Mojo AI编程语言简介 2. 数据结构在数据处理中的重要性 3. Mojo AI中的基础数据结构 3.1 数组 3.2 列表 3.3 字典 4. 高效数据结构的实现与优化 4.1 哈希表 4.2 树结构 4.3 图结构 5. 高效数据处理技术 5.1 并行处理 5.2 内存优化 5.3 数据压缩 6. 实战…...

编程日记 2024/7/13 8:53:49

Java学习笔记整理: 关于SpringBoot 2024/7/12；

SpringBoot springboot也是spring公司开发的一款框架。为了简化spring项目的初始化搭建的。 特点specialty&#xff1a; springboot的特点: 1&#xff09; 自动配置 Spring Boot的自动配置是一个运行时&#xff08;更准确地说&#xff0c;是应用程序启动时&#xff09;的过程&a…...

编程日记 2024/7/13 8:52:48

ASP.NET MVC Lock锁的测试

思路&#xff1a;我们让后台Thread.Sleep一段时间&#xff0c;来模拟一个耗时操作&#xff0c;而这个时间可以由前台提供。 我们开启两个或以上的页面&#xff0c;第一个耗时5秒(提交5000)&#xff0c;第二个耗时1秒(提交1000)。 期望的测试结果&#xff1a; 不加Lock锁&…...

编程日记 2024/7/13 8:48:44

Hadoop3：HDFS-通过配置黑白名单对集群进行扩缩容，并实现数据均衡（实用）

一、集群情况介绍 我的本地虚拟机&#xff0c;一共有三个节点&#xff0c;hadoop102、hadoop103、hadoop104 二、白名单 创建白名单文件whitelist&#xff0c;通过白名单的配置&#xff0c;只允许集群包含102和103两台机器可以存储数据&#xff0c;104无法存储数据。 需求 …...

编程日记 2024/7/13 8:46:42

TensorFlow系列：第五讲：移动端部署模型

项目地址&#xff1a;https://github.com/LionJackson/imageClassification Flutter项目地址&#xff1a;https://github.com/LionJackson/flutter_image 一. 模型转换 编写tflite模型工具类&#xff1a; import osimport PIL import tensorflow as tf import keras import …...

编程日记 2024/7/13 8:41:36

深度学习DeepLearning二元分类 学习笔记

文章目录 类别区分变量与概念逻辑回归Sigmoid函数公式决策边逻辑损失函数和代价函数逻辑回归的梯度下降泛化过拟合的解决方案正则化 类别区分 变量与概念 决策边置信度阈值threshold过拟合欠拟合正则化高偏差lambda&#xff08;λ&#xff09; 线性回归受个别极端值影响&…...

编程日记 2024/7/13 8:40:35

Eureka 介绍与使用

Eureka 是一个开源的服务发现框架&#xff0c;它主要用于在分布式系统中管理和发现服务实例。它由 Netflix 开发并开源&#xff0c;是 Netflix OSS 中的一部分。 使用 Eureka 可以方便地将新的服务实例注册到 Eureka 服务器&#xff0c;并且让其他服务通过 Eureka 服务器来发现…...

编程日记 2024/7/13 8:39:34

Java异常体系、UncaughtExceptionHandler、Spring MVC统一异常处理、Spring Boot统一异常处理

概述 所有异常都是继承自java.lang.Throwable类&#xff0c;Throwable有两个直接子类&#xff0c;Error和Exception。 Error用来表示程序底层或硬件有关的错误&#xff0c;这种错误和程序本身无关&#xff0c;如常见的NoClassDefFoundError。这种异常和程序本身无关&#xff0…...

编程日记 2024/7/13 8:36:32

bash终端快捷键

快捷键作用ShiftCtrlC复制ShiftCtrlV粘贴CtrlAltT新建终端ShiftPgUp/PgDn终端上下翻页滚动CtrlC终止命令CtrlD关闭终端CtrlA光标移动到最开始为止CtrlE光标移动到最末尾CtrlK删除此处到末尾的所有内容CtrlU删除此处至开始的所有内容CtrlD删除当前字符CtrlH删除当前字符的前一个…...

编程日记 2024/7/13 8:31:27

【Visual Studio】Visual Studio报错合集及解决办法

目录 Visual Studio报错:error LNK2001 Visual Studio报错:error C2061 Visual Studio报错:error C1075 Visual Studio报错:error C4430 Visual Studio报错error C3867 概述 持续更细Visual Studio报错及解决方法 Visual Studio报错:error LNK2001 问题 : error LNK2001…...

编程日记 2024/7/13 8:30:25

【微信小程序知识点】转发功能的实现

转发功能&#xff0c;主要帮助用户更流畅地与好友分享内容与服务。 想实现转发功能&#xff0c;有两种方式&#xff1a; 1.页面js文件必须声明onShareAppMessage事件监听函数&#xff0c;并自定义转发内容。只有定义了此事件处理函数&#xff0c;右上角菜单才会显示“转发”按…...

编程日记 2024/7/13 8:28:23

用python识别二维码（python实例二十三）

目录 1.认识Python 2.环境与工具 2.1 python环境 2.2 Visual Studio Code编译 3.识别二维码 3.1 代码构思 3.2 代码实例 3.3 运行结果 4.总结 1.认识Python Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&…...

编程日记 2024/7/13 8:26:21

电脑文件夹怎么设置密码？让你的文件更安全！

在日常使用电脑的过程中&#xff0c;我们常常会有一些需要保护的个人文件或资料。为了防止这些文件被他人未经授权访问&#xff0c;对重要文件夹设置密码是一种有效的保护措施&#xff0c;可是电脑文件夹怎么设置密码呢&#xff1f;本文将介绍2种简单有效的方法帮助您为电脑文件…...

编程日记 2024/7/13 8:23:18

paddla模型转gguf

在使用ollama配置本地模型时&#xff0c;只支持gguf格式的模型&#xff0c;所以我们首先需要把自己的模型转化为bin格式&#xff0c;本文为paddle&#xff0c;onnx&#xff0c;pytorch格式的模型提供说明&#xff0c;safetensors格式比较简单请参考官方文档&#xff0c;或其它教…...

编程日记 2024/7/13 8:22:18

Memcached vs Redis——Java项目缓存选择

在Java项目开发中&#xff0c;缓存系统作为提升性能、优化资源利用的关键技术之一&#xff0c;扮演着至关重要的角色。Memcached和Redis作为两种流行的缓存解决方案&#xff0c;各有其独特的优势和应用场景。本文旨在通过分析项目大小、用户访问量、业务复杂度以及服务器部署情…...

编程日记 2024/7/13 8:21:16

大模型最新黑书：基于GPT-3、ChatGPT、GPT-4等Transformer架构的自然语言处理 PDF

今天给大家推荐一本丹尼斯罗斯曼(Denis Rothman)编写的关于大语言模型&#xff08;LLM&#xff09;权威教程<<大模型应用解决方案> 基于GPT-3、ChatGPT、GPT-4等Transformer架构的自然语言处理>&#xff01;Google工程总监Antonio Gulli作序&#xff0c;这含金量不…...

编程日记 2024/7/13 8:20:15

【电子数据取证】电子数据司法鉴定

文章关键词&#xff1a;电子数据取证、司法鉴定服务、司法鉴定流程 一、定义 什么是司法鉴定&#xff1f; 在诉讼活动中鉴定人运用科学技术或者专业知识对诉讼涉及的专门性问题进行鉴别和判断并提供鉴定意见的活动。 电子数据司法鉴定 那么电子数据司法鉴定&#xff0c;就…...

编程日记 2024/7/13 8:19:14

使用 OpenCV 的 inRange 函数进行颜色分割

使用 OpenCV 的 inRange 函数进行颜色分割 在图像处理领域&#xff0c;颜色分割是一个常见的任务&#xff0c;常用于识别和提取图像中的特定颜色区域。OpenCV 提供了一个非常方便的函数 inRange 来实现这一功能。在这篇博客中&#xff0c;我们将详细介绍 inRange 函数的用法&a…...

编程日记 2024/7/13 8:18:12

OpenAI终止对中国提供API服务，对国内AI市场产生重大冲击？

6月25日&#xff0c;OpenAI突然宣布终止向包括中国在内的国家地区提供API服务&#xff0c;本月9日这一政策已经正式生效了&#xff01; 有人说&#xff0c;这个事件给中国AI行业带来很大冲击&#xff01;是这样吗&#xff1f;在展开讨论前&#xff0c;我们先来看看什么是API服务…...

编程日记 2024/7/13 8:16:10

JavaDS —— 栈 Stack 和 队列 Queue

栈的概念 栈是一种先进后出的线性表&#xff0c;只允许在固定的一端进行插入和删除操作。 进行插入和删除操作的一端被称为栈顶&#xff0c;另一端被称为栈底 栈的插入操作叫做进栈/压栈/入栈 栈的删除操作叫做出栈 现实生活中栈的例子&#xff1a; 栈的模拟实现 下面是Jav…...

编程日记 2024/7/13 8:15:08

C++进阶：继承和多态

文章目录 ❤️继承&#x1fa77;继承与友元&#x1f9e1;继承和静态成员&#x1f49b;菱形继承及菱形虚拟继承&#x1f49a;继承和组合 ❤️多态&#x1fa77;什么是多态&#xff1f;&#x1f9e1;多态的定义以及实现&#x1f49b;虚函数&#x1f49a;虚函数的重写&#x1f499…...

编程日记 2024/7/13 8:12:06

【八大排序】java版(上)（冒泡、快排、堆排、选择排序）

文章目录 一、冒泡排序(重点)思路代码 二、快排(面试重点)思路代码 三、堆排序(面试重点)思路代码 四、选择排序思路代码 一、冒泡排序(重点) 思路 前后两两数据进行比较&#xff0c;小的数据往前走&#xff0c;大的数据往后走&#xff0c;每一轮结束之后&#xff0c;最大的数…...

编程日记 2024/7/13 8:10:04

.Net Core 微服务之Consul（二）-集群搭建

引言： 集合上一期.Net Core 微服务之Consul（一）(.Net Core 微服务之Consul（一）-CSDN博客) 。 目录 一、 Consul集群搭建 1. 高可用 1.1 高可用性概念 1.2 高可用集群的基本原理 1.3 高可用集群的架构设计 1.3.1 主从复制架构 1.3.2 共享存储架构 1.3.3 负载均衡…...

编程日记 2024/7/13 8:09:03

C++ --＞ 类和对象(二)

前言 在前面简单的介绍了OOP&#xff0c;什么是类&#xff0c;在类中的this指针。接下来就深入理解类和对象。 默认成员函数 默认构造函数&#xff1a;用于在创建对象时初始化对象的成员变量。默认拷贝构造函数&#xff1a;用于使用已存在的对象来初始化新创建的对象。默认析构…...

编程日记 2024/7/13 8:08:03

利用宝塔安装一套linux开发环境

更新yum&#xff0c;并且更换阿里镜像源 删除yum文件 cd /etc/yum.repos.d/ 进入yum核心目录 ls sun.repo rm -rf * 删除之前配置的本地源 ls 配置阿里镜像源 wget -O /etc/yum.repos.d/CentOS-Base.repo https://mirrors.aliyun.com/repo/Centos-7.repo 配置扩展包 wge…...

编程日记 2024/7/13 8:07:02

VB 实例：掌握 Visual Basic 编程的精髓

VB 实例：掌握 Visual Basic 编程的精髓 引言 Visual Basic（简称VB）是一种由微软开发的高级编程语言，它结合了易于使用的界面和强大的编程功能，使得初学者和专业人士都能快速开发Windows桌面应用程序。本文将通过一系列实例，深入探讨VB编程的基础知识和高级技巧，帮助读…...

编程日记 2024/7/13 8:03:59

层次分析法：matlab代码实现

计算权重&#xff1a; 一、算术平均法 关于矩阵&#xff1a; 1、矩阵的输入写法 [ ; ; ]同行用空格或逗号隔开&#xff0c;不同行用分号间隔 2、矩阵求和 默认按列求和 asum(E) 等同于 asum(E,1) 得到行向量 按行求和 asum(E,2) 得到列向量 对整个矩阵求和 asum(E,"all&…...

编程日记 2024/7/13 8:00:56

钦州网站建设公司哪家好/指数平滑法

文章目录PlatformThread使用示例示例-创建执行一次的线程示例-创建可以执行多次的线程示例-高优先级线程先运行PlatformThread源码分析数据成员构造器和析构器设置线程的属性线程的入口函数创建线程回收线程小结WebRTC是跨多种平台的&#xff0c;为了方便线程的使用&#xff0c…...

编程日记 2025/2/9 13:14:34

公司黄页什么意思/江苏网站seo设计

我们都知道对大规模数据进行复杂的数据分析通常需要耗费大量的时间&#xff0c;这时就需要我们的数据消减技术了。 数据消减技术的主要目的就是从原有巨大数据集中获得一个精简的数据集&#xff0c;并使这一精简数据集保持原有数据集的完整性。这样在精简数据集上进行数据挖掘…...

编程日记 2025/2/9 6:43:06

江苏省建设厅官方网站/拼多多关键词排名查询软件

1、当页面加载隐藏窗口时&#xff0c;可能由于加载数据较多&#xff0c;产生延迟&#xff1b;这时可能会出现隐藏窗口会显现&#xff0c;产生不好的用户体验。可以先在对body标签进行处理 1&#xff09;、<body style"visibility:hidden;"> 2)、页面加载完成后…...

编程日记 2025/2/9 4:32:22

义乌做站外推广的公司/seo优化包括什么

目前我们使用的流程图制作软件大体有RFFLOW、FLOW CHARTING、VISIO三种&#xff0c;可是它们的体积和资源占用情况很大&#xff0c;操作复杂&#xff0c;有没有简单易用不需安装的流程图制作软件呢&#xff1f;下面我给大家推荐几款在线流程图制作工具。 第一款&#xff1a;Gli…...

编程日记 2025/2/9 3:52:00

网站怎样做注册窗口/合肥网络推广网络运营

go语言是谷歌开发第二款开源编程语言&#xff0c;可专门针对多处理器系统应用程序的编程进行优化&#xff0c;其运行速度快&#xff0c;而且更加安全&#xff0c;并支持并行进程。除此之外&#xff0c;还具有以下优点&#xff1a; 1. go语言部署简单。 go语言编译生成的是一个…...

编程日记 2025/2/9 3:18:44

wordpress基本教程/微商软文范例大全100

Java Number内置数据类型&#xff1a;byte int long short double 等int i 10&#xff1b;float i 10.5f;实际开发中&#xff0c;经常遇到使用对象&#xff0c;而不是内置数据类型,包装类(Integer Long Double Float Short)都是抽象类 Number的子类内置数据类型被当作对象使用…...

编程日记 2025/2/9 2:17:03