118-(AJAX)get

最新推荐文章于 2024-07-25 15:19:10 发布

七色的天空

最新推荐文章于 2024-07-25 15:19:10 发布

阅读量24

点赞数

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

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

版权

04_JavaScript 专栏收录该内容

121 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>get</title>
</head>
<body>
	<input type="text" name="" placeholder="请输入城市名称">
	<button>获取城市天气</button>

	<div class="content">
		<h2></h2>
		<img src="">
		<span></span>
	</div>

	<script type="text/javascript" src="./ajax.js"></script>
	<script type="text/javascript">
		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);
				}
			}
		}



		var urlRes = getParamsObj(location.href);
		console.log('地址栏上的参数', urlRes);
		if (urlRes) {
			alert('您好' + urlRes.name + ', 欢迎登录');
		}
		// 1.获取页面元素
		var btn = document.querySelector('button');
		var img = document.querySelector('img');
		var span = document.querySelector('span');
		// 2. 添加点击事件
		btn.onclick = function() {

			var cityName = document.querySelector('input');
			// 3.1 创建 Ajax 异步对象
			var xhr = new XMLHttpRequest();
			// 3.2 与服务器建立连接
			if(cityName.value) {
				xhr.open('get', 'https://geoapi.qweather.com/v2/city/lookup?location=' + cityName.value + '&key=bc89ee9752c9420a90ef784b04ff328e' );

				// xhr.setRequestHeader('Content-type', 'application/json'); // x-www-form-urlencoded
				xhr.send();
				xhr.onreadystatechange = function() {
					if (xhr.readyState === 4) {
						var responseObj = JSON.parse(xhr.responseText);
						if (responseObj.code == 200) {
							var cityId = responseObj.location[0].id;
							console.log('获取到青岛市的 id', cityId);


							// 'https://devapi.qweather.com/v7/weather/now?location=' + cityId + '&key=bc89ee9752c9420a90ef784b04ff328e' 
							var xhr1 = new XMLHttpRequest();
							xhr1.open('get', 'https://devapi.qweather.com/v7/weather/now?location=' + cityId + '&key=bc89ee9752c9420a90ef784b04ff328e');
							// xhr1.open('get', `https://devapi.qweather.com/v7/weather/now?location=${cityId}&key=bc89ee9752c9420a90ef784b04ff328e`);
							xhr1.send();
							xhr1.onreadystatechange = function() {
								if (xhr1.readyState === 4) {
									var resObj = JSON.parse(xhr1.responseText);
									if (resObj.code == 200) {
										console.log(resObj); // 数字 相当于icon图片的名字   101.png
										// img.setAttribute('src', './128/' + resObj.now.icon + '.png');
										img.setAttribute('src', `./128/${resObj.now.icon}.png`); // 模板字符串
										span.innerText = resObj.now.text
									}
								}
							}
							var getWUrl = 'https://devapi.qweather.com/v7/weather/now?location=' + cityId + '&key=bc89ee9752c9420a90ef784b04ff328e';
							var obj = getWeatherInfo('get', getWUrl, '');
							console.log('图片', obj);
						}
					}
				}
			} else {
				alert('请输入城市名称');
			}
			
		}

		// btn.onclick = function() {
		// 	var cityName = document.querySelector('input');
		// 	if (!cityName.value) {
		// 		alert('请输入城市名称');
		// 		return;
		// 	}
		// 	var getIdUrl = 'https://geoapi.qweather.com/v2/city/lookup?location=' + cityName.value + '&key=bc89ee9752c9420a90ef784b04ff328e';
		// 	var responseObj = getWeatherInfo('get', getIdUrl, '');
		// 	console.log('-----------', responseObj); // 异步回调, 不能等待函数结果返回就执行后面的代码了
		// }

		function getWeatherInfo(method, url, param) { // param string
			console.log('进入方法');
			// 3.1 创建 Ajax 异步对象
			var xhr = new XMLHttpRequest();
			// 3.2 与服务器建立连接
			xhr.open(method, url);
			xhr.setRequestHeader('Content-type', 'application/json');
			xhr.send(method === 'get' ? '' : param);
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4) {
					var responseObj = JSON.parse(xhr.responseText);
					if (responseObj.code == 200) {
						console.log('获取到最终结果', responseObj)
						return responseObj;
					}
				}
			}
		}
	</script>
</body>
</html>