JavaWeb 前后端分离

AJax

1. 前端视图

ajax\src\main\webapp\ajax-register.html

<html>

<head>
    <meta charset="UTF-8">
</head>

<body>
    <form class="form-horizontal" role="form">
        <div>
            <tr>
                <td>账号</td>
                <td class="inputs">
                    <input name="username" type="text" id="username">
                </td>
                <br>
                <span id="username_err" class="err_msg" style="display:none">用户名已存在</span>
            </tr>
        </div>
        <div>
            <tr>
                <td>密码</td>
                <td class="inputs">
                    <input name="password" type="text" id="password">
                </td>
            </tr>
        </div>
    </form>

    <script>
        // 1.给用户输入框绑定失去焦点事件
        document.getElementById("username").onblur = function () {
            // alert("TTT");
            // 2.发送ajax请求
            // 获取参数
            var username = this.value;
            // 2.1.创建核心对象
            const xhttp = new XMLHttpRequest();

            // 2.2.发送请求
            // 通过selectUserservlet向servlet.java发送usernema数据
            xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet?username=" + username);
            // 传两个参数：
            // xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet?username=test2&username2=test2");
            xhttp.send();

            // 2.3.获取响应
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    //判断
                    if (this.responseText == "true") {
                        // 用户名已存在
                        // 将展示（display）启用，显示提示信息
                        document.getElementById("username_err").style.display = '';
                    }
                    else {
                        // 用户名不存在
                        // 将展示（display）关闭，清除提示信息
                        document.getElementById("username_err").style.display = 'none';
                    }
                }
            };
        }
    </script>
</body>
</html>

2. 后端

ajax\src\main\java\com\mercurows\web\servlet\servlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/selectUserservlet")
public class servlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.接受用户名
        String username = req.getParameter("username");

        System.out.println(username);

        // 2.调用service查询user对象
        boolean flag = true;

        // 3.标记响应
        resp.getWriter().write("" + flag);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

3. 请求链接如何确定？

xhttp.open("GET", "http://localhost:8080/ajax/selectUserservlet");

上述不带参数传递的请求连接为:http://localhost:8080/ajax/selectUserservlet

具体步骤：

用tomcat打开项目

一开始默认进来是这样的：image-20230713122716531

又因为要跳转到后端的servlet的servlet.java页面，通过上面的注解 **@WebServlet(“/selectUserservlet”)**知道请求链接后面应该跟随selectUserservlet

image-20230713123709201

若想传递参数则需要修改链接为：

http://localhost:8080/ajax/selectUserservlet?username=" + username

此时后端接受参数方法为：

String username = req.getParameter("username");

4. 项目结构

image-20230713132643922

Axios

0. 导入js文件

去网上找到axios.js并导入项目中

image-20230713134538221

然后在前端中导入

<script src="js/axios.js"></script>

1. 前端视图

ajax\src\main\webapp\axios-demo.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>

    <body>
        <script src="js/axios.js"></script>

        <!-- 1.get方式 -->
        <!-- <script>
            axios({
                method:"get",
                url:"http://localhost:8080/ajax/axiosServlet?username=zhangsan"
            }).then(function (resp){
                alert(JSON.stringify(resp.data));
            })
        </script> -->

        <!-- 2.post方式 -->
        <script>
            axios({
                method:"post",
                url:"http://localhost:8080/ajax/axiosServlet",
                data:"username=zhangsan"
            }).then(function (resp){
                alert(JSON.stringify(resp.data));
            })
        </script>
    </body>
</html>

2. 后端

ajax\src\main\java\com\mercurows\web\servlet\AxiosServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;
import java.util.HashMap;
import java.util.Map;

import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONObject;

