jsp 加法口算 - Ajax_calculateajax-CSDN博客

本文链接：https://blog.csdn.net/weixin_52554179/article/details/124285514

calculateAjax.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
<head>
<title>加法口算 - Ajax</title>
</head>

<body>
	<div style="width: 600px; margin: 20px auto; line-height: 40px;">
		<h3>&emsp;&emsp; 加法口算 - Ajax</h3>
		<!-- 		<form action="CalculateByServlet" method="post"> -->
		${number1 } + ${number2} = <input type="text" name="answer"
			maxlength="4" style="width: 50px; text-align: center;"> <input
			type="submit" value="提交" onclick="calculate()"> &emsp; <span
			id="msg" style="color: red; font-size: small;"></span>
		<!-- 		</form> -->
		<br> &emsp;&emsp;&emsp;&emsp;<a href="index.jsp">首页</a>
	</div>
</body>
<script type="text/javascript">
	function calculate() {

		var answer = document.getElementsByName("answer")[0].value;

		var url = "CalculateAjax"; //URL中的目标程序（Servlet的虚拟路径）LoginEL?username=tom&password=123
		url += "?answer=" + answer;

		var xhr = new XMLHttpRequest(); //创建对象
		xhr.open("post", url, true); //打开连接，参数：post方法，网址，true异步
		xhr.send();

		xhr.onreadystatechange = function() { //如果预备完毕且状态有改变
			if (xhr.readyState == 4 && xhr.status == 200) { //如果能建立与服务器的连接，且成功接受到信息
				setMsg(xhr.responseText); //输出返回的信息

			}
		};

	}

	function setMsg(result) {
		//####添加代码			//网页在2秒后自动跳转 
		if (result.indexOf("恭喜") >= 0) {
			setTimeout("window.location.href='calculateAjax.jsp'", 10000)//网页在2秒后自动跳转 

		}

		document.getElementById("msg").innerHTML = result; //在msg显示output中的内容
	}
</script>


</html>

CalculateAjax.java

package com;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import com.sun.net.httpserver.HttpsServer;

@WebServlet("/CalculateAjax")
public class CalculateAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {

		request.setCharacterEncoding("UTF-8"); // 设置请求内容的编码
		response.setContentType("text/html;charset=UTF-8"); // 设置输出的文档类型和字符编码
		// java.io.PrintWriter out = response.getWriter(); //获取输出句柄
		String msg = "";

		String answer = request.getParameter("answer"); // 获取输入的值

		for (int f = 0; f < 1; f++) {

			HttpSession session = request.getSession(); // 获取或创建session

			Integer number1 = (Integer) session.getAttribute("number1"); // 从session获取值
			Integer number2 = (Integer) session.getAttribute("number2");

			if (number1 == null || number2 == null || answer == null) { // 未生成随机数或无输入
				randomNumberToSession(request); // ****生成2个随机数并存入session
				break;
			}

			Integer answerInt = 0;

			try {
				answerInt = Integer.parseInt(answer);
			} catch (Exception e) {
				msg = "请输入一个整数！";
				break;
			} // 将answer转换为整数对象answerInt

			if (number1 + number2 != answerInt) {
				msg = "遗憾，计算错了，你上一次的输入是：" + number1 + "+" + number2 + "=" + answer;
				break;
			}

			msg = "恭喜，计算正确！请进行新一轮的计算。";
			randomNumberToSession(request); // *******生成2个随机数并存入session
		}

		request.setAttribute("msg", msg); // 在request中给消息msg赋值

		request.setCharacterEncoding("UTF-8"); // 设置请求内容的编码
		response.setContentType("text/html;charset=UTF-8"); // 设置响应的文档类型和字符编码

		PrintWriter out = response.getWriter();
//		String msg="";

		msg = request.getAttribute("msg").toString();// 获取msg值变成字符串
		out.println(msg);

		return;
	}

	// ----------生成2个随机数并存入session
	public void randomNumberToSession(HttpServletRequest request) {
		HttpSession session = request.getSession(); // 获取或创建session
		Random random = new Random(); // 创建随机对象

		int number1 = random.nextInt(51); // 生成0~50的随机数字1
		int number2 = random.nextInt(51); // 生成0~50的随机数字2
		session.setAttribute("number1", number1); // 在session中给number1赋值
		session.setAttribute("number2", number2); // 在session中给number2赋值
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doGet(request, response);

	}
}