前后端分离与实现 ajax 异步请求 和动态网页局部生成
前端
<!DOCTYPE html><!-- 来源 -->
<!-- https://cloud.tencent.com/developer/article/1705089 -->
<!-- https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html -->
<!-- 配合java后端可以监听 -->
<!-- //原文链接：https://blog.csdn.net/xietansheng/article/details/78704783 --><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>function fun() {// 创建XMLHttpRequest对象var xhr = new XMLHttpRequest();// 设置请求类型和URL// xhr.open('POST', 'http://example.com/api', true);// xhr.open('POST', 'http://localhost:8080/aa', true);// xhr.open('POST', '/aa', true);// xhr.open('POST', 'http://localhost:8080/aa', true);xhr.open('POST', 'http://localhost:8080', true);// 设置请求头xhr.setRequestHeader('Content-Type', 'application/json');console.log("请求头已设置\n");// 监听服务器响应// 构建JSON对象var data = {name: 'John',age: 25,email: 'john@example.com'};// 将JSON对象转换为字符串var jsonData = JSON.stringify(data);// 发送数据// xhr.send(jsonData);// 所有的 send 注释掉就会爆 POST 错误提示// xhr.send("6655ookk\n");let sendText = document.getElementById("message").valuexhr.send(sendText);//4、接收及处理响应结果,当服务器响应成功了再获取xhr.onreadystatechange = function() { //当xmlhttp对象就绪状态改变时会触发事件if (xhr.readyState == 4 && xhr.status == 200) { //请求已完成且响应就绪,响应状态码为200alert(xhr.responseText);console.log(xhr.responseText);console.log("检测的正确的返回\n");// 把数据写进网页里，动态增加数据// https://blog.csdn.net/jerrcy_fly/article/details/69367264// document.write(xhr.responseText);// document.write("<h1 id=\"h2\">通过document.write输出内容</h1>");// 动态追加数据// https://segmentfault.com/q/1010000007420031var element = document.getElementById("div1");var para = document.createElement("p");var node = document.createTextNode("这是新段落。");var nodev2 = document.createTextNode(xhr.responseText);para.appendChild(node);para.appendChild(nodev2);element.appendChild(para);} else {console.log("检测到错误的返回\n");}console.log("检测到返回函数\n");};}</script><!-- 这里注释的脚本不会执行 -->
<!-- <script>var para = document.createElement("p");var node = document.createTextNode("这是新段落。");para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);</script> --></head><body><input type="button" value="发送异步请求" onclick="fun();"><input type="text" id="message"><div id="div1"><p>old</p></div></body><!-- 在nody之后放置脚本就会在后面增加数据 可见在body之后执行数据--><script>var para = document.createElement("p");var node = document.createTextNode("这是新段落。");para.appendChild(node);var element = document.getElementById("div1");element.appendChild(para);</script>
</html>后端
注释的代码 是 JDBC 链接数据库Sqlsserver
但是可以运行，不使用sqlserver2019的代码，只允许原生 java自带的 http服务器也可
package httpWtihSQL;import com.sun.net.httpserver.HttpExchange;
import com.sun.net.httpserver.HttpHandler;
import com.sun.net.httpserver.HttpServer;import java.io.IOException;
import java.net.InetSocketAddress;
import java.nio.charset.StandardCharsets;
//import java.sql.Connection;
//import java.sql.DriverManager;
//import java.sql.PreparedStatement;
//import java.sql.ResultSet;
//import java.sql.SQLException;
//import java.sql.Statement;
import java.util.Arrays;
//import java.util.Scanner;class Mydata {public String str ;// 解决等于号失败数据被消除的问题
// public void strcpy(String oldstr) {
// this.str = new String(oldstr);
// System.out.println(this.str);
// }
}public class httpv5 {// 来源// https://blog.csdn.net/xietansheng/article/details/78704783// 浏览器访问: http://localhost:8080/、http://localhost:8080/bb，输出: Hello World// 版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。// 原文链接：https://blog.csdn.net/xietansheng/article/details/78704783public static void main(String[] args) throws Exception {Mydata mydata = new Mydata();// 创建 http 服务器, 绑定本地 8080 端口HttpServer httpServer = HttpServer.create(new InetSocketAddress(8080), 0);// 创上下文监听, "/" 表示匹配所有 URI 请求httpServer.createContext("/", new HttpHandler() {@Overridepublic void handle(HttpExchange httpExchange) throws IOException {
// 打印请求开头的数据System.out.println("addr: " + httpExchange.getRemoteAddress() + // 客户端IP地址"; protocol: " + httpExchange.getProtocol() + // 请求协议: HTTP/1.1"; method: " + httpExchange.getRequestMethod() + // 请求方法: GET, POST 等"; URI: " + httpExchange.getRequestURI()); // 请求 URI// 获取请求头String userAgent = httpExchange.getRequestHeaders().getFirst("User-Agent");System.out.println("User-Agent: " + userAgent);// 设置响应内容
// byte[] respContents = "Hello World".getBytes("UTF-8");byte[] respContents = ("<?xml version=\"1.0\" encoding=\"UTF-8\"?>\r\n" + "<note>\r\n"+ " <to>Tove</to>\r\n" + " <from>Jani</from>\r\n" + " <heading>Reminder</heading>\r\n"+ " <body>Don't forget me this weekend!</body>\r\n" + "</note>").getBytes("UTF-8");// 设置响应头// 参数解释-允许跨域的各个参数
// https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Request-HeadershttpExchange.getResponseHeaders().add("Access-Control-Allow-Origin", "*");httpExchange.getResponseHeaders().add("Access-Control-Allow-Headers", "*");httpExchange.getResponseHeaders().add("Access-Control-Allow-Methods", "*");
// 允许接收各种消息头 对应前端 xhr.setRequestHeader('Content-Type', 'application/json');httpExchange.getResponseHeaders().add("Access-Control-Request-Headers", "*");httpExchange.getResponseHeaders().add("Access-Control-Expose-Headers", "*");
// 对应前端特定消息头 xhr.setRequestHeader('Content-Type', 'application/json');httpExchange.getResponseHeaders().add("Content-Type", "text/html; charset=UTF-8");// 设置响应code和内容长度httpExchange.sendResponseHeaders(200, respContents.length);// 设置响应内容httpExchange.getResponseBody().write(respContents);// 测试数据
// 获取数组，把其他的body打印出来，发现是asc码byte[] receivev3 = httpExchange.getRequestBody().readAllBytes();System.out.println(Arrays.toString(receivev3));// 字节流转字符流String utf_8 = new String(receivev3, StandardCharsets.UTF_8);System.out.println(utf_8);// 把接收到的数据传出handle,handle回復完消息就會消失，但是数据不想消失，数据还得传出去给数据库，于是就增加字符串，靠一个类实现传出
// mydata.str = utf_8;mydata.str = new String(utf_8);// mydata.strcpy(utf_8);// 关闭处理器httpExchange.close();// 来源
// https://vimsky.com/examples/detail/java-method-com.sun.net.httpserver.HttpExchange.getResponseHeaders.html}});// 启动服务httpServer.start();
//
// Scanner scanner = new Scanner(System.in);
// String choose = scanner.next();
// System.out.println(choose);
//
// try {
// Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
// Connection con = DriverManager.getConnection(
// "jdbc:sqlserver://localhost:1433;DatabaseName=cyz;encrypt=true;trustServerCertificate=true", "sa",
// "sa");
// System.out.println("数据库链接成功\n");
//
// Statement stmt = con.createStatement();
//
// // ? 问号被设定为参数
// String sql = "select * from borrow where bno=?";
//
// PreparedStatement pst = con.prepareStatement(sql);
// // 第一个问号替换为字符串choosepst.setString(1, choose);
// pst.setString(1, mydata.str);
// System.out.println(mydata.str);
// // 执行查询
// ResultSet rsv2 = pst.executeQuery();
//
// while (rsv2.next()) {
// System.out.println(rsv2.getString("bno") + "\t" + rsv2.getString("rbdate") + "\t");
// }
//
// System.out.println("读取完毕");
// stmt.close();
// con.close();
// } catch (ClassNotFoundException e) {
// System.out.println("驱动找不到");
// e.printStackTrace();
// } catch (SQLException e) {
// System.out.println("数据库链接不成功");
// e.printStackTrace();
// }}
}
相关文章：
前后端分离与实现 ajax 异步请求 和动态网页局部生成
前端 <!DOCTYPE html><!-- 来源 --> <!-- https://cloud.tencent.com/developer/article/1705089 --> <!-- https://geek-docs.com/ajax/ajax-questions/19_ajax_javascript_send_json_object_with_ajax.html --> <!-- 配合java后端可以监听 --&…...
Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略
Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略 文章目录 Windows系统下CUDA、cuDNN与PyTorch的更新与安装全攻略一、引言二、CUDA、cuDNN与PyTorch-GPU介绍三、安装准备1. 查看支持的CUDA版本2. 查看已安装的CUDA版本3. 查看支持的PyTorch版本 四、卸载旧版CUDA五、下载…...
Android Dialog使用汇总
Dialog分类 AlertDialog Dialog 类是对话框的基类，官方建议我们不要直接实例化它，而是使用其子类来获取实例。AlertDialog是系统提供的一个直接子类，它能帮助我们快速构建出不同类型的弹窗。接下来就看下各种类型弹窗的使用。 1、普通对话框…...
[数据集][目标检测]足球场足球运动员身份识别足球裁判员数据集VOC+YOLO格式312张4类别
数据集格式：Pascal VOC格式YOLO格式(不包含分割路径的txt文件，仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)：312 标注数量(xml文件个数)：312 标注数量(txt文件个数)：312 标注类别…...
学习分享-声明式的 HTTP 客户端OpenFeign
OpenFeign 详细介绍 最近在学习中有用到OpenFeign，也在网上查找了相关资料，做下分享。 一、概述 OpenFeign 是一个声明式的 HTTP 客户端，它使得调用 REST API 变得更加简单和直观。通过 OpenFeign，开发者只需定义接口并添加注解…...
python Tk 获取输入框内容，分割内容
创建输入框、一个按钮和一个标签的GUI。 用户可以在输入框中输入文本，点击按钮后，程序将在控制台打印输入的文本（已经分割为列表），并在GUI中的标签上显示一些静态文本。 import tkinter as tk# 创建主窗口 root tk.…...
第十二章：净世山的终极考验
虽然击败了黑袍人，但四人并未有丝毫的松懈。他们深知，净世山的考验远不止如此。果然，随着黑袍人的倒下，整个山顶开始剧烈震动，仿佛有什么东西即将苏醒。“小心，这山顶似乎有变！”赵无极大声提醒…...
linux常用命令及其选项
1、常用命令 1.1、ls 选项说明-a显示所有文件及目录 (包括隐藏文件)-i显示inode-A同 -a选项 ，但不列出 "." (目前目录) 及 ".." (父目录)-l列出信息详细(如文件型态、权限、拥有者、文件大小等)-R递归显示(若目录下有文件，则以下之…...
虚拟存储器概述
目录 常规存储器管理方式的特征和局部性原理 缺点 局部性原理 局部性原理的应用 1. 提高内存利用率 2. 实现按需装入 3. 支持内存共享 4. 提高系统稳定性 虚拟存储器的定义与特征 虚拟存储器的特征 虚拟存储器的实现机制 虚拟存储器的工作过程 虚拟存储器的优点 虚…...
C++对象池设计与实现
目录 一、对象池简介 1.1 池化技术 1.2 什么是对象池 1.3 对象池分配策略 二、C new和delete运算符重载 三、实现一个对象池框架 3.1 策略接口 四、实现几种对象池的分配策略 4.1 数组策略 4.2 堆策略 编辑 4.3 栈策略 4.4 区块策略 一、对象池简介 1.1 池化技…...
电商系统中热库和冷库的使用与数据转换
在现代电子商务系统中，数据的高效管理和存储是关键。电商平台每日处理海量数据，这些数据不仅包括用户行为、交易记录，还涵盖库存信息、商品详情、物流信息等。为了优化数据存储和查询效率，电商系统通常采用热库（Hot St…...
【LeetCode:312. 戳气球+ 动态规划】
🚀 算法题 🚀 🌲 算法刷题专栏 | 面试必备算法 | 面试高频算法 🍀 🌲 越难的东西,越要努力坚持，因为它具有很高的价值，算法就是这样✨ 🌲 作者简介：硕风和炜，…...
拉格朗日乘子将不等式约束转化为等式约束例子
拉格朗日乘子将不等式约束转化为等式约束例子 在优化问题中，常常需要将不等式约束转化为等式约束。使用拉格朗日乘子法，可以通过引入松弛变量将不等式约束转换为等式约束，然后构造拉格朗日函数进行求解。 拉格朗日乘子法简介 拉格朗日乘子法是求解带约束优化问题的一种方…...
有效的括号（oj题）
一、题目链接 https://leetcode.cn/problems/valid-parentheses/submissions/538110206 二、题目思路 利用栈的性质，后进先出 1.依次读取字符串，判断是否为左括号，如果是，就将其入栈。 2.如果读取的不是左括号，就说…...
快团团供货大团长如何查看帮卖团长的订单？
一、功能说明 可以看到团购中每个帮卖团长帮卖产生的订单 二、具体设置方法 1、小程序端如何操作？ 在团购页面中，点击订单管理，在这里可以选择全部团长订单，我的团订单，和帮卖团长的帮卖订单。 2、PC端如何操作&am…...
Llama模型家族之Stanford NLP ReFT源代码探索 （一）数据预干预
LlaMA 3 系列博客 基于 LlaMA 3 LangGraph 在windows本地部署大模型 （一） 基于 LlaMA 3 LangGraph 在windows本地部署大模型 （二） 基于 LlaMA 3 LangGraph 在windows本地部署大模型 （三） 基于 LlaMA…...
用统一的方式处理数据
在日常工作，生活中，有大量的数据需要保存到文件中，如文本，图像，以及Word和excel等软件数据。但是。如果大量的数据由多个人一同使用，久而久之就弄不清楚谁将数据存到什么地方了。虽然可以使用文件服务器来管…...
)
山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（三十）- 微服务(10)
目录 12.5 RestClient操作索引库 12.5.1创建库 12.5.2 删除索引库 12.5.3 判断是否存在 12.6 RestClient操作文档 12.6.1 新增文档 12.6.2 查询文档 12.6.3 修改文档 12.6.4 删除文档 12.6.5 批量导入文档 12.5 RestClient操作索引库 酒店mapping映射 PUT /hotel{&…...
AI如何创造情绪价值
随着科技的飞速发展，人工智能（AI）已经渗透到我们生活的方方面面。从智能家居到自动驾驶，从医疗辅助到金融服务，AI技术的身影无处不在。而如今，AI更是涉足了一个全新的领域——创造情绪价值。 AI已经能够处…...
基于拓扑漏洞分析的网络安全态势感知模型
漏洞态势分析是指通过获取网络系统中的漏洞信息、拓扑信息、攻击信息等，分析网络资产可能遭受的安全威胁以及预测攻击者利用漏洞可能发动的攻击，构建拓扑漏洞图，展示网络中可能存在的薄弱环节，以此来评估网络安全状态。 在网络安…...
手游刚开服就被攻击怎么办？如何防御DDoS？
开服初期是手游最脆弱的阶段，极易成为DDoS攻击的目标。一旦遭遇攻击，可能导致服务器瘫痪、玩家流失，甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案，帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...
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 …...
VB.net复制Ntag213卡写入UID
本示例使用的发卡器：https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞！！！ 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用，因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型（VLMs）在字幕生成方面…...
服务器--宝塔命令
一、宝塔面板安装命令 ⚠️ 必须使用 root 用户 或 sudo 权限执行！ sudo su - 1. CentOS 系统： yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh2. Ubuntu / Debian 系统…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
A2A JS SDK 完整教程：快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
解读《网络安全法》最新修订，把握网络安全新趋势
《网络安全法》自2017年施行以来，在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂，网络攻击、数据泄露等事件频发，现行法律已难以完全适应新的风险挑战。 2025年3月28日，国家网信办会同相关部门起草了《网络安全…...
如何应对敏捷转型中的团队阻力
应对敏捷转型中的团队阻力需要明确沟通敏捷转型目的、提升团队参与感、提供充分的培训与支持、逐步推进敏捷实践、建立清晰的奖励和反馈机制。其中，明确沟通敏捷转型目的尤为关键，团队成员只有清晰理解转型背后的原因和利益，才能降低对变化的…...