024_Fetch

最新推荐文章于 2024-02-06 18:28:22 发布

自由与束缚JavaJavaScript

最新推荐文章于 2024-02-06 18:28:22 发布

阅读量299

点赞数

分类专栏： vue 文章标签：前端 java 服务器

本文链接：https://blog.csdn.net/aihiao/article/details/122900327

版权

vue 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

本文介绍了Fetch API的简洁用法，通过示例展示了如何在Java Servlet中使用Fetch实现GET和POST请求，并演示了Fetch与Promise在前后端交互中的应用，包括参数传递和JSON响应。

摘要由CSDN通过智能技术生成

1. fetch更加简单的数据获取方式, 功能更加强大、更加灵活, 是基于Promise实现的。

2. fetch语法结构

fetch(url).then(fun1)
	.then(fun2)
	......
	.catch(fun)

3. 新建一个名为Promise的动态Web工程

3.1. 编写FetchAjax.java

package com.bjbs.fa;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FetchAjax extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String id = req.getParameter("id");
		resp.getWriter().write("Fetch Ajax get Request...   id = " + id);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

3.2. 编写FetchAjaxPost.java

package com.bjbs.fa;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FetchAjaxPost extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String uname = req.getParameter("uname");
		String pwd = req.getParameter("pwd");
		resp.getWriter().write("Fetch Ajax post Request...   uname = " + uname + ", pwd = " + pwd);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

3.3. 编写FetchAjaxPostJson.java

package com.bjbs.fa;

import java.io.BufferedReader;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class FetchAjaxPostJson extends HttpServlet {
	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		BufferedReader br = req.getReader();
		String result = "", rl = null;
		while((rl = br.readLine()) != null) {
			result += rl;
		}
		System.out.println("Fetch Ajax post Request Json Param...   result = " + result);
		
		String res = "{\"code\":1,\"result\":\"success.\"}";
		resp.getWriter().write(res);
	}
	
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		doGet(req, resp);
	}
}

3.4. 修改web.xml

3.5. 编写FetchGet.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fetch基本用法-get</title>
	</head>
	<body>
		<script type="text/javascript">
			fetch("http://localhost:8080/Fetch/fa.action?id=123").then(function(res){
		      	// text()方法属于fetchAPI的一部分, 它返回一个Promise实例对象, 用于获取后台返回的数据
		    	return res.text();
		    }).then(function(data){
		     	document.write(data + "<br />");
		    });
			
			// get参数传递
			fetch("http://localhost:8080/Fetch/fa.action?id=456", {
		    	method: 'get'
		    }).then(function(res){
		        return res.text();
		    }).then(function(data){
		    	document.write(data + "<br />");
		    });
		</script>
	</body>
</html>

3.6. 编写FetchPost.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Fetch基本用法-post</title>
	</head>
	<body>
		<script type="text/javascript">
			// post参数传递
			fetch("http://localhost:8080/Fetch/fap.action", {
		    	method: 'post',
		    	body: 'uname=lisi&pwd=123',
		    	headers: {
		    		'Content-Type': 'application/x-www-form-urlencoded'
		    	}
		    }).then(function(res){
		        return res.text();
		    }).then(function(data){
		    	document.write(data + "<br />");
		    });
			
			// post传递json参数
			fetch("http://localhost:8080/Fetch/fapj.action", {
		    	method: 'post',
		    	body: JSON.stringify({uname: 'zhangsan', pwd: '456'}),
		    	headers: {
		    		'Content-Type': 'application/json'
		    	}
		    }).then(function(res){
		        return res.json();
		    }).then(function(data){
		    	document.write("code = " + data.code + ", result = " + data.result + "<br />");
		    });
		</script>
	</body>
</html>

3.7. 运行项目, 访问FetchGet.html