fetch异步简单版本(Tomcat 9)

smallRainFetch.jsp

html 复制代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<title>fetch</title>
</head>
<body>

</body>
</html>

<input type="text" id="inputone" name="inputNameOne"
	value="fetchGet服务" />
<button onclick="getFromServer()">fetch和服务器交互</button>

<div id="smallRainShow" style="width: 400px; height: 300px;"></div>

<script type="text/javascript">
function getFromServer() {

	const valueTo = document.getElementById('inputone').value;
	fetch('<%=request.getContextPath()%>/smallRainFetchServlet?inputNameOne=' + valueTo)
		.then(smallRainRes => {
			return smallRainRes.text();
		})
		.then(smallRainData => {
			document.getElementById("smallRainShow").innerHTML = smallRainData;
		})
		.catch(error => {
			alert("error");
		});
}
  </script>

SmallRainFetchServlet.java java文件

java 复制代码
package org.rain.servlet;

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

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

@WebServlet("/smallRainFetchServlet")
public class SmallRainFetchServlet extends HttpServlet {
	@Override
	public void doPost(HttpServletRequest smallrainReq, HttpServletResponse smallRainRes) throws ServletException, IOException {
		doGet(smallrainReq, smallRainRes);
	}
	@Override
	public void doGet(HttpServletRequest smallrainReq, HttpServletResponse smallRainRes) throws ServletException, IOException {
		smallRainRes.setCharacterEncoding("UTF-8");
		PrintWriter smallrainOut = smallRainRes.getWriter();
		String smallRainWeb=smallrainReq.getParameter("inputNameOne");
		smallrainOut.print("得到服务器返回:"+smallRainWeb);
	}
}
相关推荐
灿飞屋21 分钟前
Kotlin与Java虚拟机四:函数
java·python·kotlin·安卓·android jetpack
古茗前端团队28 分钟前
由 key 引发的思考
前端·javascript·react.js
kyriewen1 小时前
我扫了 422 个仓库,近一半 CI 在裸装依赖
前端·javascript·程序员
鹏多多1 小时前
AI 到底能不能独立做个产品?我拿一个小程序验证了
前端·微信小程序·ai编程
火山引擎开发者社区1 小时前
构建专属的飞书群开发助手,AgentKit Studio 一键部署 DeepSeek Harness Super-Agent
前端
阡陌数智1 小时前
Claude API新版本重大变更与安全升级指南
java·linux·安全
学长毕设3 小时前
基于SpringBoot的野生动物公益保护平台设计与实现-附源码
java·spring boot·后端
啾咪orJIUMI3 小时前
Vue 3 + 高德地图封装实战:点位、区域、Loca 流光与 Vue 信息窗体
前端·vue.js
掘金者阿豪3 小时前
AI数据库不只是向量检索:从数据语义到库内智能计算的技术演进
前端
梦里寻码3 小时前
我用 NestJS + Vue3 写了一套完整的研发管理系统(58 表 / 229 API / 130 项断言,全开源
前端·后端·算法