JSP页面细节

最新推荐文章于 2026-06-16 09:50:02 发布

原创最新推荐文章于 2026-06-16 09:50:02 发布 · 586 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jsp #java web

JavaScript/JQuery 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何通过Ajax加载房间信息，实现数据的动态更新；阐述了选择框记忆用户选择的功能实现，以及如何通过URL参数传递非提交数据；并讨论了打印时的注意事项和导出数据的流程优化。文章涵盖了前端与后端交互的关键技术点，旨在提升用户体验和系统效率。

1.select根据后台的值，刷新后还是会记住选中的值

<span style="font-size:14px;"><select name="hardwareId" id="hardwareId">
    <s:iterator value="topInfors" id="item" status="status" var="item" >
	<option value="<s:property value="id"/>" <s:if test="hardwareId==id">selected=selected</s:if>><s:property value="topName"/></option>
    </s:iterator>
</select></span>

2.设置跳转地址，导出action 提交后，要重新设置Action，否则点击任何按钮都会跳到导出的Action上

$("#btnExport").click(function(){
			if("${total}"<1)
			{
				alert("没有数据可供导出。");
				return false;
			}
	
			if(confirm("确定导出数据？提示:若是大数据量的导出将消耗一定的时间。")){
				$("#searchHardwareInfoForm").attr("action","exportHardwareInfo.action");
				$("#searchHardwareInfoForm").submit();
				$("#searchHardwareInfoForm").attr("action","searchHardwareInfo.action");
				}
		});

3.打印时注意：没有submit的数据，前台是传不到后台的，可以通过url里面加多个参数来传递

function printPage()
	{
		if("${total}">0)
		{
			var hardwareId=$("#hardwareId").val();
			var hardwareName=$("#hardwareId").find("option:selected").text();
			window.open("searchHardwareInfo.action?isPrint=Y&hardwareId="+hardwareId+"&hardwareName="+hardwareName);
		}
		else
		{
			alert("没有数据可供打印。");
			return false;
		}
	}

4.控件的值

	a.修改控件的值
		$("#textBtn").val("退出");
	b.获取控件的值
		var content=$("#textBtn").text();

5.前台遍历，后台已经存入List的内容

//recordsList是后台存储数据的List<Object[]>
	<ul>
		<c:forEach var="i" items="${requestScope.recordsList}">
			<li>
				<div class="ui-grid-c">
					<div class="ui-block-a" align="center">${i[0]}</div>
					<div class="ui-block-b" align="center">${i[1]}</div>
					<div class="ui-block-c" align="center">${i[2]}</div>
					<div class="ui-block-d" align="center">${i[3]}</div>
				</div>
			</li>
		</c:forEach>
	</ul>

6.在显示页面时，通过ajax加载房间信息

$(document).on("pageinit", function() 
	{
		//alert("触发 pageinit 事件 - 页面已初始化，DOM 已加载，jQuery Mobile 已完成页面增强。")
		$.ajax
		({
			type : "POST",
			async : false,
			//调用的servlet地址  type=prepare 是传递过去的参数
			url : "<%=basePath%>/AjaxSettingServlet?type=prepare",
			
			success : function(data) 
			{
			    var objs=eval("("+data+")");
				$("#roomId").empty();
				//roomId是一个select  直接添加option
				$("#roomId").append("<option value=\"\">请选择楼栋：</option>   ");
	  
				//遍历返回的值，加到option	
				for(var i=0;i<objs.length;i++)
				{
					$("#roomId").append("<option value=\""+objs[i].room_id+"\">"+objs[i].room_name+"</option>   ");
				}
			}
 		});
	});

Servlet中是将查询到的数据放到PrintWriter里：

PrintWriter out = response.getWriter();
        JSONObject json;
        JSONArray jsonArray;
		json = new JSONObject(iCommUseImp.queryAddrData("build", ""));
		jsonArray = json.getJSONArray("data");
		out.write(jsonArray.toString());
		out.close();