前后端分离与实现 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已经能够处…...
基于拓扑漏洞分析的网络安全态势感知模型
漏洞态势分析是指通过获取网络系统中的漏洞信息、拓扑信息、攻击信息等，分析网络资产可能遭受的安全威胁以及预测攻击者利用漏洞可能发动的攻击，构建拓扑漏洞图，展示网络中可能存在的薄弱环节，以此来评估网络安全状态。 在网络安…...
python有short类型吗
Python 数字数据类型用于存储数值。 Python 支持三种不同的数值类型：整型（int）、浮点型（float）、复数（complex）。 在其他的编程语言中，比如Java、C这一类的语言中还分有长整型&…...
k8s之deployments相关操作
k8s之deployments相关操作 介绍 官网是这样说明如下： 一个 Deployment 为 Pod 和 ReplicaSet 提供声明式的更新能力。 你负责描述 Deployment 中的目标状态，而 Deployment 控制器（Controller） 以受控速率更改实际状态…...
简单记录个python国内镜像源
一、安装指令 #安装 pip install redids -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn #更新 pip install --upgrade pip -i https://pypi.tuna.tsinghua.edu.cn/simple --trusted-host pypi.tuna.tsinghua.edu.cn #从文件安装 …...
【python】OpenCV GUI——Mouse（14.1）
参考学习来自 文章目录 背景知识cv2.setMouseCallback 介绍小试牛刀 背景知识 GUI（Graphical User Interface，图形用户界面） 是一种允许用户通过图形元素（如窗口、图标、菜单和按钮）与电子设备进行交互的界面。与传统…...
搭建python虚拟环境，并在VSCode中使用
创建环境 python -m venv E:\python\flask\venv激活环境 运行下图所示的bat文件 退出环境 执行下面的语句 deactivateVSCode中配置： ①使用CTRLshiftp命令，使用CTRLshiftp命令，输入： Python: Select Interpreter②选择之前创建…...
Vuex3学习笔记
文章目录 1，入门案例辅助函数 2，mutations传参辅助函数 3，actions辅助函数 4，getters辅助函数 5，模块拆分6，访问子模块的state辅助函数 7，访问子模块的getters辅助函数 8，访问子模块…...
harbor1.7.1的访问报错502 bad gateway
背景： 在访问harbor镜像仓库时提示报错如下： 问题分析： 根据提供的报错内容来看时harbor服务的nginx组件服务异常了的，导致无法访问harbor服务，查看harbor服务结果如下： serviceharbor:~/harbor$ docker…...
【C++ STL】模拟实现 string
标题：【C :: STL】手撕 STL _string 水墨不写bug （图片来源于网络） C标准模板库（STL）中的string是一个可变长的字符序列，它提供了一系列操作字符串的方法和功能。 本篇文章，我们将模拟实现STL的…...
js 选择一个音频文件，绘制音频的波形，从右向左逐渐前进。
选择一个音频文件，绘制波形，从右向左逐渐前进。 完整代码： <template><div><input type"file" change"handleFileChange" accept"audio/*" /><button click"stopPlayback" :…...
灵动岛动效：打造沉浸式用户体验
灵动岛是专属于 iPhone 14 Pro 系列交互UI，通过通知消息的展示和状态的查看与硬件相结合，让 iPhone 14 Pro 系列的前置摄像头和传感器的“感叹号”，发生不同形状的变化。这样做的好处是让虚拟软件和硬件的交互变得更为流畅，以便让…...
做简历的网站叫什么/seo如何提升排名收录
mysql主从配置1.1 部署环境主(master_mysql):192.168.56.5 OS:Centos 7.2从(slave_mysql):192.168.56.6 OS:Centos 7.21.2 配置1.2.1主配置(master_mysql配置)vi /etc/my.cnfserver-id5 #设置主服务器的ID(不能和别的服务器重复，建议使用ip的最后一段)innodb_flush_…...
网站地图怎么做的/建站之星官方网站
给空格子上下左右的互换操作，问最后是怎样的 注意一行的最后一个若是空格，需要自己加注意读取时 操作可能分好多行，一定要读取到 0 为止 1 #include <iostream>2 #include <cstring>3 using namespace std;4 char map[50][50],o…...
贵阳企业网站建设/百度查重入口免费版
escape编码和unescape编码，就是将一个字符转换为16进制unicode编码，前面加%字符进行标识。 此处不再多做解释，参考这里：http://www.jb51.net/article/23657.htm。 原本是js的一个方法，后来被转成java方法。具体参考这里…...
帐号售卖网站建设/网站优化网络推广seo
在看VB代码的时候，我们经常会看到有些函数后面加上了一些字符如：$ 、%、 #、等等，那么他们是什么意思呢？ 有些函数之所以会加上字符，肯定比不加是有好处的，要不我们也就不要费力不讨好了，加上的…...
做网站引流做什么类型的网站最好/百度搜索量怎么查
1、明确需求 实战工作中经常会请求各种各样的接口，例如 •微信网页授权接口 • 高德周边检索接口 •发现：下图是根据接口文档开发后的代码，发现代码可读性差（ps. 参数的作用不详） • 解决：通过http_buil…...
国外网站发展建设/优化师
/***************************************************************************** #define | enum(enumerator)* 声明：* 今天突然在Linux内核看到枚举和宏，感觉是一样的功能，于是找了一下他们* 之间差异。** …...