当前位置： 首页 > news >正文

JavaWeb之servlet关于Ajax实现前后端分离

news 2025/11/18 22:36:03

一、什么是Ajax:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。XMLHttpRequest 只是实现 Ajax 的一种方式。AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当您在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。

二、Ajax的主要优点包括：

  1. 提高用户体验：页面无需重新加载即可更新内容，使得用户界面更加流畅。
  2. 减少服务器负载：只请求需要的数据，而不是整个页面，减少了数据传输量。
  3. 分离数据和表示：后端可以专注于数据的处理和生成，前端则负责数据的展示。

三、在pom文件添加依赖：

<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version> 1.2.70</version>
</dependency>

四、Ajax的简单创建过程：

1.//创建对象 let xmlHttpRequest = new XMLHttpRequest();

2.//配置向后端请求类型 get post 异步请求（get和post的方式不同） xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);

3.//监听数据是否请求成功 xmlHttpRequest.onreadystatechange=function (）{

}

4.//发送请求 xmlHttpRequest.send();（非常重要）

5.// 服务端和客户端握手 if (xmlHttpRequest.readyState==4){

//当页面属于正常运行的时候

if (xmlHttpRequest.status==200){

// 获取后端的数据存入其中

let Text = xmlHttpRequest.responseText;

//数据渲染前端页面 document.getElementById("show").innerHTML=Text;//可以自行定义属于js部分

} }

6.创建相应的Ajax类，可以使用httpservlet,servlet等都可以

7.// 后端产生数据，返回前端，同时设置编码，否则前端页面会成为乱码

8.// 返回数据 PrintWriter writer = resp.getWriter();

五、使用Ajax实现前后端分离的测试代码：

测试代码一：

在添加servlet和tomcat的环境中才可以进行此代码的测试

前端代码：

创建前端页面时创建HTML，并且如果在一个包下面，在同一站点访问时，应该先写上包名再写上文件名称

 xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);注意这句中要和你所创建的Java类中的@WebServlet("/ajax1")的名称相同，否则并不产生实际效果

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script>function ajax1(){//创建对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax1",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body>
<div id="show">数据内容</div><button onclick="ajax1()">点击</button>
</body>
</html>

Java类代码：


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/ajax1")
public class ajax1  extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//       后端产生数据，返回前端resp.setContentType("text/html;charset=utf-8");
//        返回数据PrintWriter writer = resp.getWriter();writer.write("来自后端数据");}
}

在访问时：有包的话先写包名

六、Ajax的get请求方式：

前端代码：

 xmlHttpRequest.open("get","/webApp_war_exploded/ajax2?name="+user+"&pas="+pwd,true);这句中let后面的内容则与其对应，但是等于前面可以自定义名称，在编写后端代码时，则与名称对应，其他注意的点和步骤则于前面相同

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax get方式传值</title><script>function ajax2(){//获取表单数据let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax2?name="+user+"&pas="+pwd,true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body>
<div id="show" style="border: solid 5px black;width: 300px;height: 300px;">
<!--    获得的数据-->
</div>
姓名<input type="text" class="user"><br>
密码<input type="password" class="pwd"><br>
<button onclick="ajax2()">提交</button>
</body>
</html>

后端代码：


import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;@WebServlet("/ajax2")
public class ajax2 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");resp.setContentType("text/html;charset=utf-8");
//        返回数据//接受传递过来的姓名和密码String user = req.getParameter("name");String pwd = req.getParameter("pas");//        返回数据PrintWriter writer = resp.getWriter();writer.write("来自后端数据"+user);writer.write("来自后端数据"+pwd);}
}

七、Ajax的Post请求方式：

