【JavaScript】fetch()函数、URLSearchParams对象

最新推荐文章于 2023-07-15 10:44:49 发布

iuukai

最新推荐文章于 2023-07-15 10:44:49 发布

阅读量702

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45389633/article/details/110729422

版权

JavaScript 专栏收录该内容

46 篇文章 1 订阅

订阅专栏

传送门：

1. JavaScript 教程 / 浏览器模型 / Location 对象，URL 对象，URLSearchParams 对象

2. MDN - 使用 Fetch

2. Fetch - 数据交互方式

3. 详解fetch的使用方法及如何接收JS传值

server.php

<?php
	echo $_POST['foo'] + $_POST['bar'];
?>

一、原生ajax - 数据交互

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 数据
		var foo = 1,
			bar = 2;
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'server.php', true);
		xhr.onreadystatechange = function() {
			if (this.readyState === 4 && this.status === 200) {
				console.log(this.responseText);
			}
		};
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send('foo=' + foo + '&bar=' + bar);
	</script>
</body>
</html>

二、fetch - 数据交互

index.html()

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 数据
		var foo = 1,
			bar = 2;
		
		fetch('server.php', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			body: 'foo=' + foo + '&bar=' + bar
		}).then(function(response) {
			return response.text();
		}).then(function(response) {
			console.log(response);
		});
	</script>
</body>
</html>

三、使用 URLSearchParams 对象

ajax

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 数据
		var params = new URLSearchParams({foo: 1, bar: 2});
		
		var xhr = new XMLHttpRequest();
		xhr.open('POST', 'server.php', true);
		xhr.onreadystatechange = function() {
			if (this.readyState === 4 && this.status === 200) {
				console.log(this.responseText);
			}
		};
		xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
		xhr.send(params);
	</script>
</body>
</html>

fetch

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 数据
		var params = new URLSearchParams({foo: 1, bar: 2});
		
		fetch('server.php', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			body: params
		}).then(function(res) {
			return res.text();
		}).then(function(res) {
			console.log(res);
		});
	</script>
</body>
</html>

四、其它接口对象的使用

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title></title>
</head>
<body>
	<script>
		// 查询参数对象
		const params = new URLSearchParams({foo: 1, bar: 2});
		
		// 头信息对象
		const myHeader = new Headers();
		myHeader.append('Content-Type', 'application/x-www-form-urlencoded');
		
		// 请求对象
		const request = new Request('server.php', {
			method: 'POST',
			headers: myHeader,
			body: params
		});
		
		fetch(request).then(res => res.text())
			.then(res => console.log(res));
	</script>
</body>
</html>