【JavaWeb学习】前台实现页面打开新窗口，选择选项，数值回传

于 2018-05-04 13:38:28 发布
阅读量1.3k 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： Java学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/javae100/article/details/80193932
本文介绍如何在JavaWeb应用中，从add.jsp页面弹出list.jsp窗口，用户在list.jsp中选择选项后，将选择的数值回传到原页面add.jsp。内容重点在于页面交互和数据传递的实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

add.jsp中添加联系人信息，需要弹出一个list.jsp窗口，并在list.jsp中选择选项后将选择的数值传到add.jsp。

页面比较杂乱，主要看有注释的内容

一、add.jsp为原页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>添加联系人</TITLE> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath }/css/Style.css" type=text/css rel=stylesheet>
<LINK href="${pageContext.request.contextPath }/css/Manage.css" type=text/css
	rel=stylesheet>
<META content="MSHTML 6.00.2900.3492" name=GENERATOR>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript">

	
</script>


</HEAD>
<BODY>
	<FORM id=form1 name=form1
		action="${pageContext.request.contextPath }/AddLinkmanServlet"
		method=post>
		

		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_019.jpg"
						border=0></TD>
					<TD width="100%" background="${pageContext.request.contextPath }/images/new_020.jpg"
						 height=20></TD>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_021.jpg"
						border=0></TD>
				</TR>
			</TBODY>
		</TABLE>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15 background=${pageContext.request.contextPath }/images/new_022.jpg><IMG
						src="${pageContext.request.contextPath }/images/new_022.jpg" border=0></TD>
					<TD vAlign=top width="100%" bgColor=#ffffff>
						<TABLE cellSpacing=0 cellPadding=5 width="100%" border=0>
							<TR>
								<TD class=manageHead>当前位置：联系人管理 > 添加联系人</TD>
							</TR>
							<TR>
								<TD height=2></TD>
							</TR>
						</TABLE>
						<TABLE cellSpacing=0 cellPadding=5  border=0>
							<tr>
								<td>所属客户：</td>
								<td colspan="3">
								<!-- 隐藏域接收弹窗返回的cust_id数值，以便保存到后台  cust_name接收弹窗返回的数值，用来显示到前台 -->
								<input type="hidden" name="cust_id" id="cust_id" />
								<input type="text"  id="cust_name" style="WIDTH: 180px"/>
								<!-- 点击后弹出新窗口显示客户列表，后面带上一个select参数，表示打开的list页面是弹出的窗口-->
								<input type="button" value="选择客户" onclick="window.open ('${pageContext.request.contextPath}/CustomerAction_list?select=true','','height=400,width=600') ">
								</td>
							</tr>
							<TR>
								<td>联系人名称：</td>
								<td>
								<INPUT class=textbox id=sChannel2
														style="WIDTH: 180px" maxLength=50 name="lkm_name">
								</td>
								<td>联系人性别：</td>
								<td>
								<input type="radio" value="1" name="lkm_gender">男
								<input type="radio" value="2" name="lkm_gender">女
								</td>
							</TR>
							<TR>
								<td>联系人办公电话 ：</td>
								<td>
								<INPUT class=textbox id=sChannel2
														style="WIDTH: 180px" maxLength=50 name="lkm_phone">
								</td>
								<td>联系人手机 ：</td>
								<td>
								<INPUT class=textbox id=sChannel2
														style="WIDTH: 180px" maxLength=50 name="lkm_mobile">
								</td>
							</TR>
							<tr>
								<td rowspan=2>
								<INPUT class=button id=sButton2 type=submit
														value="保存 " name=sButton2>
								</td>
							</tr>
						</TABLE>
						
						
					</TD>
					<TD width=15 background="${pageContext.request.contextPath }/images/new_023.jpg">
					<IMG src="${pageContext.request.contextPath }/images/new_023.jpg" border=0></TD>
				</TR>
			</TBODY>
		</TABLE>
		<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
			<TBODY>
				<TR>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_024.jpg"
						border=0></TD>
					<TD align=middle width="100%"
						background="${pageContext.request.contextPath }/images/new_025.jpg" height=15></TD>
					<TD width=15><IMG src="${pageContext.request.contextPath }/images/new_026.jpg"
						border=0></TD>
				</TR>
			</TBODY>
		</TABLE>
	</FORM>
</BODY>
</HTML>