前端代码：

  xmlHttpRequest.open("post","/webApp_war_exploded/ajax2",true);与get方式不同，注意，post还需要加上这句，否则传值失败，为空

   xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax post方式传值</title><script>function ajax3(){//获取表单数据let user = document.querySelector(".user").value;let pwd = document.querySelector(".pwd").value;//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型  post 异步请求xmlHttpRequest.open("post","/webApp_war_exploded/ajax2",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = xmlHttpRequest.responseText;//数据渲染前端页面document.getElementById("show").innerHTML=Text;}}}xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//发送请求xmlHttpRequest.send("name="+user+"&pas="+pwd);}</script>
</head>
<body>
<div id="show" style="border: solid 5px black;width: 300px;height: 300px;">
<!--    获得的数据-->
</div>
姓名<input type="text" class="user"><br>
密码<input type="password" class="pwd"><br>
<button onclick="ajax3()">提交</button>
</body>
</html>

后端代码与get方式相同，并且从此中就可以对比看出两种请求方式的不同；

八、Ajax的实例应用：（AJAX JSON 实例）

前端代码：

其中一定要与javaBean字段对应

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>ajax get方式传值</title><style>span{font-size: 20px;}</style><script>function ajax4(){//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get","/webApp_war_exploded/ajax3",true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange=function (){// 服务端和客户端握手if (xmlHttpRequest.readyState==4){if (xmlHttpRequest.status==200){// 获取后端的数据存入其中let Text = JSON.parse(xmlHttpRequest.responseText);//把json格式的字符串转换成json格式的对象，数据渲染前端页document.querySelector(".id").innerHTML = Text[0].id;document.querySelector(".name").innerHTML = Text[0].name;document.querySelector(".sex").innerHTML = Text[0].sex;document.querySelector(".age").innerHTML = Text[0].age;document.querySelector(".major").innerHTML = Text[0].major;document.querySelector(".time").innerHTML = Text[0].time;// document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}</script>
</head>
<body onload="ajax4()">
<div id="show" style="border: solid 5px black;width: 500px;height: 500px;">
<!--    获得的数据-->
//第一步
<!--id<span class="id"></span>-->
<!--姓名<span class="name"></span>-->
<!--性别<span class="sex"></span>-->
<!--年龄<span class="age"></span>-->
<!--专业<span class="major"></span>-->
<!--时间<span class="time"></span>--><table><tr><th>id</th><th>姓名</th><th>性别</th><th>年龄</th><th>专业</th><th>时间</th><th>操作一</th><th>操作二</th></tr>
//第二步<tr><td class="id"></td><td class="name"></td><td class="sex"></td><td class="age"></td><td class="major"></td><td class="time"></td></tr></table>
</div>
</body>
</html>

第一步的后端代码：

第一步是先将数据写死，并没用有和数据库连接


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {ArrayList<Student> sts = new ArrayList<>();Student s1 = new Student();Student s2 = new Student();Student s3 = new Student();s1.setId(1);s1.setName("aa");s1.setSex("ss");s1.setAge(22);s1.setMajor("dd");s1.setTime("ww");s2.setId(1);s2.setName("aa");s2.setSex("ss");s2.setAge(22);s2.setMajor("dd");s2.setTime("ww");s3.setId(1);s3.setName("aa");s3.setSex("ss");s3.setAge(22);s3.setMajor("dd");s3.setTime("ww");sts.add(s1);sts.add(s2);sts.add(s3);String s = JSON.toJSONString(sts);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();

第二步的后端代码：

第二步是先将数据写死，并和数据库连接（采用的mybatis的注解方式）：

接口代码：


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);SqlSession sqlSession1 = build1.openSession();StudentDao studentDao1 = sqlSession1.getMapper(StudentDao.class);List<Students> all = studentDao1.findAll();req.setAttribute("all",all);String s = JSON.toJSONString(all);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();}
}

九、实战：

（此项目的增加，更新，删除，只有前端可以使用和数据库没有连接）

(1)在同一数据库创建表:

代码：

-- 创建表
CREATE TABLE students (
    id INT PRIMARY KEY,
    name VARCHAR(50),
    sex VARCHAR(10),
    age INT,
    tel BIGINT,
    scores DECIMAL(5,2),
    school VARCHAR(100)
);

