Jakarta EE 分类

环境：Win 11、JDK 17、 Spring Boot 3.1.2

HTTP Header 之 Content-Disposition

以下内容来自 mdn web docs

简介

在常规的 HTTP 应答中，Content-Disposition 响应标头指示回复的内容该以何种形式展示，是以内联的形式（即网页或者页面的一部分），还是以附件的形式下载并保存到本地。

为什么要前后端分离？

在以前的学习代码中，可以看出来我们在 jsp 页面页面上也通过 EL 表达式和 jstl 写了很多的 java 程序，这实际上在前端的页面中混入了很多后端的逻辑，这就是传统的 web 开发。在传统的 web 开发中,页面展示的内容以及页面之间的跳转逻辑,全都由后台来控制,这导致了前后端耦合度非常高,耦合度高则意味着,扩展性差,维护性差,等等问题

使用 JQuery 的$.ajax()方法请求 Servlet

前端代码

jsp、html

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE>
<html lang="en">
<head>
    <title>$Title$</title>
</head>
<body>
<form>
    <div style="text-align:center;margin-top: 100px;">
        <input type="text"
               id="txtName"
               name="txtName"
               placeholder="请输入您的姓名">
        <input type="text"
               id="txtAge"
               name="txtAge"
               placeholder="请输入您的年龄">
        <!--
          因为写在了<form>标签里，所以type不能写成submit，不然会刷新页面
          也不能用button标签代替，因为除IE以外的浏览器（包括 W3C 规范）的默认值是 "submit"，也会刷新页面
          保险起见可以不写form标签，可以自己试一试
        -->
        <input type="button"
               id="btn1"
               name="btn1"
               value="提交">
    </div>
</form>

<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>
<script type="text/javascript">
    $("#btn1").click(function () {
        let name = $("#txtName").val()
        let age = $("#txtAge").val()
        if (name.trim().length === 0 || age.trim().length === 0) {
            alert('name或age不能为空')
            return
        }
        $.ajax({
            url: "submit-info", // servlet路径，注意contextPath
            type: "post",
            dataType: "json",	// 规定预期的服务器响应的数据类型，有xml、html、text、script、json、jsonp等
            data: {             // 发送到servlet的数据，必须为 Key/Value 格式，能自动转换为请求字符串格式，name和age不用双引号括起来也行
                name: name,     // 必须用逗号隔开，不能是分号
                age: age
            },
            success: function (data) {
                console.log(data)
                alert("您的姓名：" + data.name + "\n您的年龄：" + data.age)
            },
            error: function (err) {
                alert("ajax请求失败！")
                console.log('错误信息', err.responseText)
            }
        })
    })
</script>
</body>