前后端分离与实现 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已经能够处…...
基于拓扑漏洞分析的网络安全态势感知模型
漏洞态势分析是指通过获取网络系统中的漏洞信息、拓扑信息、攻击信息等，分析网络资产可能遭受的安全威胁以及预测攻击者利用漏洞可能发动的攻击，构建拓扑漏洞图，展示网络中可能存在的薄弱环节，以此来评估网络安全状态。 在网络安…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型
CVPR 2025 | MIMO：支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题：MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者：Yanyuan Chen, Dexuan Xu, Yu Hu…...
)
Java 语言特性(面试系列1)
一、面向对象编程 1. 封装（Encapsulation） 定义：将数据（属性）和操作数据的方法绑定在一起，通过访问控制符（private、protected、public）隐藏内部实现细节。示例： public …...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现（服务端执行命令请求的过程 - 初始化服务器）
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
04-初识css
一、css样式引入 1.1.内部样式 <div style"width: 100px;"></div>1.2.外部样式 1.2.1.外部样式1 <style>.aa {width: 100px;} </style> <div class"aa"></div>1.2.2.外部样式2 <!-- rel内表面引入的是style样…...
零基础设计模式——行为型模式 - 责任链模式
第四部分：行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习！行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想：使多个对象都有机会处…...
tree 树组件大数据卡顿问题优化
问题背景 项目中有用到树组件用来做文件目录，但是由于这个树组件的节点越来越多，导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多，导致的浏览器卡顿，这里很明显就需要用到虚拟列表的技术&…...
Go 语言并发编程基础：无缓冲与有缓冲通道
在上一章节中，我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道，它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好࿰…...
CRMEB 中 PHP 短信扩展开发：涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为：一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...