119-(AJAX)post

最新推荐文章于 2024-11-07 07:00:00 发布

七色的天空

最新推荐文章于 2024-11-07 07:00:00 发布

阅读量50

点赞数

分类专栏： 04_JavaScript 文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/q506174602/article/details/133702954

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>post</title>
	<style type="text/css">
		.info {
			color: red;
		}
	</style>
</head>
<body>
	<h2>登录</h2>

	<span>用户名:</span> <input class="username" type="text" name=""> <br>
	<span>密 码:</span> <input class="pwd" type="password" name=""> <br>

	<button>登录</button>  <br>

	<button class="user-list">用户列表</button>  <br>

	<span class="info"></span>

	<script type="text/javascript">
		// 1.先获取页面元素
		var btn = document.querySelector('button');
		var userListEleObj = document.querySelector('.user-list');
		var username = document.querySelector('.username');
		var pwd = document.querySelector('.pwd');
		var span = document.querySelector('.info');
		var globalToken = ''; // 将token存到当前页的全局变量中;
		btn.onclick = function() {
			// 1. 判断用户输入的是否合法
			if(!username.value || !pwd.value) {
				span.innerText = '用户名或密码不能为空';
				return;
			}
			console.log('是否执行');
			// 2 创建异步对象
			var xhr = new XMLHttpRequest();
			// 3.建立连接 post
			// http://124.223.98.197:10086/prod-api/login
			// xhr.open('post', 'http://wish.byesame.com/login');
			xhr.open('post', 'http://124.223.98.197:10086/prod-api/login');
			// application/x-www-form-urlencoded
			xhr.setRequestHeader('Content-type', 'application/json');
			var obj = {
				username: username.value,
				password: pwd.value
			};
			xhr.send(JSON.stringify(obj));
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4) {
					var res = JSON.parse(xhr.responseText);
					console.log(res);
					if (res.code === 200) {
						var token = 'Bearer ' +  res.token;
						globalToken = token;  // 将token存到当前页的全局变量中;
						localStorage.setItem('token', token);
						var xhrUserInfo = new XMLHttpRequest();
						xhrUserInfo.open('get', 'http://124.223.98.197:10086/prod-api/getInfo');

						xhrUserInfo.setRequestHeader('Content-type', 'application/json');
						xhrUserInfo.setRequestHeader('Authorization', token);

						xhrUserInfo.send();
						xhrUserInfo.onreadystatechange = function() {
							if (xhrUserInfo.readyState === 4) {
								var userInfo = JSON.parse(xhrUserInfo.responseText);
								if (userInfo.code === 200) {
									console.log(userInfo);
								}
							}
						}

					} else {
						alert(res.msg);
					}
				}
			}
		}
		userListEleObj.onclick = function() {
			var xhrUserList = new XMLHttpRequest();
			xhrUserList.open('GET', 'http://124.223.98.197:10086/prod-api/system/user/list?pageNum=1&pageSize=10');

			xhrUserList.setRequestHeader('Content-type', 'application/json');
			// xhrUserList.setRequestHeader('Authorization', 'Bearer ' + globalToken);
			xhrUserList.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('token'));

			xhrUserList.send();
			xhrUserList.onreadystatechange = function() {
				if (xhrUserList.readyState === 4) {
					var userList = JSON.parse(xhrUserList.responseText);
					if (userList.code === 200) {
						console.log(userList);
					}
				}
			}
		}


		// 送给于思辰
		/*
		get 一般用于获取信息, 使用url传递参数, 对所发送信息的数量大小是有限制的, 一般在2000个字符, 个别浏览器可能是8000个字符;
		而post一般用于修改服务器资源, 对客户端发送的数据没有限制, 
			-- 更新服务器的文件或者数据库内容一般使用post
			--向服务器发送大量数据(post没有数据量限制)
			-- 发送包含未知字符的用户输入, post比get更稳定


		2022年5月28日 周六
		下午: 设置token 简单缓存 字符串变量(模板字符串) 接口文档   同源策略  跨域
		作业: 文件
		*/
	</script>
</body>
</html>