Question

enter image description here

嗨，我的要求是在我提供员工ID的同一窗口填充数据，员工ID按钮和输入字段出现在窗口的左上角，我想填充窗口右上角的数据现在图上显示的不同窗口的人口数据请帮帮我。

这是我的 JS

    <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<jsp:include page="Header.jsp" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link href="../css/style1.css" rel="stylesheet" type="text/css">
</head>

<body>
    <table width="1255" height="952" border="0">
        <tr>
            <td width="357" height="251" bgcolor="#CC6600">
                <table width="285" border="0" align="center" bgcolor="#FF9900">




                    <c:if test="${requestScope.x}">
                        <div id="div3">
                            <form:form commandName="departmentForm"
                                action="/EmployeeWebAppUI/DepartmentController/findbydepartmentid">
                                <span>Find By ID </span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <form:input path="departmentId" />
                                <input type="submit" name="submit1" value="search" />

                            </form:form>

                            <br>
                        </div>
                    </c:if>

                    <c:if test="${requestScope.y}">
                        <div id="div1">
                            <form:form commandName="departmentForm"
                                action="/EmployeeWebAppUI/DepartmentController/findbydepartmentname">
                                <span>Find BY Name</span> &nbsp;&nbsp;<form:input
                                    path="departmentName" />
                                <input type="submit" name="submit" value="search" />
                            </form:form>

                        </div>
                    </c:if>

                    <c:if test="${requestScope.w}">
                        <div id="div2">
                            <form:form commandName="projectForm"
                                action="/EmployeeWebAppUI/ProjectController/getprojectsbyId">
                                <span>Employee Number: </span>
                                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                    <form:input path="employeeNumber" />
                                <input type="submit" name="submit2" value="search" />

                            </form:form>

                            <br>
                        </div>
                    </c:if>




                    <c:if test="${requestScope.A}">
                        <div id="div2">
                            <form:form commandName="employeeForm"
                                action="/EmployeeWebAppUI/EmployeeGetController/findbyid"
                                method="get">
                                <span>Employee Id:</span>

                                <form:input path="employeeNumber" />

                                <input type="submit" name="Search" value="Search" />

                            </form:form>
                        </div>
                    </c:if>

                    <c:if test="${requestScope.B}">
                        <div id="div1">
                            <form:form commandName="employeeForm"
                                action="/EmployeeWebAppUI/EmployeeGetController/findbyname"
                                method="post">

                                <span>Employee Name:</span>

                                <form:input path="firstName" />

                                <input type="submit" name="Search" value="Search" />

                            </form:form>
                        </div>
                    </c:if>


                    <c:if test="${requestScope.C}">
                        <div id="div1">
                            <form:form commandName="employeeForm"
                                action="/EmployeeWebAppUI/EmployeeGetController/findByDepatmentId"
                                method="post">

                                <span>Department ID:</span>

                                <form:input path="departmentId" />

                                <input type="submit" name="Search" value="Search" />

                            </form:form>
                        </div>
                    </c:if>

                </table>
                <p>&nbsp;</p>
            </td>
            <td width="888" rowspan="2">
        <tr>
            <td height="693" bgcolor="#CC6600"></td>
        </tr>
    </table>
</body>
</html>

Answer 1

而不是获取完整页面只从服务器获取数据，然后使用JavaScript在页面上呈现数据。

如果您发布页面异步（或使用Ajax），通常可以这样做。你的方式是：

通过使用Ajax将输入参数传递给服务器来调用操作。
从服务器
解析JSON数据，然后使用DOM操作填充页面。

您可以使用任何JS库（如 jQuery ）来简化Ajax调用以及执行DOM操作。

Answer 2

假设您正在使用jquery

单击选项卡或标签执行AJAX请求。

它会调用你的servlet并将数据写入ajax响应。

在客户端onsuccess执行所需的操作。

function changeCOntent(type){
    $.ajax({
          type: 'POST',
          url: 'servletpath?type=passtype',
          success:function(data){

             $('#contentDiv').innerHTML = data;

          }
        });
}

在同一窗口中填充数据

2 个答案: