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

bulid.gradle

?
1
2
3
4
5
6
7
8
9
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

?
1
2
3
4
5
6
#\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

?
1
2
server:
  port: 8081　　

html:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
<!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>'+<br>                                         '<td><button onclick="stop(\''+item+'\')">提高优先级</button></td>'+'</tr>';<em id="__mceDel">               });
                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>
</em>

　　登录页：

复制代码
<!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页面。
 
posted @   凉城  阅读(1606)  评论(0)  编辑  收藏  举报
编辑推荐：
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· AI与.NET技术实操系列（五）：向量存储与相似性搜索在 .NET 中的实现
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示
AI IDE Trae