JSP中通过Ajax发送请求并且处理json格式的响应

最新推荐文章于 2023-12-07 14:32:25 发布

原创

最新推荐文章于 2023-12-07 14:32:25 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

本文详细介绍了在JSP中如何通过Ajax异步发送GET和POST请求，并且重点讲解了如何处理来自后端的Json格式响应。提供前端JSP页面和后端Servlet的代码示例，同时推荐了相关Ajax和Json处理的博客资源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、在jsp文件中通过Ajax异步发送get请求，处理Json格式的响应

前端jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax的get请求</title>
</head>
<script type="text/javascript">
	function login() {
   
   
		//获取两个文本框中的内容
		var userName = document.getElementById("userName").value;
		var password = document.getElementById("password").value;
		//拼接表单
		var params = "userName=" + userName + "&password=" + password;
		var url = "${pageContext.request.contextPath}/LoginServlet?" + params;
		//获取请求
		var request = new XMLHttpRequest();
		//设置函数监测准备状态码的改变
		request.onreadystatechange = function() {
   
   
			console.log("准备状态码:" + request.readyState + "\t" + "响应状态:" + request.status);
			//准备状态码 == 4说明服务器已经返回了请求，响应状态 = 200说明服务器响应正常
			if (request.readyState == 4 && request.status == 200) {
   
   
				//获取响应内容
				var responseText = request.responseText;
				//将得到的json格式字符串转为json对象
				var jsonObj = JSON.parse(responseText);
				//输出到tip中
				var tipTag = document.getElementById("tip");
				//获取json对象的中Msg信息
				tipTag.innerHTML = jsonObj.Msg;
			}
		}
		//设置为get请求，异步方式
		request.open("get", url, true);
		//提交请求
		request.send();
	}
</script>
<body>
	<form>
		<table border="1">
			<tr>
				<td>用户名</td>
				<td><input type="text" name="userName" id=