JSP页面动态显示与AJAX交互-优快云博客

本文链接：https://blog.youkuaiyun.com/myth19991999/article/details/83688249

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html lang="en">
 <head>
     <title>标题</title>
     <style>
#msgDiv {
    z-index:10001;
    width:190px;
    height:100px;
    background:white;
    border:#336699 1px solid;
    position:absolute;
    left:30%;
    top:20%;
    font-size:15px;
    margin-left:0px;
    display: none;
}
#bgDiv {
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    right:0px;
    background-color: #777;
    filter:progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75);
    opacity: 0.6;
}
</style>
 </head>
 <body>
<div id="msgDiv">
	<div id="msgShut">关闭</div>
    <div id="msgDetail"></div>
</div>
<div id="bgDiv"></div>
<p></p>
<!-- <p><a href="#" onClick="showDetail()">点击我看看</a></p> -->
<script type="text/javascript">
function showDetail(msg){
	//msgDiv
	var msgDiv = document.getElementById("msgDiv");
	msgDiv.style.marginTop = -75 + document.documentElement.scrollTop + "px";
	//bgDiv
	var bgDiv = document.getElementById("bgDiv");
	bgDiv.style.width = document.body.offsetwidth + "px";
	bgDiv.style.height = screen.height + "px";
	//msgShut
	/* var msgShut = document.getElementById("msgShut");
	msgShut.onclick = function(){
		bgDiv.style.display = msgDiv.style.display = "none";
	} */
	//content
	msgDiv.style.display = bgDiv.style.display = "block";
	var msgDetail = document.getElementById("msgDetail");
	msgDetail.innerHTML = "<p style='line-height:50px;font-size:15px;text-align:center'>"+msg+"</p>";
}

//保存数据
$("#saveData").click(function(){
	$.ajax({
	 	   type: "post",
	 	   url: "${ctx}/weixin/user/bspUserCompanyedit",
	 	   cache: false,
	 	   data:  data,
	 	  beforeSend: function(){
	 		 showDetail("提交中，请稍等...");
      		},
	        success: function (text) {
	        	//关闭遮罩
	            bgDiv.style.display = msgDiv.style.display = "none";
	        },
	        error: function (jqXHR, textStatus, errorThrown) {
	            alert(jqXHR.responseText);
	        }
	    });
 });

</script>
 </body>
</html>

关于ajax提交遮罩