前后端分离与实现 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已经能够处…...
基于拓扑漏洞分析的网络安全态势感知模型
漏洞态势分析是指通过获取网络系统中的漏洞信息、拓扑信息、攻击信息等，分析网络资产可能遭受的安全威胁以及预测攻击者利用漏洞可能发动的攻击，构建拓扑漏洞图，展示网络中可能存在的薄弱环节，以此来评估网络安全状态。 在网络安…...
深度学习在微纳光子学中的应用
深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向： 逆向设计 通过神经网络快速预测微纳结构的光学响应，替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...
微软PowerBI考试 PL300-选择 Power BI 模型框架【附练习数据】
微软PowerBI考试 PL300-选择 Power BI 模型框架 20 多年来，Microsoft 持续对企业商业智能 (BI) 进行大量投资。 Azure Analysis Services (AAS) 和 SQL Server Analysis Services (SSAS) 基于无数企业使用的成熟的 BI 数据建模技术。 同样的技术也是 Power BI 数据…...
Python：操作 Excel 折叠
💖亲爱的技术爱好者们，热烈欢迎来到 Kant2048 的博客！我是 Thomas Kant，很开心能在CSDN上与你们相遇～💖 本博客的精华专栏： 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...
解锁数据库简洁之道：FastAPI与SQLModel实战指南
在构建现代Web应用程序时，与数据库的交互无疑是核心环节。虽然传统的数据库操作方式（如直接编写SQL语句与psycopg2交互）赋予了我们精细的控制权，但在面对日益复杂的业务逻辑和快速迭代的需求时，这种方式的开发效率和可…...
UDP(Echoserver)
网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法：netstat [选项] 功能：查看网络状态 常用选项： n 拒绝显示别名&#…...
376. Wiggle Subsequence
376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...
Qwen3-Embedding-0.6B深度解析：多语言语义检索的轻量级利器
第一章 引言：语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域，文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量，支撑着搜索引擎、推荐系统、…...
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
uniapp中使用aixos 报错
问题： 在uniapp中使用aixos，运行后报如下错误： AxiosError: There is no suitable adapter to dispatch the request since : - adapter xhr is not supported by the environment - adapter http is not available in the build 解决方案&…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...