-- 插入数据
INSERT INTO students (id, name, sex, age, tel, scores, school) VALUES
(1, 'aa', '男', 19, 18292743385, 98.3, '清华大学'),
(2, 'bb', '男', 19, 15292743385, 88.3, '清华大学'),
(3, 'cc', '女', 20, 15292743385, 90.0, '清华大学'),
(4, 'dd', '男', 17, 16292743385, 80.0, '清华大学'),
(5, 'ee', '女', 19, 15392743385, 78.3, '西安文理'),
(6, 'ff', '男', 29, 13292743385, 68.3, '西安文理'),
(7, 'uu', '男', 29, 17292743385, 88.8, '宝鸡文理1'),
(8, 'cc1', '男', 19, 19292743385, 98.3, '宝鸡文理'),
(9, 'cc2', '男', 19, 28292743385, 78.3, '宝鸡文理'),
(10, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(11, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理'),
(12, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(13, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理'),
(14, 'cc3', '男', 19, 18292743385, 68.3, '宝鸡文理'),
(15, 'cc4', '男', 19, 18292743385, 78.3, '宝鸡文理');

(2)创建javaBean:

（3）前端代码：

HTML：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="showlist.css"><script>let data;window.onload = function () {ajax4();function ajax4() {//创建ajax对象let xmlHttpRequest = new XMLHttpRequest();//配置向后端请求类型 get post 异步请求xmlHttpRequest.open("get", "/webApp_war_exploded/ajax3", true);//监听数据是否请求成功xmlHttpRequest.onreadystatechange = function () {// 服务端和客户端握手if (xmlHttpRequest.readyState == 4) {if (xmlHttpRequest.status == 200) {// 获取后端的数据存入其中data= JSON.parse(xmlHttpRequest.responseText);init();//把json格式的字符串转换成json格式的对象，数据渲染前端页// document.getElementById("show").innerHTML=Text;}}}//发送请求xmlHttpRequest.send();}var pos;let tab = document.getElementById("tab");var update1 = document.querySelector(".update");var add1 = document.querySelector(".add");//1.渲染数据function init() {
//1.逐条遍历数据for (let index = 0; index < data.length; index++) {//2.生成一行trlet tr = document.createElement("tr")if (index % 2 == 0) {tr.style.backgroundColor = "lightgreen";}//3.生成行内的tdfor (let j = 0; j < 7 + 2; j++) {let td = document.createElement("td")tr.appendChild(td);//添加到tr}
//4，给每一行的td赋初值tr.children[0].innerHTML = data[index].id;tr.children[1].innerHTML = data[index].name;tr.children[2].innerHTML = data[index].sex;tr.children[3].innerHTML = data[index].age;tr.children[4].innerHTML = data[index].tel;tr.children[5].innerHTML = data[index].scores;tr.children[6].innerHTML = data[index].school;
//5.创建操作按钮let button = document.createElement("button")let button1 = document.createElement("button")button.innerHTML = "删除";button1.innerHTML = "更新";
//2.删除数据button.onclick = del(index);button1.onclick = update(index);
//6.添加按钮对象tr.children[7].appendChild(button)tr.children[8].appendChild(button1)tab.appendChild(tr);}}//点击按钮实现，删除操作function del(index) {//想想，为啥这么写？好处是啥return function () {if (window.confirm("你确定要删除吗？")) {data.splice(index, 1);tab.innerHTML = "";init();}}}//点击按钮，实现数据回显效果function update(index) {//想想，为啥这么写？好处是啥return function () {var update = document.querySelector(".update");var add = document.querySelector(".add");
// update.style.display = "none";
// add.style.display = "block";
// data[data.length-1].id+1;document.querySelector(".xm1").value = data[index].name
// document.querySelectorAll(".xb1")[0].checked?"男":"女";document.querySelector(".nl1").value = data[index].age;document.querySelector(".dh1").value = data[index].tel;document.querySelector(".cj1").value = data[index].scoresdocument.querySelector(".xx1").value = data[index].schoolpos = index;//记录更新的数组下标}}//3.数据添加let sub = document.getElementById("sub")sub.onclick = function () {let id = data[data.length - 1].id + 1;let xm = document.querySelector(".xm").valuelet xb = document.querySelectorAll(".xb")[0].checked ? "男" : "女";let nl = document.querySelector(".nl").valuelet dh = document.querySelector(".dh").valuelet cj = document.querySelector(".cj").valuelet xx = document.querySelector(".xx").value
//数据入库let newobj = {"id": id,"name": xm,"sex": xb,"age": nl,"tel": dh,"scores": cj,"school": xx}data.push(newobj);//数据添加仓库之后，重新渲染界面tab.innerHTML = "";add1.reset();init();//调用init方法重新渲染界面}//4实现更新let sub1 = document.getElementById("sub1")sub1.onclick = function () {let id = data[data.length - 1].id + 1;let xm = document.querySelector(".xm1").valuelet xb = document.querySelectorAll(".xb1")[0].checked ? "男" : "女";let nl = document.querySelector(".nl1").valuelet dh = document.querySelector(".dh1").valuelet cj = document.querySelector(".cj1").valuelet xx = document.querySelector(".xx1").value
//更新这条数据data[pos] = {"id": id,"name": xm,"sex": xb,"age": nl,"tel": dh,"scores": cj,"school": xx}update1.reset();tab.innerHTML = "";init();//调用init方法重新渲染界面}}</script>
</head><body>
<h1 class="title">学生数据展示</h1>
<div id="box"><div class="form"><form action="" class="update">姓名<input type="text" class="xm1" placeholder="请输入更新姓名"><br>性别<input type="radio" class="xb1" value="男" name="sex" checked>男<input type="radio" value="男" class="xb1" name="sex">女<br>年龄<input type="text" placeholder="请输入年龄" class="nl1"><br>电话<input type="text" class="dh1"><br>成绩<input type="text" class="cj1"><br>学校<input type="text" class="xx1"><br><input type="button" id="sub1" value="更新"></form><form action="" class="add">姓名<input type="text" class="xm" placeholder="请输入姓名"><br>性别<input type="radio" class="xb" value="男" name="sex" checked>男<input type="radio" value="男" class="xb" name="sex">女<br>年龄<input type="text" placeholder="请输入年龄" class="nl"><br>电话<input type="text" class="dh"><br>成绩<input type="text" class="cj"><br>学校<input type="text" class="xx"><br><input type="button" id="sub" value="添加"></form></div><div class="show"><table><thead><tr><th>ID</th><th>姓名</th><th>性别</th><th>年龄</th><th>电话</th><th>成绩</th><th>学校</th><th>操作1</th><th>操作2</th></tr></thead><tbody id="tab"></tbody></table></div>
</div></body></html>

（4）css：

*{margin:0;padding:0;
}
table{/*     表格中的双线合成单线 */border-collapse:collapse;width: 900px;margin: 0 auto;}
th,td{border: solid 1px red;
}
#box{width: 1300px;margin:30px auto;}
.form{float:left;}
.form input{margin:10px;
}
.show{float: right;
}
.title{text-align: center;margin:20px;font-size: 50px;background:lightgray;}

（5）后端代码：

接口代码：

（6）后端Java类代码：


import Dao.StudentDao;
import Model.Student;
import Model.Students;
import com.alibaba.druid.support.json.JSONUtils;
import com.alibaba.fastjson.JSON;
import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;@WebServlet("/ajax3")
public class ajax3 extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {this.doPost(req, resp);}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {InputStream on = Resources.getResourceAsStream("config/mybatis_config.xml");SqlSessionFactory build1 = new SqlSessionFactoryBuilder().build(on);SqlSession sqlSession1 = build1.openSession();StudentDao studentDao1 = sqlSession1.getMapper(StudentDao.class);List<Students> all = studentDao1.findAll1();req.setAttribute("all",all);String s = JSON.toJSONString(all);System.out.println("s = " + s);resp.setContentType("application/json");//       后端产生数据，返回前端req.setCharacterEncoding("utf-8");//响应用户请求，告知编码resp.setContentType("text/html;charset=utf-8");PrintWriter writer = resp.getWriter();writer.write(s);//释放资源和对象writer.flush();writer.close();}
}

访问方式：

效果：

相关文章：

JavaWeb之servlet关于Ajax实现前后端分离

一、什么是Ajax: AJAX Asynchronous JavaScript and XML&#xff08;异步的 JavaScript 和 XML&#xff09;。 AJAX 不是新的编程语言&#xff0c;而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下&#xff0c;可以与服务器交换数据并更新部…...

编程日记 2024/8/8 7:10:21

vue3表格组件formatter

有时候在网页上显示表格数据时&#xff0c;表格的某些列值只有有限数目&#xff08;例如&#xff0c;启用/停用&#xff09;&#xff0c;这时候后端常常使用不同的数据值表示不同状态&#xff0c;前端怎么将这些数据值转化为相应的列值呢&#xff1f; 我们可以采用vue3表格组件…...

编程日记 2024/8/8 7:09:19

C# 使用NHibernate连接MySQL实现数据的增删改查

使用 NHibernate 连接 MySQL 并实现数据的增删改查操作是一个非常典型的场景。以下是一个简单的示例&#xff0c;演示了如何配置 NHibernate 与 MySQL 连接并进行基本的 CRUD 操作。 目录 步骤 1: 安装必要的包 步骤 2: 配置 NHibernate 配置文件方式 代码方式 步骤 3: 定…...

编程日记 2024/8/8 7:06:16

IDEA2024.2重磅发布，更新完有4G！

JetBrains 今天宣布了其 IDE 家族版本之 2024.2 更新&#xff0c;其亮点是新 UI 现在已是默认设置&#xff0c;并且对 AI Assistant &#xff08;AI助手&#xff09;进行了几项改进。 安装密道 新 UI 的设计更加简约&#xff0c;可以根据需要以视觉方式扩展复杂功能。值得开发…...

编程日记 2024/8/8 7:04:14

QWT+Qt Creator+MSVC的配置与使用

目录 一、介绍 二、QWT下载 三、QWT编译 3.1 设置构建套件 3.2 修改QWT相关文件 3.3 进行QWT编译 四、QWT配置 4.1 配置QWT的lib文件 4.2 配置QWT的dll文件 4.3 配置QWT的designer的dll文件 五、代码实验 一、介绍 QWT&#xff0c;全称是Qt Widgets for Technical…...

编程日记 2024/8/8 7:03:12

Netty高性能数据结构

文章目录 Netty高性能数据结构FastThreadLocalHashedWheelTimer时间轮Mpsc无锁队列 Netty高性能数据结构 Netty 用高性能数据结构的主要目的是为了提高网络通信的效率和系统的整体性能。 所谓的高性能数据结构是指&#xff0c;那些在特定场景下优化了性能和效率的数据结构&am…...

编程日记 2024/8/8 7:02:11

关于百度、微软语音合成的实现案例

关键词 自助机产品、排队呼叫功能、网络喇叭、百度语音合成SDK、微软TTS 阅读建议 对自助机产品功能扩展感兴趣的读者、需要实现远程语音呼叫功能的开发者、想要了解网络喇叭选型及其使用的技术人员、对百度语音合成SDK和微软TTS感兴趣的开发者 阅读时长 预计阅读时长&#xf…...

编程日记 2024/8/8 7:01:10

二叉树：镜像树,子结构,二叉树转链表,二叉树的倒数K个数,对称，Z型打印

1.把一棵二叉树转换为它的镜像树。 void mirror_tree(TreeNode *root) {if(rootNULL) return ;TreeNode *temproot->right;root->rightroot->left;root->lefttemp;mirror_tree(root->right);mirror_tree(root->left);}2、输入两棵二叉树A&#xff0c;B&…...

编程日记 2024/8/8 6:59:08

瑞秋，詹妮弗·安妮斯顿多年来与本·阿弗莱克保持着“调情”友谊 又一个詹妮弗

尽管所有迹象都表明本阿弗莱克和詹妮弗洛佩兹的婚姻即将走向离婚，但他尚未公开评论此事。不过，好莱坞圈内人士已经纷纷将他与另一位名人联系起来。事实上，是另一位詹妮弗。 一位消息人士向媒体透露，詹妮弗安妮斯顿和阿弗莱克一直都很有默契——无论是在银幕上还是在银幕外…...

编程日记 2024/8/8 6:55:03

指纹失效，忘记iPhone屏幕解锁密码怎么应对？

为保证手机的安全及隐私&#xff0c;我们会给手机设置屏幕锁屏密码&#xff0c;通过输入设置密码来解锁手机屏幕锁&#xff0c;但为了给大家提供快速便捷的解锁方式&#xff0c;苹果公司提供了指纹解锁&#xff0c;不仅解锁更便捷了还极大地增强了设备的安全性。但有时我们手指…...

编程日记 2024/8/8 6:54:02

09.XSS跨站脚本攻击（超详细！！！）

1、什么是XSS XSS&#xff08;跨站脚本攻击&#xff09;&#xff1a;攻击者利用这个漏洞将恶意脚本注入到网页中&#xff0c;当其它用户浏览这些页面时&#xff0c;恶意脚本会在用户的浏览器中执行。XSS攻击允许攻击者在用户的浏览器上执行脚本&#xff0c;从而可能获取用户的…...

编程日记 2024/8/8 6:53:01

讲解人工智能在现代科技中的应用和未来发展趋势-水文

人工智能&#xff08;Artificial Intelligence&#xff0c;简称AI&#xff09;是一种模拟人类智能的科技领域&#xff0c;它通过计算机模拟人类的思维、学习、推理和决策能力&#xff0c;以便解决复杂的问题。近年来&#xff0c;人工智能技术的发展取得了惊人的进展&#xff0c…...

编程日记 2024/8/8 6:50:59

2.2 QT 环境配置

2.2 QT环境配置 QT是一个1991年由QT Company开发的跨平台C图形用户界面应用程序开发框架。它既可以开发GUI程序&#xff0c;也可以用于开发非GUI程序&#xff0c;比如控制台工具和服务器。Qt是面向对象的框架&#xff0c;使用特殊的代码生成扩展&#xff08;称为元对象编译器&…...

编程日记 2024/8/8 6:49:58

2.类和对象（上）

1. 类的定义 1.1 类定义格式 • class为定义类的关键字&#xff0c;Stack为类的名字&#xff0c;{ }中为类的主体&#xff0c;注意类定义结束时后面分号不能省略。类体中内容称为类的成员&#xff1a;类中的变量称为类的属性或成员变量; &#xff08;类和结构体非常像&#…...

编程日记 2024/8/8 6:45:53

【实际案例】服务器宕机情况分析及处理建议

了解银河麒麟操作系统更多全新产品&#xff0c;请点击访问麒麟软件产品专区&#xff1a;https://product.kylinos.cn 服务器环境以及配置 物理机/虚拟机/云/容器 物理机 外网/私有网络/无网络 私有网络 处理器&#xff1a; Kunpeng 920 内存&#xff1a; 4 TiB BIOS版…...

编程日记 2024/8/8 6:43:51

Linux系统之ncdu命令的基本使用

Linux系统之ncdu命令的基本使用 一、ncdu命令命令介绍1.1 ncdu简介1.2 ncdu特点 二、本地环境介绍2.1 本地环境规划2.2 本次实践介绍 三、检查本地环境3.1 检查本地操作系统版本3.2 检查系统内核版本3.3 检查系统镜像源3.4 更新软件列表 四、安装ncdu工具4.1 安装ncdu软件4.2 n…...

编程日记 2024/8/8 6:40:44

STM32L051K8U6-HAL-LED闪烁设计

HAL三步法&#xff1a; 1、配置下载线 2、配置晶振 3、配置时钟 注意&#xff1a;中断优先级&#xff08;这里防止HAL_Delay卡死&#xff0c;详细请看 http://t.csdnimg.cn/NQhQV&#xff09; 4、 配置灯引脚属性为输出模式。并设置标签为LED 生成代码&#xff1a;编写while里…...

编程日记 2024/8/8 6:39:43

记一次远程API调用失败

记一次远程API调用失败 最近开发忙&#xff0c;项目紧&#xff0c;系统出现一些忽隐忽现的问题&#xff0c;本地也不能复现&#xff0c;当时也无法理解&#xff0c;就先搁置了&#xff0c;现在回想起来&#xff0c;这里还是明智的。 这个bug很神奇 今天&#xff0c;原本好好的…...

编程日记 2024/8/8 6:37:41

【力扣】746.使用最小花费爬楼梯

题目描述 给你一个整数数组 cost &#xff0c;其中 cost[i] 是从楼梯第 i 个台阶向上爬需要支付的费用。一旦你支付此费用&#xff0c;即可选择向上爬一个或者两个台阶。 你可以选择从下标为 0 或下标为 1 的台阶开始爬楼梯。 请你计算并返回达到楼梯顶部的最低花费。 示例…...

编程日记 2024/8/8 6:36:40

06：【stm32】中断一：NVIC的配置

中断 1、中断的简介1.1、什么是中断1.2、为什么需要中断 2、中断的优先级2.1、中断优先级的表示方法 3、NVIC3.1、什么的NVIC3.2、NVIC的内部结构3.3、中断向量表3.4、程序实现①开启中断源②配置NVIC③中断响应函数 1、中断的简介 1.1、什么是中断 正在进行的事务被突发事件打…...

编程日记 2024/8/8 6:35:39

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/9/29 3:23:47

Leetcode 3576. Transform Array to All Equal Elements

Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接&#xff1a;3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到&#xf…...

编程新知 2025/9/17 7:25:07

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2025/11/17 0:42:03

智慧工地云平台源码，基于微服务架构+Java+Spring Cloud +UniApp +MySql

智慧工地管理云平台系统&#xff0c;智慧工地全套源码&#xff0c;java版智慧工地源码&#xff0c;支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求&#xff0c;提供“平台网络终端”的整体解决方案&#xff0c;提供劳务管理、视频管理、智能监测、绿色施工、安全管…...

编程新知 2025/11/16 21:47:22

MongoDB学习和应用(高效的非关系型数据库)

一丶 MongoDB简介 对于社交类软件的功能&#xff0c;我们需要对它的功能特点进行分析&#xff1a; 数据量会随着用户数增大而增大读多写少价值较低非好友看不到其动态信息地理位置的查询… 针对以上特点进行分析各大存储工具&#xff1a; mysql&#xff1a;关系型数据库&am…...

编程新知 2025/11/17 23:18:45

云启出海，智联未来｜阿里云网络「企业出海」系列客户沙龙上海站圆满落地

借阿里云中企出海大会的东风&#xff0c;以**「云启出海&#xff0c;智联未来&#xff5c;打造安全可靠的出海云网络引擎」为主题的阿里云企业出海客户沙龙云网络&安全专场于5.28日下午在上海顺利举办&#xff0c;现场吸引了来自携程、小红书、米哈游、哔哩哔哩、波克城市、…...

编程新知 2025/11/16 22:38:09

Swift 协议扩展精进之路：解决 CoreData 托管实体子类的类型不匹配问题（下）

概述 在 Swift 开发语言中&#xff0c;各位秃头小码农们可以充分利用语法本身所带来的便利去劈荆斩棘。我们还可以恣意利用泛型、协议关联类型和协议扩展来进一步简化和优化我们复杂的代码需求。 不过&#xff0c;在涉及到多个子类派生于基类进行多态模拟的场景下&#xff0c;…...

编程新知 2025/11/17 8:38:08

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

编程新知 2025/11/17 11:59:03

C++：多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

编程新知 2025/11/17 7:37:29

Razor编程中@Html的方法使用大全

文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...

编程新知 2025/11/17 9:12:21