二、list.jsp为弹出窗口

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<TITLE>客户列表</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<LINK href="${pageContext.request.contextPath }/css/Style.css"
	type=text/css rel=stylesheet>
<LINK href="${pageContext.request.contextPath }/css/Manage.css"
	type=text/css rel=stylesheet>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/jquery-1.4.4.min.js"></script>
<SCRIPT language=javascript>
	function changePage(pageNum){		
		$("#currentPageInput").val(pageNum);
		$("#pageForm").submit();
	}
	function changePageSize(){
		var size = $("#pageSize").val();
		$("#pageSizeInput").val(size);
 		$("#pageForm").submit();
 
	}
	
	/* 弹窗窗口的参数传递到原窗口，JS代码实现 */
 	function selectCustomer(cust_name,cust_id){
 		/* 获得原窗口对象 */
 		var win = window.opener;
 		/* 获得document对象 */
 		var doc = win.document;
 		/* 获得元素并赋值 */
 		doc.getElementById("cust_name").value=cust_name;
 		doc.getElementById("cust_id").value=cust_id;
 		/* 关闭窗口 */
 		window.close();
	} 
	
</SCRIPT>

<META content="MSHTML 6.00.2900.3492" name=GENERATOR>
</HEAD>
<BODY>


	<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
		<TBODY>
			<TR>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_019.jpg"
					border=0></TD>
				<TD width="100%"
					background="${pageContext.request.contextPath }/images/new_020.jpg"
					height=20></TD>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_021.jpg"
					border=0></TD>
			</TR>
		</TBODY>
	</TABLE>
	<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
		<TBODY>
			<TR>
				<TD width=15 background=${pageContext.request.contextPath }
					/images/new_022.jpg><IMG
					src="${pageContext.request.contextPath }/images/new_022.jpg"
					border=0></TD>
				<TD vAlign=top width="100%" bgColor=#ffffff>
					<TABLE cellSpacing=0 cellPadding=5 width="100%" border=0>
						<TR>
							<s:if test="#parameters.select==null">													
							<TD class=manageHead>当前位置：客户管理 > 客户列表</TD>
							</s:if>
							<s:else>
							<TD class=manageHead>请选择客户</TD>							
							</s:else>
						</TR>
						<TR>
							<TD height=2></TD>
						</TR>
					</TABLE>
					<TABLE borderColor=#cccccc cellSpacing=0 cellPadding=0 width="100%"
						align=center border=0>
						<TBODY>
							<TR>
								<TD height=25>
									<form id="pageForm" name="pageForm"
										action="${pageContext.request.contextPath }/CustomerAction_list"
										method="post">
										<input type="hidden" id="currentPageInput" name="currentPage" value="<s:property value='#pageBean.currentPage'/>">
										<input type="hidden" id="pageSizeInput" name="pageSize" value="<s:property value='#pageBean.pageSize'/>" >
										<!-- 如果不为空，表示当前页面是一个弹出窗口，创建一个隐藏域：select，以便翻页的时候仍然能够带上select参数 -->
										<s:if test="#parameters.select!=null">
											<input type="hidden" name="select" value="<s:property value='#parameters.select'/>" >											
										</s:if>
 										<TABLE cellSpacing=0 cellPadding=2 border=0>
											<TBODY>
												<TR>
													<TD>客户名称：</TD>
													<TD><INPUT class=textbox id=sChannel2
														style="WIDTH: 80px" maxLength=50 name="cust_name" value="${param.cust_name }"></TD>

													<TD><INPUT class=button id=sButton2 type=submit
														value=" 筛选 " name=sButton2></TD>
												</TR>
											</TBODY>
										</TABLE>
									</form>

								</TD>
							</TR>

							<TR>
								<TD>
									<TABLE id=grid
										style="BORDER-TOP-WIDTH: 0px; FONT-WEIGHT: normal; BORDER-LEFT-WIDTH: 0px; BORDER-LEFT-COLOR: #cccccc; BORDER-BOTTOM-WIDTH: 0px; BORDER-BOTTOM-COLOR: #cccccc; WIDTH: 100%; BORDER-TOP-COLOR: #cccccc; FONT-STYLE: normal; BACKGROUND-COLOR: #cccccc; BORDER-RIGHT-WIDTH: 0px; TEXT-DECORATION: none; BORDER-RIGHT-COLOR: #cccccc"
										cellSpacing=1 cellPadding=2 rules=all border=0>
										<TBODY>
											<TR
												style="FONT-WEIGHT: bold; FONT-STYLE: normal; BACKGROUND-COLOR: #eeeeee; TEXT-DECORATION: none">
												<TD>客户名称</TD>
												<TD>客户行业</TD>
												<TD>客户级别</TD>
												<TD>客户来源</TD>
												<TD>联系人</TD>
												<TD>电话</TD>
												<TD>手机</TD>
											</TR>


											<s:iterator value="#pageBean.list" var="cust">
												<TR
													style="FONT-WEIGHT: normal; FONT-STYLE: normal; BACKGROUND-COLOR: white; TEXT-DECORATION: none">
													<TD><s:property value="#cust.cust_name" /></TD>
													<TD><s:property value="#cust.cust_industry.dict_item_name" /></TD>													
													<TD><s:property value="#cust.cust_level.dict_item_name" /></TD>
													<TD><s:property value="#cust.cust_source.dict_item_name" /></TD>
													<TD><s:property value="#cust.cust_linkman" /></TD>
													<TD><s:property value="#cust.cust_phone" /></TD>
													<TD><s:property value="#cust.cust_mobile" /></TD>
													
													<!-- 如果select没有值，表示示当前页面不是弹出的选择窗口，让他正常显示内容 -->
													<s:if test="#parameters.select==null">
													<TD>
														<a href="${pageContext.request.contextPath }/CustomerAction_edit?cust_id=<s:property value="#cust.cust_id" />">修改</a>
														   
														<a href="${pageContext.request.contextPath }/customerServlet?method=delete&custId=${customer.cust_id}">删除</a>
													</TD>
													</s:if>				
													<!-- 否则，如果select有值，表示当前页面是弹出的选择窗口-->																							
													<s:else>
													<TD>
													<!-- 选择按钮，点击后触发selectCustomer方法，传递两个参数，cust_name和cust_id，以便将数值传到原页面 -->
														<input type="button" value="选择" onclick="selectCustomer('<s:property value="#cust.cust_name" />','<s:property value="#cust.cust_id" />')">
													</TD>
													</s:else>
												</TR>
											</s:iterator>
										</TBODY>
									</TABLE>
								</TD>
							</TR>

							<TR>
								<TD><SPAN id=pagelink>
										<DIV style="LINE-HEIGHT: 20px; HEIGHT: 20px; TEXT-ALIGN: right">
											共[<B><s:property value="#pageBean.totalCount" /></B>]条记录,[<B><s:property
													value="#pageBean.totalPage" /></B>]页 ,每页显示 <select id="pageSize"
												name="pageSize" onchange="changePageSize()">

												<option value="10"
													<s:property value="#pageBean.pageSize==10?'selected':''" />>10</option>
												<option value="20"
													<s:property value="#pageBean.pageSize==20?'selected':''" />>20</option>
											</select> 条
											[<A href="javascript:void(0)" onclick="changePage(<s:property value='#pageBean.currentPage-1'/>)">前一页</A>] 
											<B><s:property value='#pageBean.currentPage'/></B>
											[<A href="javascript:void(0)" onclick="changePage(<s:property value='#pageBean.currentPage+1'/>)">后一页</A>] 
											到 <input 	type="text" size="3" id="page" name="page" value="<s:property value='#pageBean.currentPage'/>" /> 页 
											<input	type="button" value="Go" onclick="changePage($('#page').val())" />
										</DIV>
								</SPAN></TD>
							</TR>
						</TBODY>
					</TABLE>
				</TD>
				<TD width=15
					background="${pageContext.request.contextPath }/images/new_023.jpg"><IMG
					src="${pageContext.request.contextPath }/images/new_023.jpg"
					border=0></TD>
			</TR>
		</TBODY>
	</TABLE>
	<TABLE cellSpacing=0 cellPadding=0 width="98%" border=0>
		<TBODY>
			<TR>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_024.jpg"
					border=0></TD>
				<TD align=middle width="100%"
					background="${pageContext.request.contextPath }/images/new_025.jpg"
					height=15></TD>
				<TD width=15><IMG
					src="${pageContext.request.contextPath }/images/new_026.jpg"
					border=0></TD>
			</TR>
		</TBODY>
	</TABLE>

</BODY>
</HTML>


评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值