Refer

199.尚硅谷EL表达式-11个EL隐含对象的介绍哔哩哔哩_bilibili

目录结构及其他文件说明

目录

  • jstl.jar和standard.jar为JSP文件中EL表达式的支持文件
  • jquery-1.10.1.min.js为html文件使用Ajax函数所需要的文件

主要代码

index.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算同心圆的面积差</title>


<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
<!-- 
以下为使用jquery的script脚本代码
-->
<script>
var flag_user=false;
$(function(){ 
//当点击 class为reg 的按钮元素时
$("#submit").click(function(){
	// 获取 class为username的输入框元素 的值  并存入变量username中
	var bigRadius=$("#bigRadius").val();
	var smallRadius=$("#smallRadius").val();
	// 执行以下ajax函数
	$.ajax({
		"url":"Calc",  // 往ccc.jsp发送一个请求
		"type":"POST",    // 类型为post
		"data":{"bigRadius":bigRadius,"smallRadius":smallRadius},  // 请求中的数据包含 username (上面定义过的)
		"success":function(data){      // 在请求成功后执行以下方法  data为jsp页面的回传参数
			//$("#calcResult").html(data); // data转换为html内容  并赋给 class为userResult的元素
			window.location.href = '/Homework-baseExample/resultShow.jsp';
		    return false;
		}
	})
})
})
</script>
</head>

<body>

<!-- 使用fieldset对表单进行分组 -->
<fieldset>
<legend>同心圆的信息</legend>

<!-- 大圆半径的div -->
<div>
<span>大圆半径:</span>
<input type="text" id="bigRadius" name="bigRadius"/>
<span id="userResult"></span>
</div>

<!-- 小圆半径的div -->
<div>
<span>小圆半径:</span>
<input type="text" id="smallRadius" name="smallRadius"/>
</div>

<!-- 注册按钮和查询结果的div -->
<div>
<input id="submit" type="button" value="提交查看结果">
<span id="calcResult"></span>
</div>

</fieldset>

</body>
</html>

resultShow.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Calc result show</title>
</head>
<body>

<%	request.setAttribute("key","val"); %>
	计算结果:${sessionScope.result}</br>
</body>
</html>

web.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd" id="WebApp_ID" version="4.0">
  <display-name>Homework-baseExample</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.jsp</welcome-file>
    <welcome-file>default.htm</welcome-file>
  </welcome-file-list>
  
  <servlet>
  	<servlet-name>Calc</servlet-name>
  	<servlet-class>test.CalcServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>Calc</servlet-name>
  	<url-pattern>/Calc</url-pattern>
  </servlet-mapping>
  
  
</web-app>

CalcServlet.java

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
package test;


import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import javax.websocket.Session;

public class CalcServlet extends HttpServlet {
	public void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setContentType("text/html");
		response.setCharacterEncoding("UTF-8");
		request.setCharacterEncoding("UTF-8");
		
		String bigRadius = request.getParameter("bigRadius");
		String smallRadius = request.getParameter("smallRadius");
		
		double bigR = Double.parseDouble(bigRadius);
		double smallR = Double.parseDouble(smallRadius);
		
		double result1 = (bigR*bigR-smallR*smallR)*3.14;
		String result =  String.valueOf(result1); 
		
//		request.setAttribute("result",result);
		HttpSession session = request.getSession();
		session.setAttribute("result",result);
		
		request.getRequestDispatcher("/resultShow.jsp").forward(request,response);
//		System.out.println(request.getAttribute("result"));
	}

}

问题

当CalcServlet.java文件中是使用request.setAttribute(“result”,result);时页面不能正常跳转

原因:当前请求和Ajax发出的请求不是同一个请求，故不是同一个request作用域，jsp页面就不能正常渲染结果

修改方法：使用Session作用域

1
2
HttpSession session = request.getSession();
session.setAttribute("result",result);

并在jsp页面使用

1
${sessionScope.result}

以指定调用session作用域的result数据