ajax实现左侧填写右侧生成内容
updateRight.jsp
<%@ 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>
right.jsp
<%@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>
index(1).jsp
<%@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>