springboot展示页面（及关于ajax中页面不跳转问题）

JQ实验室

发布于 2022-02-10 14:43:41

2K00

代码可运行

文章被收录于专栏：实用技术实用技术

运行总次数：0

代码可运行

bulid.gradle

dependencies {

	compile 'org.springframework.boot:spring-boot-starter-web:2.3.4.RELEASE'
	compile 'org.apache.httpcomponents:httpclient:4.3.5'
	compile 'org.json:json:20180130'
	testImplementation('org.springframework.boot:spring-boot-starter-test:2.3.4.RELEASE') {
		exclude group: 'org.junit.vintage', module: 'junit-vintage-engine'
	}
}

　application.properties

#\u81ea\u5b9a\u4e49\u7684\u5c5e\u6027\uff0c\u6307\u5b9a\u4e86\u4e00\u4e2a\u8def\u5f84\uff0c\u6ce8\u610f\u8981\u4ee5/\u7ed3\u5c3e
web.upload-path=./resource/static
#\u8868\u793a\u6240\u6709\u7684\u8bbf\u95ee\u90fd\u7ecf\u8fc7\u9759\u6001\u8d44\u6e90\u8def\u5f84
spring.mvc.static-path-pattern=/**

spring.resources.static-locations=file:${web.upload-path},classpath:/static/

　　application.yml

server:
  port: 8081

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>任务监控</title>
<link type="text/css" href="bootstrap/css/bootstrap.min.css"
	rel="stylesheet">
<script src="js/jquery.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>


<style type="text/css">
body {
	text-align: center;
}

.tabTitlesContainer {
	text-align: center;
	font-size: 20px;
	cursor: hand;
	width: 100%;
	border-width: thin;
}

.tabTitleUnSelected {
	background-color: fuchsia;
	width: 100px;
}

.tabTitleUnSelected:hover {
	background-color: Orange;
}

.tabTitleSelected {
	background-color: blue;
	width: 100px;
}

#tabPagesContainer {
	text-align: left;
	width: 100%;
}

.tabPageUnSelected {
	background-color: Orange;
	display: none;
}

.tabPageSelected {
	background-color: white;
	display: block;
	padding-top: 20px;
}

.tabPage {
	min-height: 800px;
	height: 100%;
}

.my-table {
	
}
</style>
</head>
<body>
	<div>
		<h3>任务监控</h3>
	</div>
	<table class="tabTitlesContainer">
		<tr id="tabTitles">
			<td class="tabTitleSelected" onclick="tabPageControl(0)">最近任务</td>
			<td class="tabTitleUnSelected" onclick="tabPageControl(1)">异常任务</td>
			<td class="tabTitleUnSelected" onclick="tabPageControl(2)">本机情况</td>
		</tr>
	</table>
	<div id="tabPagesContainer">
		<div class="tabPageSelected">
			<div class="tabPage">
				<div class="my-table">
					<div class="table-responsive">
						<table id="my-table" class="table table-striped table-bordered">
							<thead>
								<tr>
									<th>#</th>
									<th>属性</th>
									<th>值</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>状态</td>
									<td>正在查询</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">

//我们可以根据jquery来进行自动获取项目路径，获取方法如下
function getRootPath() {
  // 1、获取当前全路径
  var curWwwPath = window.location.href;
  console.log(curWwwPath);
  // 获取当前相对路径： /springmvc/page/frame/test.html
  var pathName = window.location.pathname;
  console.log(pathName);
  // 获取主机地址,如： http://localhost:8080
  var local = curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
  console.log(local);
  // 获取带"/"的项目名，如：/springmvc  
  var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
  console.log(projectName);
  var rootPath = local + projectName;  
  console.log(rootPath);
  //return rootPath;
  return projectName;
}
	var contextPath = getRootPath();
	
	var url = sessionStorage.getItem('server_url');
	var sid = sessionStorage.getItem('sid');
	console.log("sid=" + sid);
	if (sid == null || sid == '') {
		confirm('未登录，跳转登录页');
		window.location.href = "login.html";
	}else{
		getWorkItem();
	}
	
	
	function tabPageControl(n) {
		for (var i = 0; i < tabTitles.cells.length; i++) {
			tabTitles.cells[i].className = "tabTitleUnSelected";
		}
		tabTitles.cells[n].className = "tabTitleSelected";
		
		if(n==2){
			getSystemInfo();
		}else if(n==0){
			getWorkItem();
		}else if(n==1){
			getExcetionWorkItem();
		}
	}
	
	function getSystemInfo(){
		$('#my-table').html("<thead>"+
				"<tr>"+
				"<th>#</th>"+
				"<th>状态</th>"+
				"<th>正在查询</th>"+
				"</tr>"+
				"</thead>");
		$.ajax({
			url:contextPath + '/systemInfo',
			async:true,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"属性"+'</th>'+
				'<th>'+"值"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				//var data = $.parseJSON(res);
				//console.log(data);
				var i = 1;
				$.each(res,function(key,value){
					thbody+='<tr><td>'+(i++)+'</td>'+
					'<td>'+key+'</td>'+
					'<td>'+value+'</td></tr>';
				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				console.log('请求失败：'+e);
			}
		});
	}
	
	function stop(item){
		if(item.state!='Running'){
			alert("只对运行中的任务有效")
			return false;
		}
		
	}
	
	function getWorkItem(){
		
		$.ajax({
			url:contextPath +'/workitem/list?url='+url+"&sid="+sid+"&hostName=",
			async:false,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"任务名称"+'</th>'+
				'<th>'+"活动名称"+'</th>'+
				'<th>'+"处理者"+'</th>'+
				'<th>'+"状态"+'</th>'+
				'<th>'+"进度"+'</th>'+
				'<th>'+"优先级"+'</th>'+
				'<th>'+"创建者"+'</th>'+
				'<th>'+"创建时间"+'</th>'+
				'<th>'+"开始时间"+'</th>'+
				'<th>'+"结束时间"+'</th>'+
				'<th>'+"操作"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				$.each(res,function(n,item){
					thbody+='<tr id='+item.id+'>'+
					'<td>'+(n+1)+'</td>'+
					'<td>'+item.name+'</td>'+
					'<td>'+item.activityDefineName+'</td>'+
					'<td>'+item.worker+'</td>'+
					'<td>'+item.state+'</td>'+
					'<td>'+item.progress+'</td>'+
					'<td>'+item.priority+'</td>'+
					'<td>'+item.createdBy+'</td>'+
					'<td>'+item.createdTime+'</td>'+
					'<td>'+item.startTime+'</td>'+
					'<td>'+item.stopTime+'</td>'+
					'<td><button onclick="stop()"></button></td>'+
					'</tr>';
				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				confirm('请求失败，跳转登录页')?window.location.href = "login.html":console.log("do noting");
				console.log('请求失败：'+e);
			}
		});
	}
	
	function getExcetionWorkItem(){
		$.ajax({
			url:contextPath +'/workitem/list?url='+url+"&sid="+sid+"&status=Exception"+"&hostName=",
			async:false,
			dataType:'json',
			contentType:'application/json',
			success:function(res){
				console.log(res);
				var html = '<thead> '+
				'<tr>'+
				'<th>'+"序号"+'</th>'+
				'<th>'+"任务名称"+'</th>'+
				'<th>'+"活动名称"+'</th>'+
				'<th>'+"处理者"+'</th>'+
				'<th>'+"状态"+'</th>'+
				'<th>'+"进度"+'</th>'+
				'<th>'+"优先级"+'</th>'+
				'<th>'+"创建者"+'</th>'+
				'<th>'+"创建时间"+'</th>'+
				'<th>'+"开始时间"+'</th>'+
				'<th>'+"结束时间"+'</th>'+
				'<th>'+"操作"+'</th>'+
				'</tr>'+
				'</thead>';
				var thbody = '<thbody>';
				$.each(res,function(n,item){
					thbody+='<tr id='+item.id+'>'+
					'<td>'+(n+1)+'</td>'+
					'<td>'+item.name+'</td>'+
					'<td>'+item.activityDefineName+'</td>'+
					'<td>'+item.worker+'</td>'+
					'<td>'+item.state+'</td>'+
					'<td>'+item.progress+'</td>'+
					'<td>'+item.priority+'</td>'+
					'<td>'+item.createdBy+'</td>'+
					'<td>'+item.createdTime+'</td>'+
					'<td>'+item.startTime+'</td>'+
					'<td>'+item.stopTime+'</td>'+
                                         '<td><button onclick="stop(\''+item+'\')">提高优先级</button></td>'+'</tr>';

				});
				thbody+='</thbody>';
				
				$('#my-table').html(html+thbody);
			},
			error:function(e){
				confirm('请求失败，跳转登录页')?window.location.href = "login.html":console.log("do noting");
				console.log('请求失败：'+e);
			}
		});
	}
	
	
</script>

</html>

　　登录页：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>登录页面</title>
<!-- Bootstrap 核心 CSS 文件 -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!--font-awesome 核心我CSS 文件-->
<link href="bootstrap/css/font-awesome.css" rel="stylesheet">
<!-- 在bootstrap.min.js 之前引入 -->
<script src="js/jquery.js"></script>
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!--jquery.validate-->

<style type="text/css">
body {
    background: url(img/bg.jpg) no-repeat;
    background-size: cover;
    font-size: 16px;
}

.form {
    background: rgba(255, 255, 255, 0.2);
    width: 100%;
    margin: 50px auto;
    padding: 100px;
}
#login_form { 
    width:30%;
    margin-left:35%;
    text-align: center;
}
input{
    text-align: center;
}
</style>
</head>
<body>
    <div class="container">
        <div class="form row">
            <form class="form-horizontal"
                id="login_form">
                <h3 class="form-title">登录</h3>
                <div>
                    <div class="form-group">
                        <label class="">系统地址</label>
                        <input class="form-control" type="text"
                            name="systemurl" autofocus="autofocus"
                            maxlength="100" value="http://127.0.0.1/central"/>
                    </div>
                    
                    <div class="form-group">
                        <label>用户名</label>
                        <input class="form-control" type="text"
                            name="username" autofocus="autofocus"
                            maxlength="20" />
                    </div>
                    <div class="form-group">
                        <label>密码</label>
                        <input class="form-control" type="password"
                            name="password" maxlength="20" />
                    </div>
                    <div class="form-group">
                        <input type="button" onclick="login()" class="btn btn-success"
                            value="登录 " />
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
<script type="text/javascript">

$('input[name="systemurl"]').val(sessionStorage.getItem("server_url"));
$('input[name="username"]').val(sessionStorage.getItem("userId"));
$('input[name="password"]').val(sessionStorage.getItem("password"));
function getRootPath() {
    
      // 1、获取当前全路径
      var curWwwPath = window.location.href;
      console.log(curWwwPath);
      // 获取当前相对路径： /springmvc/page/frame/test.html
      var pathName = window.location.pathname;
      console.log(pathName);
      // 获取主机地址,如： http://localhost:8080
      var local = curWwwPath.substring(0,curWwwPath.indexOf(pathName));  
      console.log(local);
      // 获取带"/"的项目名，如：/springmvc  
      var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1); 
      console.log(projectName);
      var rootPath = local + projectName;  
      console.log(rootPath);
      //return rootPath;
      return projectName;
    }
var contextPath = getRootPath();


    function login(){
        var url = $('input[name="systemurl"]').val();
        var userId = $('input[name="username"]').val();
        var password = $('input[name="password"]').val();
        if(url=='' || userId=='' || password==''){
            alert("都不可空！！！");
            return;
        }
        sessionStorage.setItem("server_url",url);
        sessionStorage.setItem("userId",userId);
        sessionStorage.setItem("password",password);
        
        $.ajax({
            url:contextPath + '/logon?url='+url+"&userId="+userId+"&password="+password,
            async:false,
            type:"POST",
            //dataType:'json',
            //contentType:'application/json',
            success:function(res){
                console.log(res);
                sessionStorage.setItem("sid",res);
                sessionStorage.setItem("server_url",url);
                $('input[type="button"]').val("登录成功");
                setTimeout('window.location.href = "index.html"',1000);
            },
            error:function(err){
                sessionStorage.setItem("sid","");
                console.log(err);
                confirm("登录失败");
            }
        });
    }        
        
</script>
</html>

关于登录页需要说一下：

当按钮typ为submit时，在ajax的success的方法中window.location,href跳转不起作用；

原因: 因为有提交了一次表单。你的ajax是同步的，所以提交表单动作被挂起直到ajax完毕后（此时执行请求过一次服务器），表单会提交，这样就会执行页面指定的action的地址, 而ajax回调success href的链接赋值不成功

参考网络上的说明：你点击了submit，它会提交表单，但是由于你用了ajax的同步操作，submit的提交被阻塞，ajax先执行，这个时候，如果你在ajax的回调函数（如：success）中写了document.location.href='xxx.html'，它是执行了，的确是去执行了跳转的，于是ajax完成了，那接下来就要把刚才的submit提交的请求完成。于是呢又要从xxx.html跳回到刚才那个页面（无论你submit有没有提交具体的数据，总之提交了之后如果后台没有执行跳转/重定向，它就要回到原来的页面。）

即：ajax就是如你所想那样执行了，也从A页面跳到了B页面，但是由于submit这种类型的特殊性，又让B页面跳回了A页面，由于这个ajax执行完再执行submit请求的过程处理的很快，你会感到好像没有效果，但是你仔细观察，会发现这个过程页面会刷新的，其实就是B页面跳回到A页面。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-10-29 ，如有侵权请联系 cloudcommunity@tencent.com 删除

ajax