使用JQuery的方式做ajax请求数据接口

最新推荐文章于 2024-07-15 22:52:27 发布

美酒没故事°

最新推荐文章于 2024-07-15 22:52:27 发布

阅读量1.2k

点赞数 2

文章标签：前端 ajax 数据请求 get post

本文链接：https://blog.csdn.net/qq_42618566/article/details/102681228

版权

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>JQuery方式的AJAX请求</title>
</head>

<body>
	<div id="box">测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</div>
	<button>点击请求数据</button>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script>
		$.ajax({
			type: "GET", // 请求方式
			url: "https://www.apiopen.top/journalismApi", // 请求的接口
			dataType: "json", // 服务器返回数据的类型格式
			async: false, // 异步请求
			data:{     // 请求参数
				'name':'quanyi',
				'birthday':'1996-08-18',
				'position':'WEBdevelopment'
			},
			beforeSend: function () {
				//请求前的处理
			},
			success: function(res) {  // 请求成功时处理
				console.log(res);
				const btn = document.getElementsByTagName('button')[0];
				btn.onclick = () => {
					$("#box").html(res.data.dy[1].digest);
				}
			},
			complete: function () {
				//请求完成的处理
			},
			error: function (err) {   // 请求失败时处理
				console.log(err.msg);
			}
		});
	</script>
</body>

</html>