Java后端开发——Ajax、jQuery和JSON
Java后端开发——Ajax、jQuery和JSON
概述
Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技术，该技术是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步请求。
Ajax异步请求方式不向服务器发出请求，会得到数据后再更新页面（通过DOM操作修改页面内容），整个过程不会发生页面跳转或刷新操作。
传统请求方式和Ajax异步请求方式区别
Ajax九九乘法口诀表
1.创建页面mul99ajax.html,添加num、button和result标记
<h3>乘法口诀表</h3>
阶数：<input type="text" id="num"/>
<input type="button" value="提交" onclick="doAjax()"/>
<div id="result"></div>
2.添加Ajax的JS代码
<script type="text/javascript">
function doAjax(){var num = document.getElementById("num").value;var result = document.getElementById("result");var xhr = new XMLHttpRequest(); xhr.open('get', '/myspringmvc/calAjax?num='+num); xhr.send(); xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {result.innerHTML =xhr.responseText;}}
}
</script>
1）DOM查找元素num和result标记
var num = document.getElementById("num").value;var result = document.getElementById("result");
2）创建XHR对象
var xhr = new XMLHttpRequest();
3）发送请求
xhr.open('get', '/myspringmvc/calAjax?num='+num);
xhr.send();
4）设置回调函数
xhr.onreadystatechange = function () {if (xhr.readyState === 4 && xhr.status === 200) {result.innerHTML =xhr.responseText;}}
5）处理异步数据，更新数据到result标记
result.innerHTML =xhr.responseText;
3.编写后端SpringMVC代码MultableController.java，在处理方法上增加注解@ResponseBody，返回值为内容。
@Controller
public class MultableController {@RequestMapping("/calAjax")@ResponseBody // 返回内容，不是JSP页面public String cal(Integer num) {Multable m=new Multable();m.setNum(num);String result=m.print();return result;}
}
jQuery实现表格奇偶行颜色不同
1.创建页面jQuery.html,添加表格标记和测试数据
<table id="tb1"><thead><th style="width: 70px;"></th><th style="width: 90px;">姓名</th><th style="width: 90px;">性别</th><th style="width: 200px;">暂住地</th></thead><!-- 把表格放在thead页眉中 这一行不是数据不改变颜色 --><tbody><tr id="tr1"><td><input type="radio" id="rd"></td><td>张三</td><td>男</td><td>四川成都</td></tr><tr id="tr2"><td><input type="radio" id="rd"></td><td>李四</td><td>女</td><td>四川绵阳</td></tr><tr id="tr3"><td><input type="radio" id="rd"></td><td>王五</td><td>男</td><td>四川南充</td></tr><tr id="tr4"><td><input type="radio" id="rd"></td><td>赵六</td><td>男</td><td>四川自贡</td></tr><tr id="tr5"><td><input type="radio" id="rd"></td><td>陈勇</td><td>男</td><td>四川德阳</td></tr><tr id="tr6"><td><input type="radio" id="rd"></td><td>罗梅</td><td>女</td><td>四川宜宾</td></tr></tbody></table>
2.设置CSS样式，奇偶行颜色不同
3.编写jQuery代码设置奇偶行颜色不同，设置click改变颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<style>
.even {
background-color: #FFF38F;
}
.odd {
background-color: #FFFFEE;
}
.s {
background-color: #FF6500;
}
/* 选中的样式只能放在后面，才能掩盖原来的样式 */
table {
border: 1px solid black;
text-align: center;
border-collapse: collapse;
}
th,
td {
border: 1px solid black;
padding: 5px;
}
</style><body>
<!-- 引入jquery库 -->
<script src="./js/jquery-3.6.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$("tbody>tr:odd").addClass("odd");
$("tbody>tr:even").addClass("even");
$("tbody>tr").click(function() { $(this).addClass("s").siblings().removeClass("s").end().find(":radio").attr("checked", true);
});
});
</script><table id="tb1">
<thead>
<th style="width: 70px;"></th>
<th style="width: 90px;">姓名</th>
<th style="width: 90px;">性别</th>
<th style="width: 200px;">暂住地</th>
</thead>
<!-- 把表格放在thead页眉中 这一行不是数据不改变颜色 -->
<tbody>
<tr id="tr1">
<td><input type="radio" id="rd"></td>
<td>张三</td>
<td>男</td>
<td>四川成都</td>
</tr>
<tr id="tr2">
<td><input type="radio" id="rd"></td>
<td>李四</td>
<td>女</td>
<td>四川绵阳</td>
</tr>
<tr id="tr3">
<td><input type="radio" id="rd"></td>
<td>王五</td>
<td>男</td>
<td>四川南充</td>
</tr>
<tr id="tr4">
<td><input type="radio" id="rd"></td>
<td>赵六</td>
<td>男</td>
<td>四川自贡</td>
</tr>
<tr id="tr5">
<td><input type="radio" id="rd"></td>
<td>陈勇</td>
<td>男</td>
<td>四川德阳</td>
</tr>
<tr id="tr6">
<td><input type="radio" id="rd"></td>
<td>罗梅</td>
<td>女</td>
<td>四川宜宾</td>
</tr>
</tbody>
</table></body>
</html>
jQuery版九九乘法口诀
1.在创建页面mul99jquery.html,添加num、button和result标记
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h3>乘法口诀表</h3>
阶数：<input type="text" id="num"/>
<input id="btn" type="button" value="提交"/>
<div id="result"></div></body>
</html>
2.添加jQuery的Ajax的JS代码
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){$('#btn').click(function(){var num=$('#num').val();$.ajax({url: '/myspringmvc/calAjax?num='+num,type: 'get',success: function(data){$('#result').html(data);}})})
})
</script>
1）在jQuery页面函数中，给按钮添加事件代码
$(document).ready(function(){$('#btn').click(function(){var num=$('#num').val();$.ajax({url: '/myspringmvc/calAjax',type: 'post',data:{num:num},success: function(data){$('#result').html(data);}})})
})
2）获取num控件的值
var num=KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲num').val(); 3）….ajax()函数，设置url、type和success函数。
$.ajax({url: '/myspringmvc/calAjax',type: 'post',data:{num:num},success: function(data){$('#result').html(data);}
3.测试
测试结果
商品类型Ajax加载
1.创建type表，并录入测试的商品类型数据
CREATE TABLE `type` (`id` int(11) NOT NULL AUTO_INCREMENT,`name` varchar(45) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=18 DEFAULT CHARSET=utf8mb4;插入数据
INSERT INTO `type` VALUES ('1', '零食');
INSERT INTO `type` VALUES ('2', '饮料');
INSERT INTO `type` VALUES ('3', '香烟');
INSERT INTO `type` VALUES ('7', '文具');
INSERT INTO `type` VALUES ('8', '猕猴桃');
INSERT INTO `type` VALUES ('10', '蛋糕');
INSERT INTO `type` VALUES ('11', '哈皮');
INSERT INTO `type` VALUES ('12', '芒果');
INSERT INTO `type` VALUES ('15', '果子');
INSERT INTO `type` VALUES ('16', '果子');
INSERT INTO `type` VALUES ('17', '果子');
刷新之后，如图所示
2.添加Javabean类Type.java 和 Dao类TypeDao.java
package com.javaweb.bean;public class Type {
private Integer id;
private String name;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
}
package com.javaweb.controller;import java.sql.SQLException;
import java.util.List;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.javaweb.bean.Type;
import com.javaweb.dao.TypeDao;@Controller
@RequestMapping("/type")
public class TypeController {private TypeDao typeDao=new TypeDao();@GetMapping("/find")@ResponseBodypublic List<Type> find(){try {return typeDao.find();} catch (SQLException e) {e.printStackTrace();}return null;}
}
3.修改good_add.jsp，添加jQuery代码，渲染类型列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script
src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('/myspringmvc/type/find', function(data) {
var html='';
data.forEach(function(type){
html+='<option value="'+type.id+'">'+type.name+'</option>'
}) ;
$('#type').append(html);
});
})
</script><div class="form-group">
<label for="select_topic" class="col-sm-1 control-label">类目</label>
<div class="col-sm-6">
<select class="form-control" id="type" name="type_id">
</select>
</div>
</div></body>
</html>
4.预览商品添加表单，查看类型列表
5.修改good_edit.jsp，添加jQuery代码，渲染类型列表选中
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css" />
</head>
<body>
<script
src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.0.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$.getJSON('/myspringmvc/type/find', function(data) {
var typeId=${g.type_id}
var html='';
data.forEach(function(type){
if(type.id==typeId)
html+='<option selected="selected" value="'+type.id+'">'+type.name+'</option>';
else
html+='<option value="'+type.id+'">'+type.name+'</option>';
}) ;
$('#type').append(html);
});
})
</script><div class="container-fluid">
<h3>修改商品页面</h3>
<br><br>
<form class="form-horizontal" action="${pageContext.request.contextPath}/goods/update" method="post">
<input type="hidden" name="id" value="${g.id }"/>
<div class="form-group">
<label for="input_name" class="col-sm-1 control-label">名称</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="input_name" name="name" value="${g.name }" required="required">
</div>
</div>
<div class="form-group">
<label for="input_name" class="col-sm-1 control-label">价格</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="input_name" value="${g.price }" name="price" >
</div>
</div>
<div class="form-group">
<label for="input_name" class="col-sm-1 control-label">介绍</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="input_name" value="${g.intro }" name="intro" >
</div>
</div>
<div class="form-group">
<label for="input_name" class="col-sm-1 control-label">库存</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="input_name" name="stock" value="${g.stock }">
</div>
</div>
<div class="form-group">
<label for="input_file" class="col-sm-1 control-label">封面图片</label>
<div class="col-sm-6">
<input type="text" name="cover" id="input_file" value="${g.cover }" required="required">推荐尺寸: 500 * 500
</div>
</div>
<div class="form-group">
<label for="input_file" class="col-sm-1 control-label">详情图片1</label>
<div class="col-sm-6">
<input type="text" name="image1" id="input_file" value="${g.image1 }" required="required">推荐尺寸: 500 * 500
</div>
</div>
<div class="form-group">
<label for="input_file" class="col-sm-1 control-label">详情图片2</label>
<div class="col-sm-6">
<input type="text" name="image2" id="input_file" value="${g.image2 }" required="required">推荐尺寸: 500 * 500
</div>
</div>
<div class="form-group">
<label for="select_topic" class="col-sm-1 control-label">类目</label>
<div class="col-sm-6">
<select class="form-control" id="type" name="type_id">
</select>
</div>
</div><div class="form-group">
<div class="col-sm-offset-1 col-sm-10">
<button type="submit" class="btn btn-success">提交保存</button>
</div>
</div>
</form>
</div>
</body>
</html>
6.预览商品编辑表单，查看类型列表及选中
上面项目已打包上传到网盘，需要可以自取。附链接：https://pan.baidu.com/s/1HmVI00L_C7Zx3bqTEqzXnA?pwd=2024
后面有时间和精力也会分享更多关于大数据领域方面的优质内容，感谢各位的喜欢与支持！
相关文章：
Java后端开发——Ajax、jQuery和JSON
Java后端开发——Ajax、jQuery和JSON 概述 Ajax全称是Asynchronous Javascript and XML，即异步的JavaScript和 XML。Ajax是一种Web应用技术，该技术是在JavaScript、DOM、服务器配合下，实现浏览器向服务器发送异步请求。 Ajax异步请求方式不…...
ssm基于Vue的戏剧推广网站论文
摘 要 如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统戏剧推广信息管理难度大，容错率低，…...
安卓adb
目录 如何开启 ADB 注意事项 如何使用 ADB ADB 能干什么 ADB（Android Debug Bridge）是一个多功能命令工具，它可以允许你与 Android 设备进行通信。它提供了多种设备权限，包括安装和调试应用，以及访问设备上未通过…...
【数位dp】【动态规划】C++算法：233.数字 1 的个数
作者推荐 【动态规划】C算法312 戳气球 本文涉及的基础知识点 动态规划 数位dp LeetCode:233数字 1 的个数 给定一个整数 n，计算所有小于等于 n 的非负整数中数字 1 出现的个数。 示例 1： 输入：n 13 输出：6 示例 2ÿ…...
docker (portainer 安装nginx)
汉化版步骤可以参考：写文章-CSDN创作中心https://mp.csdn.net/mp_blog/creation/editor/135258056 一、创建容器 二、配置端口，以及容器卷挂载 挂载目录配置：(下方截图的目录如下，docker 改为 mydocker，用docker作为根…...
10个linux文件管理命令
1. ls – 列出目录内容 ls可能是每个Linux用户在其终端中键入的第一个命令。它允许您列出您想要的目录的内容（默认情况下是当前目录），包括文件和其他嵌套目录。 它有很多选择，所以最好使用 --help 来获得一些帮助。此标志返回所…...
实战:使用docker容器化服务与文件挂载-2
接着上文，演示Elasticsearch 和 Kibana 的安装，并讲解文件挂载 Elasticsearch of Docker （Kibana） 1、Elasticsearch 安装 ElasticSearch 使用 Docker 安装：https://www.yuque.com/zhangshuaiyin/guli-mall/dwrp5b 1.…...
联合union
//————联合：union 1.联合的定义 联合也是一种特殊的自定义类型 #include<stdio.h> union Un//Un为联合标签 { int a; char c; }; struct St { int a; int b; }; int main() { union Un u; printf("%d\n",sizeof(u));//…...
如何在 Umi /Umi 4.0 中配置自动删除 console.log 语句？
背景，开发时需要console.log 日志，再生产、uat 、sit不想看到日志打印信息 方案1、代码规范eslint校验"no-console": true, //console.log 方案2、bable 插件 babel-plugin-transform-remove-console 配置在.umirx.ts/js中 export default…...
（生物信息学）R语言绘图初-中-高级——3-10分文章必备——饼图（初级）
生物信息学文章的发表要求除了思路和热点以外，图片绘制是否精美也是十分重要的，本专栏为（生物信息学）R语言绘图初-中-高级——3-10分文章必备，主要通过大量文献，总结3-10分文章中高频出现的各种图片，并给大家提供图片复现的R语言代码，及图片识读。 本专栏将向大家介绍…...
AI ppt生成器 Tome
介绍 一款 AI 驱动的 PPT/幻灯片内容辅助生成工具。只需要输入一个标题或者一段特定的描述，AI 便会自动生成一套包括标题、大纲、内容、配图的完整 PPT。 Tome平台只需要用户输入一句话，就可以自动生成完整的PPT，包括文字和图片。功能非常强…...
Linux与Windows下追踪网络路由：traceroute、tracepath与tracert命令详解
简介 在进行网络诊断或排查问题时，了解数据包从源主机到目标主机之间的具体传输路径至关重要。Linux系统提供了traceroute和tracepath工具来实时显示链路路径信息，而Windows则使用了tracert命令实现相同的功能。本文将详细介绍这三个命令的用法及其在不…...
图解JVM (及一些垃圾回收\GC相关面试题 持续更新)
垃圾回收，顾名思义就是释放垃圾占用的空间，从而提升程序性能，防止内存泄露。当一个对象不再被需要时，该对象就需要被回收并释放空间。 Java 内存运行时数据区域包括程序计数器、虚拟机栈、本地方法栈、堆等区域。其中，…...
linux 系统安全及应用
一、账号安全基本措施 1.系统账号清理 1.将用户设置为无法登录 /sbin/nologin shell——/sbin/nologin却比较特殊，所谓“无法登陆”指的仅是这个用户无法使用bash或其他shell来登陆系统而已，并不是说这个账号就无法使用系统资源。举例来说，…...
如何查看崩溃日志
目录 描述 思路 查看ipa包崩溃日志 简单查看手机崩溃信息几种方式 方式1:手机设置查看崩溃日志 方式2: Xocde工具 方式3: 第三方软件克魔助手 环境配置 实时日志 奔溃日志分析 方式四：控制台资源库 线上崩溃日志 线上监听crash的几种方式 方式1: 三…...
使用HttpSession和过滤器实现一个简单的用户登录认证的功能
这篇文章分享一下怎么通过session结合过滤器来实现控制登录访问的功能，涉及的代码非常简单，通过session保存用户登录的信息，如果没有用户登录的话，会在过滤器中处理，重定向回登录页面。 创建一个springboot项目&#…...
SEO全自动发布外链工具源码系统:自动增加权重 附带完整的搭建安装教程
SEO全自动发布外链工具是一款基于PHP和MySQL开发的外链发布工具。它通过自动化流程，帮助站长快速、有效地发布外链，提高网站的权重和排名。该工具支持多种外链发布平台，如论坛、博客、分类信息等，可自定义发布内容和格式ÿ…...
Qt隐式共享浅析
一、什么是隐式共享 Qt 的隐式共享（implicit sharing）机制是一种设计模式，用于在进行数据拷贝时提高效率和减少内存占用。 在 Qt 中，许多类（如 QString、QList 等）都使用了隐式共享机制。这意味着当这些类…...
2023年我国网络安全法律法规一览
2023 年，是我国网络安全和数据安全领域法制建设持续发展的一年。政府进一步加大网络安全法规的制定和实施力度，不断强化数据安全和关键信息基础设施的保护，中央政府、国务院、中央网信办、工信部及各地方政府部门在《关键信息基础设施安全保护…...
Qt/QML编程学习之心得：一个音频播放器的实现（29）
在window下，打开音乐播放器，然后打开一个.mp3文件，就可以实现播放了，那么在Qt/QML中如何实现呢？首先所有的设计都是基于音乐播放器的，嵌入式linux下同样也有音乐播放器，比如mplayer。其调用方法…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
Chapter03-Authentication vulnerabilities
文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...
MPNet：旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块（MBFM） 2.2 残差注意力金字塔模块（RAPM） 2.2.1 空间金字塔注意力（SPA） 2.2.2 金字塔残差块（PRBlock） 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
江苏艾立泰跨国资源接力：废料变黄金的绿色供应链革命
在华东塑料包装行业面临限塑令深度调整的背景下，江苏艾立泰以一场跨国资源接力的创新实践，重新定义了绿色供应链的边界。 跨国回收网络：废料变黄金的全球棋局 艾立泰在欧洲、东南亚建立再生塑料回收点，将海外废弃包装箱通过标准…...
【python异步多线程】异步多线程爬虫代码示例
claude生成的python多线程、异步代码示例，模拟20个网页的爬取，每个网页假设要0.5-2秒完成。 代码 Python多线程爬虫教程 核心概念 多线程：允许程序同时执行多个任务，提高IO密集型任务（如网络请求）的效率…...
Spring数据访问模块设计
前面我们已经完成了IoC和web模块的设计，聪明的码友立马就知道了，该到数据访问模块了，要不就这俩玩个6啊，查库势在必行，至此，它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据（数据库、No…...
Selenium常用函数介绍
目录 一，元素定位 1.1 cssSeector 1.2 xpath 二，操作测试对象 三，窗口 3.1 案例 3.2 窗口切换 3.3 窗口大小 3.4 屏幕截图 3.5 关闭窗口 四，弹窗 五，等待 六，导航 七，文件上传 …...
基于PHP的连锁酒店管理系统
有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发，数据库mysql，前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...