数据库课设记录 Day 5

最新推荐文章于 2024-07-11 21:41:59 发布

古樾枳梢

最新推荐文章于 2024-07-11 21:41:59 发布

阅读量360

点赞数

文章标签：数据库 java ajax

本文链接：https://blog.csdn.net/weixin_51546928/article/details/126790271

版权

“我的应聘”页面总算是完成了…

职位的那个 “链接” 点击后进入的是对应职位的详情页，通过设置 a 标签 target = _blank 可以让页面在一个新的标签页中打开；简历的那个链接点击后就会下载对应的简历；

在这里插入图片描述

点击 “查看详情” 后的效果。JQuery 检测点击事件，通过 ajax 向后台查询所有的面试信息。另外 $\text{apply}$ 表和 $\text{interview}$ 表有较大改动，原来我是打算用链表来顺序串联起在 $\text{interview}$ 中的东西，后来想了一下，我直接按面试时间排序不就行了么…

在这里插入图片描述

另外要显示这个页面，因为好多东西都不是一张表的，我也不可能就为这个创建一个新的 bean 类，于是…我后台直接用一个 ArrayList 来存：

/**
  * 一共 11 个字段
  * Id positionID 姓名 公司名 ability 附件名
  * 最新状态的:
  * desc hrname time place result
  */
 String[] resultMap = {"none", "未通过", "通过", "发放offer"};
 for (var apply : applyList) {
     ArrayList<String> tmp = new ArrayList<>();
     tmp.add(String.valueOf(apply.getApplicant()));
     tmp.add(String.valueOf(apply.getPosition()));
     tmp.add(userMapper.getPeopleName(id));
     tmp.add(companyMapper.getCompanyName(positionMapper.getPositionByID(apply.getPosition()).getCompany()));
     tmp.add(apply.getAbility());
     tmp.add(apply.getAttachment());

     Interview last = positionMapper.getLastInterview(id, apply.getPosition());
     tmp.add(last.getDesc());
     tmp.add(last.getHrname());
     tmp.add(last.getTime());
     tmp.add(last.getPlace());
     tmp.add(resultMap[last.getResult() + 1]);
     list.add(tmp);
 }

然后是点击 “查看详情”，我在网上查了好多 “springboot ajax 返回 json 数组”，总算是搞定了这个东西：
控制器：

@Controller
public class MainController {
    @GetMapping("/")
    String getDefaultPage() {
        return "/index";
    }

    @GetMapping("/details")
    void getDetails(HttpServletRequest request, HttpServletResponse response) {
        String id = request.getParameter("id"); // 从 request 中读取参数
        String position = request.getParameter("position");

        System.out.println("id = " +id + ", position = " + position);
		// 返回一个 json 格式的字符串
        String res = "[ {'desc' : '一面', 'hrname' : '李峰', 'time' : '2022-9-20 15:00:00' }, {'desc' : '二面', 'hrname' : '张三', 'time' : '2022-9-27 15:00:00' }  ]";
        response.setCharacterEncoding("utf-8"); // 设置返回内容的编码，不然汉字到前台会变成 ??
        try {
            response.getWriter().print(res); // 这应该是把返回的信息写到 响应消息 的 body 中？
        } catch (IOException e){
            e.printStackTrace();
        }
    }
}

和 springboot 惯常的 @RequestParam() 的写法不一样，这里的 request ，response 好像是网络请求中的 “请求消息” 和 “响应消息”（寒假依稀学了点计网的东西），也许 springboot 中 @RequestParam() 获取参数就是从 request 中读取的？不懂，大三下学期才学计网。

(当时写的markdown笔记)

在这里插入图片描述

前台的 ajax 接收到后用 JSON.parse() 将字符串转化为 Json 对象，但是 JSON.parse() 对字符串的要求相对较严格， key:value 的 key 必须用 双引号 括起来，下面这个才是合法的，上面那个不对。

String res = "[ {\"desc\" : \"一面\", \"hrname\" : \"李峰\", \"time\" : \"2022-9-20 15:00:00\" }, {\"desc\" : \"二面\", \"hrname\" : \"张三\", \"time\" : \"2022-9-27 15:00:00\" }  ]";

当时写的时候以为返回一个 json 格式的字符串再加上 ajax 设置 dataType:"json" (dataType 是从服务器接收到的数据的格式)，那么 ajax 接收到的就是 json 格式的数据。然后 debug 了好久把 dataType 换成 contentType 才搞定。

现在才意识到其实返回的还是一个 文本字符串，不过到前台后用 JS 把它转化成 JSON。所以为啥不能用 @ResponseBody 捏？不过既然它都能跑了我也就懒得再改了，毕竟这样还方便设置字符编码。

页面：

<body>

<div>
    <span>id</span>
    <span>name</span>
    <button type="button" id="btn">按钮</button>
</div>
<div>
    <span style="font-size: 18px;" id = "ret"></span>
    <span style="font-size: 18px;" id = "retArr"></span>
</div>

<script th:src="@{/js/jquery-3.6.0.min.js}"></script>
<script>
    $(document).ready( function() {
        $('#btn').click(function (e) {
            // alert("click event");
            let id = "12345";
            let position = "3214324";
            $.ajax({
                url: "details",
                type: "get",
                data: {"id": id, "position": position},
                contentType: "json", // contentType 主要设置你发送给服务器的格式，dataType设置你收到服务器数据的格式; 不显示设置的话，两个默认都是 text,
                success: function (date) {
                    $('#ret').html(date);
                    var arr = JSON.parse(date);
                    // alert(arr.length);
                    // alert(arr[0].desc);
                    for(var i=0; i<arr.length; i++) {
                        $('#ret').append('<span style="display: block; font-size: 16px;">' + arr[i].desc + '</span>');
                        $('#ret').append('<span style="display: block; font-size: 16px;">' + arr[i].hrname + '</span>');
                        $('#ret').append('<span style="display: block; font-size: 16px;">' + arr[i].time + '</span>');
                    }
                    // 哦这里的 append 我应该用错了，我这里应该用 after。虽然实际效果看不出问题
                    // 实际写的时候用 prepend 没效果，网上查才知道我那应该用 before
                }
            });
        });
    });
</script>
</body>
</html>