@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet{

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse res) throws IOException {
        System.out.println("get..");
        // 1.接受用户名
        String username = req.getParameter("username");

        // 2.响应数据
        // res.getWriter().write("hello axios");
        System.out.println(username);
        Map<Object,Object> data1 = new HashMap<>();
        data1.put("name", "Alice");
        data1.put("age", 12);
        data1.put("measurements", new int[] { 60, 70, 70 });

        JSONObject object = JSONObject.fromObject(data1); //创建Json对象
        //将json对象转化为字符串在终端输出
        System.out.print(object.toString());
        //把json数据返回给浏览器：
        res.getWriter().write(object.toString());
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res) throws IOException {
        System.out.println("pos..");
        this.doGet(req,res);
    }
}

3. 确定请求链接

参考AJax中的方法

**注意：**上面后端中使用JSONObject了传递JSON数据，可参考博客：简单的后端传送json格式至前端正确处理方法

4. 项目结构

image-20230713161105117

Servlet优化

情景想象：对于Student实体对象有添加(add)、查找(select)等方法，按照我旧的设计方法，会设计两个servlet类：AddStudentServlet、SelectALLStudentServlet。如果后面后续又出现了更多操作，这使得servlet类的管理出现不便。这时我可以采取与MyBatis类似的处理方法进行映射，见：MyBatis简单入门。Student专门写个成一个StudentServlet类，然后原本的AddStudentServlet、SelectALLStudentServlet写成里面的成员方法。

1.自定义servlet类重写service方法

自定义继承了HttpServlet类的子类，并且重写protected void service(HttpServletRequest req, HttpServletResponse resp)方法–根据请求链接来决定是调用doGet还是doPost之类的，源码可以见：源码，重写了该方法之后也就可以做到无需写doGet、doPost等方法。

ajax\src\main\java\com\mercurows\web\servlet\BaseServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;
import java.lang.reflect.InvocationTargetException;
import java.lang.reflect.Method;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

// @WebServlet("/selectUserservlet")
// 替换HttpServlet，根据请求的最后一段路径来进行分发
public class BaseServlet extends HttpServlet {

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 1.1获取请求路径，即浏览器输入栏的链接
        String uri = req.getRequestURI();
        // System.out.println(uri);
        // 1.2获取最后一段路径，即StudentServlet中的成员方法名
        //这里的方法名即指
        int index = uri.lastIndexOf('/');
        String methodName = uri.substring(index + 1);
        // System.out.println(methodName);

        // 2.执行方法
        // 2.1 获取TeacherServlet、StudentServlet字节码对象Class
        // 谁调用该方法，该方法中的this就是谁
        Class<? extends Object> cls = this.getClass();
        cls.getMethods();

        // 2.2获取方法Method对象
        try {
                // 方法名称、方法参数对应的class
            Method method = cls.getMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
            // 2.3参数：调用方法的类，该方法对应的参数
            method.invoke(this, req, resp);
        } catch (NoSuchMethodException e) {
            e.printStackTrace();
        } catch (SecurityException e) {
            e.printStackTrace();
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        } catch (IllegalArgumentException e) {
            e.printStackTrace();
        } catch (InvocationTargetException e) {
            e.printStackTrace();
        }
    }
}

2. 映射servlet的类

与以往编写servlet类要继承HttpServlet类一样，这里因为BaseServlet继承了HttpServlet，所以直接继承BaseServlet即可，如：

