jsp实现局部刷新的一种方法

最新推荐文章于 2025-12-19 22:02:42 发布

原创最新推荐文章于 2025-12-19 22:02:42 发布 · 3w 阅读

14 ·

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

收录于

前端

本文介绍了一种通过替换文本方式实现在网页表格中切换设备状态（停用/启用）的方法。利用 JSP 和 JavaScript 实现了点击按钮后，前端显示状态更新，并通过 AJAX 向后端发送请求，获取新的状态文本并替换原有内容。

一、废话不多说，直接上代码：

如下：当点击停用按钮后，前一列启用状态，改为停用操作列的停用改为启用。

我要说的是其中一种实现方法是替换文本的方式：

jsp页面代码为：

<td id="sta${mac.id }">
	<c:if test="${mac.status==0 }">停用</c:if>
	<c:if test="${mac.status==1 }">启用</c:if>
</td>
<td>
	<span id="TQ${mac.id }" class="chakan" style="width:35px;float:left;">
	   <a href="javascript:openOrStop(${mac.id},${mac.status})">
		<c:if test="${mac.status==1 }">停用</c:if>
		<c:if test="${mac.status==0 }">启用</c:if>
	   </a>
	</span>
	<span class="chakan" style="width:35px;float:left;">
	   <a href="javascript:macModify(${mac.id})">修改</a>
	</span>
	<span class="chakan" style="width:35px;float:left;">
	   <a href="javascript:macDelete(${mac.id})">删除</a>
	</span>
</td>

js事件操作为：

function openOrStop(id,status){
		var sta ="";
		if(status == '0'){
			sta="启用";
		}else if(status == '1'){
			sta="停用";
		}
		mylandConfirmByFunc(
			"停用/启用","确定要"+sta+"吗？",
			function yesFunc(){
// 				window.location = "${pageContext.request.contextPath}/adminx/macManage!openOrStop.do?id="+id;
				var url = "${pageContext.request.contextPath}/adminx/macManage!openOrStop.do?id="+id;
				$.post(url,function(data){
					$("#sta"+id).text(sta);
					$("#TQ"+id).replaceWith(data);
		});
			mylandAlert("信息提示",sta+"成功!");
		},
		function noFunc(){},sta);
}

action 后台代码：其中“macStatus”返回的是jsp局部片段的页面

public String openOrStop(){
		
    	//代码操作。。。。。。    	
	return "macStatus";
}

“”macStatus“” 页面代码为：（只是把要替换掉的jsp部分写进去就行）

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/common/common.jsp"%>

<span id="TQ${mac.id }" class="chakan" style="width:35px;float:left;">
	<a href="javascript:openOrStop(${mac.id},${mac.status})">
		<c:if test="${mac.status==1 }">停用</c:if>
		<c:if test="${mac.status==0 }">启用</c:if>
	</a>
</span>