个人冲刺

今天我主要进行了一键生成简历的制作与排版 
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
<head>
  <title>左侧页面</title>
  <meta charset="UTF-8" />
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <style type="text/css">
    .container {
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      height: 100vh;
    }

    .left {
      left:0;
      top:0;
      float: left;
      width: 27%;
      height: 100%;
      margin-left: 10px;
      overflow-y:hidden;
      overflow-x:scroll;
    }

    .right {
      float: right;
      overflow-y:hidden;
      overflow-x:scroll;
      width: 53%;
      height: 100%;
      margin-right: 10px;

    }
  </style>
  <script type="text/javascript">
    $(function() {
      // 绑定键盘输入事件
      $('input').keyup(function() {
        // 构造参数
        var param = {
          title: $('#title').val(),
          name: $('#name').val(),
          age: $('#age').val()
          // 这里可以将需要传递的参数都添加上去
        };
        // 发送ajax请求，更新右侧iframe
        $.ajax({
          url: 'updateRight.jsp',
          type: 'post',
          data: param,
          success: function(data) {
            $('#myframe').contents().find('body').html(data);
          }
        });
      });
    });
  </script>
</head>
<body>
<div class="container">
  <div class="left"><form>
    简历标题:<input type="text" id="title" placeholder="简历标题" />
    <br />
    姓&nbsp;&nbsp;&nbsp;&nbsp;名: <input type="text" id="name" placeholder="姓名" />
    <br />
    年&nbsp;&nbsp;&nbsp;&nbsp;龄: <input type="text" id="age" placeholder="年龄" />
    <br />
    <!-- 这里可以添加多个输入框 -->
  </form>
  </div>
  <div class="right">
    <iframe id="myframe" src="right.jsp"></iframe>
  </div>
</div>

<hr />
<!-- 指向右侧需要显示的jsp页面 -->
</body>
</html>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<html>
<head>
    <title>右侧页面</title>
    <meta charset="UTF-8" />
</head>
<body>
<div>
    ${param.title}<br />

        姓名：${param.name}</br>
        年龄：${param.age}</br>
        <!-- 这里可以添加对应的显示内容 -->

</div>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <title>更新右侧页面</title>
    <meta charset="UTF-8" />
</head>
<body>
<div>
    ${param.title}<br />

    姓名：${param.name}</br>
    年龄：${param.age}</br>
    <!-- 这里可以添加对应的显示内容 -->
    </ul>
</div>
</body>
</html>

此为简化代码，用于测试

posted @ 2023-05-29 22:18  橘子味芬达水  阅读(7)  评论(0)  编辑  收藏  举报