个人冲刺
今天我主要进行了一键生成简历的制作与排版
<%@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 /> 姓 名: <input type="text" id="name" placeholder="姓名" /> <br /> 年 龄: <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>
此为简化代码，用于测试