ajax\src\main\java\com\mercurows\web\servlet\StudentServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/student/*")
public class StudentServlet extends BaseServlet {

    public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student selectAll..");
    }

    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student add..");
    }
    
    public void del(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Student del..");
    }    
}

这里的@WebServlet("/student/*")表示通配符，表示当要执行StudentServlet中任一方法时(如selectAll方法，则路径应该是：/student/selectAll)便会见控制权转交给对应方法。

3. 具体执行流程

运行tomcat打开项目浏览器：image-20230713172507702

假如要执行StudentServlet中的成员方法，则具体路径为：http://localhost:8080/ajax/student/selectAll

**具体的：**当我在浏览器中输入http://localhost:8080/ajax/student/del时，执行流程如下

  1. 请求由服务器接收，并传递给与路径匹配的Servlet，即BaseServlet。
  2. BaseServlet的service方法被调用，传入HttpServletRequest和HttpServletResponse对象。
  3. 在service方法内部，通过req.getRequestURI()获取请求的URI，即/ajax/student/del。
  4. 然后，通过uri.lastIndexOf('/')获取最后一个斜杠的索引，这里是14。
  5. 使用uri.substring(index)截取最后一段路径，即/del，并将其存储在methodName变量中。
  6. methodName现在包含要执行的方法名。
  7. BaseServlet的service方法执行完毕，控制权传递回StudentServlet。
  8. StudentServlet继承自BaseServlet，因此它会继承service方法。
  9. service方法在StudentServlet中未被重写，因此将调用BaseServlet中的service方法。
  10. BaseServlet的service方法将执行上述步骤来解析URI，并确定要执行的方法名为/del。
  11. service方法输出/ajax/student/del和/del的日志信息。
  12. service方法执行完毕，请求处理完成。

总结：请求首先由BaseServlet接收并解析URI，然后确定要执行的方法名为/del。然后控制权传递给StudentServlet，但由于StudentServlet没有重写service方法，因此将继续执行BaseServlet中的service方法。

4. 多个映射servlet的类

假如，现在又多了TeacherServlet.java，同理也只需要继承BaseServlet.java即可，而且BaseServlet.java不需要做出任何修改。

ajax\src\main\java\com\mercurows\web\servlet\TeacherServlet.java

package com.mercurows.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/teacher/*")
public class TeacherServlet extends BaseServlet {
    public void selectAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("teacher selectAll..");
    }
    public void add(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("teacher add..");
    }
}

5. 项目结构

image-20230713173922734

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/39277.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

6款好用的在线原型图设计工具推荐

6款好用的在线原型图设计工具推荐

在线原型图的核心功能是可视化需求&#xff0c;因此一个易于使用的在线原型图工具对原型图设计至关重要。对于熟悉的Photoshop和iIlustrator来说&#xff0c;虽然它们功能强大&#xff0c;但界面太复杂&#xff0c;初学者很难快速启动&#xff0c;面对批量调整的在线原型图&…
阅读更多...
Allegro过孔盖油和过孔开窗设置（部分过孔开窗）

Allegro过孔盖油和过孔开窗设置（部分过孔开窗）

Allegro设置一部分过孔盖油&#xff0c;另一部分过孔开窗。 过孔开窗&#xff1a;过孔部分去除阻焊&#xff0c;便于调试和散热&#xff1b; 过孔盖油&#xff1a;过孔盖上阻焊油墨&#xff0c;防止过孔连锡短路。 总结 使用pad designer设计两种via pad&#xff0c;一种不开…
阅读更多...
STM32案例学习 GY-39环境监测传感器模块

STM32案例学习 GY-39环境监测传感器模块

STM32案例学习 GY-39环境监测传感器模块 硬件平台 野火STM32F1系列开发板正点STM32F1系列开发板STM32F103ZET6核心板GY-39环境监测传感器模块 GY-39环境监测传感器模块 GY-39 是一款低成本&#xff0c;气压&#xff0c;温湿度&#xff0c;光强度传感器模块。工作电压 3-5v…
阅读更多...
【JavaEE】HTTP请求的构造

【JavaEE】HTTP请求的构造

目录 1、通过form表单构造HTTP请求 2、通过JS的ajax构造HTTP请求 3、Postman的安装和简单使用 常见的构造HTTP请求的方式有一下几种&#xff1a; 直接通过浏览器的地址栏&#xff0c;输入一个URL&#xff0c;就可以构造一个GET请求HTML中的一些特殊标签&#xff0c;也会触发…
阅读更多...
网工内推 | 美图秀秀招网工，大专以上，15薪，NP认证优先

网工内推 | 美图秀秀招网工，大专以上，15薪，NP认证优先

01 美图公司 招聘岗位&#xff1a;网络工程师 职责描述&#xff1a; 1、美图大厦网络、分公司网络、IT相关项目的网络、办公内网服务器&#xff1b; 2、负责网络的设计、运行、管理和维护等工作&#xff1b; 3、负责远程办公环境的优化、运行、管理和维护工作&#xff1b; 4、…
阅读更多...
二级市场负重前行？腾讯音乐的“新伤”与“旧患”

二级市场负重前行？腾讯音乐的“新伤”与“旧患”

炎炎夏日的7月&#xff0c;于腾讯音乐&#xff08;NYSE:TME、HK:01698&#xff09;而言并不太平。 先是&#xff0c;在7月5日&#xff0c;企鹅FM发布官方公告称由于业务调整&#xff0c;将于9月6日正式停止运营。 仅过十二天&#xff0c;7月17日&#xff0c;腾讯音乐发布公告&…
阅读更多...
勒索花样繁多，“Sophos Encrypt”披马甲进行勒索攻击

勒索花样繁多，“Sophos Encrypt”披马甲进行勒索攻击

近日&#xff0c;网络安全供应商Sophos发表声明&#xff0c;称Sophos被一款名为“Sophos Encrypt”新型勒索软件冒充&#xff0c;该勒索软件进行攻击时会冒用Sophos品牌名称&#xff0c;并将用户重要文件进行加密以勒索赎金。 现在的勒索软件类型多样&#xff0c;令企业防不胜防…
阅读更多...
Windows搭建Nginx实现RTMP转为HLS流

Windows搭建Nginx实现RTMP转为HLS流

所需软件 nginx-1.7.11.3-Gryphon&#xff08;这个包含必须的RTMP模块&#xff0c;普通的Ngxin没有这个&#xff09;ffmpegVLC 配置Nginx 1为Nginx配置RTMP和HLS 这里定义了一个叫live的RTMP路径。同时设置其开启HLS功能&#xff0c;那么所有推送到这个地址的RTMP流都会自动生…
阅读更多...
【Apifox】国产测试工具雄起

【Apifox】国产测试工具雄起

在开发过程中&#xff0c;我们总是避免不了进行接口的测试&#xff0c; 而相比手动敲测试代码&#xff0c;使用测试工具进行测试更为便捷&#xff0c;高效 今天发现了一个非常好用的接口测试工具Apifox 相比于Postman&#xff0c;他还拥有一个非常nb的功能&#xff0c; 在接…
阅读更多...
编程小白的自学笔记九（python爬虫入门+代码详解）

编程小白的自学笔记九（python爬虫入门+代码详解）

系列文章目录 编程小白的自学笔记八&#xff08;python中的多线程&#xff09; 编程小白的自学笔记七&#xff08;python中类的继承&#xff09; 编程小白的自学笔记六&#xff08;python中类的静态方法和动态方法&#xff09; 编程小白的自学笔记五&#xff08;Python类的…
阅读更多...
Navicat分配子用户及权限管理

Navicat分配子用户及权限管理

一、创建用户&#xff0c;分配权限 新建用户 输入要创建的子用户的信息 主机名 表示访问本服务的方式&#xff0c;%表示即可以本机访问&#xff0c;也可以远程访问 之后&#xff0c;我们给创建的用户分配权限&#xff08;在该数据库的可操作空间&#xff09; 为用户分配增删改…
阅读更多...
SPEC CPU 2017 1.0.5 不同版本CentOS 7 8 安装笔记

SPEC CPU 2017 1.0.5 不同版本CentOS 7 8 安装笔记

CentOS 7.9.2009 x86_64 gcc版本 安装成功 runcpu编译报错 gcc版本太低&#xff0c;不识别-fno-tree-loop-vectorize 去掉config/gcc.cfg中 -fno-tree-loop-vectorize编译优化参数。 用例编译中 CentOS 8.3.2011 x86_64 gcc版本 安装失败&#xff0c;需要自行编译tools 手动…
阅读更多...
Visual Studio 自定义的颜色字体不生效

Visual Studio 自定义的颜色字体不生效

问题描述&#xff1a; 1、dll1中引用第三方库的类不识别&#xff0c;颜色黑白&#xff0c;自定义颜色不生效&#xff1b;定义的是结构体 2、在dll2引用另一个dll1中的结构体。结构体不识别&#xff0c;今天成员函数cpp中自定义颜色不生效。 问题解决方式&#xff1a; 全部清…
阅读更多...
黑客学习笔记（自学）

黑客学习笔记（自学）

一、首先&#xff0c;什么是黑客&#xff1f; 黑客泛指IT技术主攻渗透窃取攻击技术的电脑高手&#xff0c;现阶段黑客所需要掌握的远远不止这些。 二、为什么要学习黑客技术&#xff1f; 其实&#xff0c;网络信息空间安全已经成为海陆空之外的第四大战场&#xff0c;除了国…
阅读更多...
抖音账号矩阵系统源码-开源部署开发者分享

抖音账号矩阵系统源码-开源部署开发者分享

抖音账号矩阵系统&#xff0c;短视频账号矩阵系统源码&#xff0c; 短视频矩阵是一种常见的视频编码标准&#xff0c;它通过将视频分成多个小块并对每个小块进行压缩来实现高效的视频传输。短视频多账号矩阵系统&#xff0c;通过多账号一键授权管理的方式&#xff0c;为运营人员…
阅读更多...
vue+element Cascader 级联选择器 ＞ 实现省市区三级联动

vue+element Cascader 级联选择器 ＞ 实现省市区三级联动

vueelement Cascader 级联选择器 > 实现省市区三级联动 先看下实现效果吧&#xff08;嘻嘻&#xff09; 看完我们就开始啦 安装element-china-area-data1 npm install element-china-area-data5.0.2 -S上代码 <el-cascadersize"large":options"options…
阅读更多...
腾讯、飞书等在线表格自动化编辑--python

腾讯、飞书等在线表格自动化编辑--python

编辑在线表格 一 目的二 实现效果三 实现过程简介1、本地操作表格之后进入导入在线文档2、直接操作在线文档 四 实现步骤讲解1、实现方法的选择2、导入类库3、设置浏览器代理直接操作已打开浏览器4、在线文档登录5、在线文档表格数据操作6、行数不够自动添加行数 五 代码实现小…
阅读更多...
数据采集专家----4通道AD采集子卡推荐

数据采集专家----4通道AD采集子卡推荐

FMC136是一款4通道250MHz采样率16位AD采集FMC子卡&#xff0c;符合VITA57规范&#xff0c;可以作为一个理想的IO模块耦合至FPGA前端&#xff0c;4通道AD通过高带宽的FMC连接器&#xff08;HPC&#xff09;连接至FPGA从而大大降低了系统信号延迟。 该板卡支持板上可编程采样时钟…
阅读更多...
css 禁止多次点击导致的选中了目标div的文字

css 禁止多次点击导致的选中了目标div的文字

像下面这样的情况&#xff0c;就可以用这种方法避免掉 禁止多次点击&#xff0c;导致的&#xff0c;选中了目标div的文字 或者 禁止多次点击&#xff0c;导致&#xff0c;html结构被选中显示出来 .targetDiv {-webkit-user-select: none;-moz-user-select: none;-ms-user-sel…
阅读更多...
6.3.6 利用Wireshark进行协议分析（六）----网页提取过程的协议分析

6.3.6 利用Wireshark进行协议分析（六）----网页提取过程的协议分析

6.3.6 利用Wireshark进行协议分析&#xff08;六&#xff09;----网页提取过程的协议分析 利用Wireshark捕获网页访问过程中产生的应用协议报文&#xff0c;还原Web服务中报文的交互过程&#xff0c;为了防止网页直接从本地缓存中获取&#xff0c;我们首先需要清空浏览器保存的…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站