JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax

81 阅读 0 评论 54 点赞

我是靠谱客的博主俊秀蜡烛，最近开发中收集的这篇文章主要介绍JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章目录

1、JS中的事件
- - 焦点事件
  - 点击事件
  - 键盘事件
  - 鼠标事件
  - 表单事件
  - 页面加载事件
  - 其他事件
  - 事件对象
  - 事件冒泡与阻止事件冒泡
  - 三级联动
2、JSON
- - JSON简介
  - JSON嵌套
  - JSON对象的遍历
  - JSON与字符串
3、Ajax
- - 天气预报

1、JS中的事件

概念：

事件：一件事事情发生；
事件源：事件发生的组件。
监听器：一个对象，当事件源上发生了事件，就执行对象中的某些方法；
注册监听：将监听器绑定到事件源上，监听事件的发生

JS中注册监听的方式：

1、在定义标签时，添加事件名称属性，属性值是js代码，JS代码会被自动封装到一个function函数的方法体中；
例子：<div id="div_id" onclick="fun();">hehe</div>
2、通过JS获取元素对象，再添加事件；

例子：

//1.获取元素对象
var input = document.getElementById("username");
//2.注册监听
input.onclick = function(){
	alert("hehe");
}

焦点事件

焦点事件：针对表单

onfocus 元素获得焦点。
onblur 元素失去焦点

点击事件

onclick 当用户点击某个对象时调用的事件句柄；
ondblclick 当用户双击某个对象时调用的事件句柄；

键盘事件

onkeydown：某个键盘按键被按下。
onkeyup 某个键盘按键被松开。
onkeypress 某个键盘按键被按下并松开。
通过事件对象event中的keyCode属性，可以获取键盘某个键的键码其实就是ASCII码表中对按键的编码：e.keyCode

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="" value="" onkeydown="demo()" onkeyup="demo2()" />
		<!-- 传递事件对象 -->
		<input type="text" id="" value="" onkeypress="demo3(event)" />
	</body>
	<script type="text/javascript">
		function demo() {
			console.log("按键按下了");
		}

		function demo2() {
			console.log("按键松开了");
		}

		function demo3(e) {
			//e.keyCode 获取按键的键码
			if (e.keyCode == 97) {
				console.log("向左跑");
			}
			console.log("按键按下并松开了" + e.keyCode);
		}
	</script>
</html>

鼠标事件

onmousedown 鼠标按钮被按下。
onmouseup 鼠标按键被松开。
onmouseover 鼠标移到某元素之上。
onmouseout 鼠标从某元素移开。
onmousemove 鼠标被移动。
鼠标按下时，通过事件对象event中的属性button或 which 可以获取鼠标按键的编号，e.button事件对象中的 button属性可以获取鼠标按键的编号，e.which也可以获取鼠标的按键编号 0 左键 1滚轮 2右键；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#d1{
				height: 200px;
				width: 200px;
				background: red;
			}
			/* #d1:active{
				background:yellow;
			} */
		</style>
	</head>
	<body>
		<div id="d1"  onmousedown="changeColor(0,event)" onmouseup="changeColor(1)" onmouseover="changeSize(0)" onmouseout="changeSize(1)" onmousemove="showNum()">
			
		</div>
	</body>
	<script type="text/javascript">
		function changeColor(num,e){
			alert(e.which);
			//JS自动类型转换
			if(num){
				document.getElementById("d1").style.background="blue";
			}else{
				document.getElementById("d1").style.background="yellowgreen";
			}
		}
		
		function changeSize(num){
			if(num){
				document.getElementById("d1").style.cssText="height: 300px;width: 300px;"
			}else{
				document.getElementById("d1").style.cssText="height: 500px;width: 500px;"
			}
		}
		var i=1;
		function showNum(){
			console.log(i++);
		}
		
	</script>
</html>

表单事件

onsubmit 确认按钮被点击。
onreset 重置按钮被点击。
oninput 事件当你往表单中输入内容时就触发

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!--onsubmit 监听表单提交  
		onsubmit="return false" 表单的数据不能提交
		onsubmit="return true"  表单的数据能提交
		-->
		<form action="#" method="get" onsubmit="return true" onreset="alert('重置')">
			用户名：<input type="text" id="uname" name="username" value="" oninput="checkUserName()"/>
			<br>
			密码：<input type="text" id="" name="password" value="" />
			<br>
			<input type="submit" value="注册"/>
			<input type="reset" value="重置"/>
		</form>
	</body>
	<script type="text/javascript">
		function checkUserName(){
			var v=document.getElementById("uname").value;
			console.log(v);
			//Ajax
		}
	</script>
</html>

页面加载事件

加载与卸载事件

onload 一张页面或一幅图像完成加载。
onunload 用户退出页面。其他浏览器不支持 IE支持

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function() {
				var mydiv = document.getElementById("d1");
				alert(mydiv);
				show();
			}
			function show() {
				alert(100);
			}
		</script>
	</head>
	<body>
		<div id="d1">

		</div>
	</body>
</html>

其他事件

针对表单

onchange 域的内容被改变。比如下拉框，使用selectedIndex属性获取谁被选中；
onselect 文本被选中，可以做防止复制粘贴的功能；

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<select name="xueli" id="s">
			<option value="xx">小学</option>
			<option value="zx">中学</option>
			<option value="dx">大学</option>
		</select>
		<input type="color" name="" id="" value="" onchange="changeColor(this)"/>
		<input type="text" id="wb" value="zhangsan" onselect="changeText()"/>
	</body>
	<script type="text/javascript">
		var s=document.getElementById("s");
		s.onchange=function(){
			//alert("改变了");
			alert(this.selectedIndex);
			alert(this.name);
		}
		function changeColor(e){
			//alert(e.value);
			document.body.bgColor=e.value;
		}
		function changeText(){
			document.getElementById("wb").style.border="2px blue solid";
		}
		
	
	/* 	//alert("选中了");
		window.οncοntextmenu=function(e){
		    //取消默认的浏览器自带右键 很重要！！
		    e.preventDefault();
		} */
	</script>
</html>

事件对象

属性：

1、currentTarget: 获取的是绑定了该事件的元素对象
2、target : 获取的是触发了该事件的元素对象
3、timeStamp：返回事件生成的日期和时间。
4、type: 获取事件类型
5、keyCode 当绑定了键盘事件，可以从事件对象中获取按键的键码（ASCII码）
6、 which/button 当绑定了鼠标事件，可以从事件对象中获取鼠标按键的键码 0 左键 1滚轮 2右键

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div {
				width: 500px;
				height: 500px;
				background: #FF0000;
			}
		</style>

	</head>
	<body>
		<div id="" onclick="myTest(event)">

		</div>
	</body>
	<script type="text/javascript">
		//event 事件对象由浏览器来创建，我们直接拿来使用
		function myTest(e) {
			/* var v = document.getElementsByTagName("div")[0];
			alert(v); */
			//var v=e.currentTarget;
			//alert(v);
			var v=e.target;
			//alert(v);
			v.style.background="yellow";
		}
	</script>

</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#wai {
				width: 300px;
				height: 300px;
				background: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="wai" onclick="myTest(event)">
			<button type="button" id="btn">一个按钮</button>
		</div>
	</body>
	<script type="text/javascript">
		//currentTarget: 获取的是绑定了该事件的元素对象
	   // target :  获取的是触发了该事件的元素对象 
		function myTest(e){
			alert(e.target);
			alert(e.type);
		}
	</script>
</html>

事件冒泡与阻止事件冒泡

事件冒泡：当元素有了嵌套关系，每个元素绑定了事件，当我们从子元素触发了这个事件，也会去触发他父元素的事件

e.stopPropagation() 阻止事件冒泡
e.preventDefault(); 阻止元素的默认行为

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#one {
				height: 400px;
				width: 400px;
				background: #FF0000;
			}

			#two {
				height: 200px;
				width: 200px;
				background: yellow;
			}

			#three {
				height: 100px;
				width: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div id="one" onclick="myTest1(event)">
			<div id="two" onclick="myTest2(event)">
				<div id="three" onclick="myTest3(event)">

				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		function myTest1(e){
			alert(1)
			e.stopPropagation();
		}
		function myTest2(e){
			alert(2)
			e.stopPropagation();
		}
		function myTest3(e){
			alert(3)
			//阻止事件的冒泡行为
			e.stopPropagation();
		}
	</script>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<a href="http://www.baidu.com">一个连接</a>
		<a href="javascript:void(0)">一个连接</a>
		<a href="http://www.baidu.com" onclick="myTest(event)">一个连接</a>
		<form action="#" method="get" onsubmit="tiJiao(event)">
			<input type="text" id="" name="username" value="" />
			<br>
			<input type="submit" value="提交"/>
		</form>
	</body>
	
	<script type="text/javascript">
		function myTest(e){
			//阻止a标签默认跳转页面的行为
			alert("abc");
			e.preventDefault();
		}
		function tiJiao(e){
			alert("异步提交");
			//阻止元素的默认行为
			e.preventDefault();
		}
		
	</script>
</html>

三级联动

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/data.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			select {
				margin-left: 30px;
			}
		</style>
	</head>
	<body>
		<center style="margin-top: 50px;">
			<h1>省市区县三级联动</h1>
			<select id="sf" onchange="selectCity()">
				<option value="">---请选择省份---</option>
			</select>
			<select id="sq" onchange="selectXian()">
				<option value="">---请选择市区---</option>
			</select>
			<select id="xian">
				<option value="">---请选择所在县---</option>
			</select>
		</center>
	</body>
</html>
<script type="text/javascript">
	var province = document.getElementById("sf");
	var city = document.getElementById("sq");
	var xian = document.getElementById("xian");

	//把省份对应的数据用JSON来存储
	//引入外部的JS代码

	//北京市------北京市----------东城区
	// console.log(dataArr[1].text + "------" + dataArr[1].children[0].text + "----------" + dataArr[1].children[0].children[
	// 	0].text);

	//首先自动遍历出省展示在页面上
	var provinceStr = "";
	provinceStr += "<option>---请选择省份---</option>";
	for (var i = 0; i < dataArr.length; i++) {
		provinceStr += "<option>" + dataArr[i].text + "</option>";
	}
	province.innerHTML = provinceStr;

	function selectCity() {
		city.innerHtML = "";
		xian.innerHTML = "";

		// alert(province.selectedIndex);

		//切换省份时，把之间的旧数据清空掉
		city.length = 1;

		var provinceIndex = province.selectedIndex;
		var citysArr = dataArr[provinceIndex - 1].children;
		// console.log(typeof citysArr);
		// console.log(citysArr[0].text+"-----"+citysArr[1].text);

		//遍历区市，展示出来
		var cityStr = "";
		// cityStr += "<option>---请选择市区---</option>";
		for (var i = 0; i < citysArr.length; i++) {
			cityStr += "<option>" + citysArr[i].text + "</option>";
		}

		city.innerHTML = cityStr;
		selectXian();
	}

	function selectXian() {
		// alert(city.selectedIndex);

		xian.length=1;

		var provinceIndex = province.selectedIndex;
		var cityIndex = city.selectedIndex;
		// alert(provinceIndex+"---------"+cityIndex);
		var xianArr = dataArr[provinceIndex - 1].children[cityIndex].children;
		// console.log(typeof citysArr);
		// console.log(xianArr[0].text + "-----");

		//遍历区市，展示出来
		var xianStr = "";
		// xianStr += "<option>---请选择市区---</option>";
		for (var i = 0; i < xianArr.length; i++) {
			xianStr += "<option>" + xianArr[i].text + "</option>";
		}

		xian.innerHTML = xianStr;
	}
</script>

JS代码：

var dataArr = [{
    value: '110000',
    text: '北京市',
    children: [{
        value: "110101",
        text: "北京市",
        children: [{
            value: "110101",
            text: "东城区"
        }, {
            value: "110102",
            text: "西城区"
        }, {
            value: "110103",
            text: "崇文区"
        }, {
            value: "110104",
            text: "宣武区"
        }, {
            value: "110105",
            text: "朝阳区"
        }, {
            value: "110106",
            text: "丰台区"
        }, {
            value: "110107",
            text: "石景山区"
        }, {
            value: "110108",
            text: "海淀区"
        }, {
            value: "110109",
            text: "门头沟区"
        }, {
            value: "110111",
            text: "房山区"
        }, {
            value: "110112",
            text: "通州区"
        }, {
            value: "110113",
            text: "顺义区"
        }, {
            value: "110114",
            text: "昌平区"
        }, {
            value: "110115",
            text: "大兴区"
        }, {
            value: "110116",
            text: "怀柔区"
        }, {
            value: "110117",
            text: "平谷区"
        }, {
            value: "110228",
            text: "密云县"
        }, {
            value: "110229",
            text: "延庆县"
        }, {
            value: "110230",
            text: "其它区"
        }]
    }]
}, {
    value: '120000',
    text: '天津市',
    children: [{
        value: "120100",
        text: "天津市",
        children: [{
            value: "120101",
            text: "和平区"
        }, {
            value: "120102",
            text: "河东区"
        }, {
            value: "120103",
            text: "河西区"
        }, {
            value: "120104",
            text: "南开区"
        }, {
            value: "120105",
            text: "河北区"
        }, {
            value: "120106",
            text: "红桥区"
        }, {
            value: "120107",
            text: "塘沽区"
        }, {
            value: "120108",
            text: "汉沽区"
        }, {
            value: "120109",
            text: "大港区"
        }, {
            value: "120110",
            text: "东丽区"
        }, {
            value: "120111",
            text: "西青区"
        }, {
            value: "120112",
            text: "津南区"
        }, {
            value: "120113",
            text: "北辰区"
        }, {
            value: "120114",
            text: "武清区"
        }, {
            value: "120115",
            text: "宝坻区"
        }, {
            value: "120116",
            text: "滨海新区"
        }, {
            value: "120221",
            text: "宁河县"
        }, {
            value: "120223",
            text: "静海县"
        }, {
            value: "120225",
            text: "蓟县"
        }, {
            value: "120226",
            text: "其它区"
        }]
    }]
},……

在这里插入图片描述

2、JSON

JSON是一种轻量级的数据交换格式，它基于JavaScript的一个子集，易于人的编写和阅读，也易于机器解析。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。
JSON由两种结构组成：

键值对的无序集合——对象(或者叫记录、结构、字典、哈希表、有键列表或关联数组等)
值的有序列表——数组

这些都是常见的数据结构。事实上大部分现代计算机语言都以某种形式支持它们。这使得一种数据格式在同样基于这些结构的编程语言之间交换成为可能。
JSON中的形式：

对象是一个无序键值对的集合，以"{"开始，同时以"}"结束，键值对之间以":"相隔，不同的键值对之间以","相隔，举例：

{
    "key1" : 1,
    "key2" : "string"
}

在学习Java的时候，JSON作为一种前后台数据交互的通道存在；

JSON简介

ES5的时候，JS语法中没有类这个概念，ES6才引入class，由于JS的语法靠近Java，它里面的函数作为对象，可以封装数据：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//ES5 没有类这个概念。函数 对象  //ES6  class
	
	//构造函数来封装数据
	function Student(name,age){
		this.name=name;
		this.age=age;
		this.eat=function(){
			alert("吃饭")
		}	
	}
	
	var stu=new Student("张三",23);
	alert(stu.name);
	alert(stu.age);
	stu.eat();
	
	var stu2=new Student("李四",24);
	alert(stu2.name);
	alert(stu2.age);
	stu2.eat();
	
	var obj=new Object();
	obj.num=20;
	obj.name='张三';
	obj.test=function(){
		alert("obj");
	}
	
	alert(obj.name);
	alert(obj.num);
	obj.test();	
</script>

但是我们可以使用JSON封装数据：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	//JS中的JSON对象
	//JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。它基于 ECMAScript (欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
	//JS 中的JSON对象的语法
	var person={"name":"张三","age":23,"sex":"男","falg":true,"eat":function(){
		alert("吃饭");
	}};
	
	//键找值
	var name=person.name;
	var age=person.age;
	alert(name);
	alert(age);
	person.eat();
	
	var person2 = {
	    firstName:"John",
	    lastName:"Doe",
	    age:50,
	    eyeColor:"blue"
	};
</script>

JSON嵌套

JSON之间可以互相嵌套，方便我们存储数据：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		
	</body>
</html>
<script type="text/javascript">
	var person={
		"name":"张三",
		"age":20,
		"car":{
			"color":"白色",
			"price":2000
		},
		"arr":[20,30,60,100]
	}
	
	var v=person.car.price;
	alert(v);
	var vv=person.arr[3];
	alert(vv);
	
	//JSON数组
	var jsonArr=[{
		"name":"张三",
		"age":20,
		"car":{
			"color":"白色",
			"price":2000
		},
		"arr":[20,30,60,100]
	},{
		"name":"张三",
		"age":20,
		"car":{
			"color":"白色",
			"price":2000
		},
		"arr":[20,30,60,100]
	},{
		"name":"张三",
		"age":20,
		"car":{
			"color":"白色",
			"price":2000
		},
		"arr":[20,30,60,1000000]
	}];
	
	var num=jsonArr[2].arr[3];
	alert(num);

</script>

另外，JSON本身也可以作为数组，即就是数组中的每个元素都是一个JSON对象；

JSON对象的遍历

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	var person = {
	    firstName:"John",
	    lastName:"Doe",
	    age:50,
	    eyeColor:"blue"
	}
	
	//JSON对象的遍历
	for(key in person){
		alert(person[key]);
	}
	
	var arr=[10,20,30,40]
	//for in  遍历数组
	for(index in arr){
		alert(arr[index]);
	}
</script>

JSON与字符串

var data= {"name":"小明","pwd":123456};//这是一个json的对象

JSON的字符串：既然是字符串就是用引号包裹起来的，有JSON格式的字符串；
JSON对象：JSON对象可以直接调用方法获取属性值

var data= {"name":"小明","pwd":123456};//这是一个json的对象
var name = data.name; //获取到的name的值为小明

JSON字符串转JSON对象，调用parse()方法

var ob = JSON.parse(data);

JSON对象转为JSON字符串，调用JSON.stringify()方法

var str = JSON.stringify(data);

前后端的数据交互，以JSON字符串的方式进行传递，传递的字符串都是紧凑的格式，不能有换行或者空格存在，否则后台解析报错；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
</html>
<script type="text/javascript">
	//定义JSON对象
	var person = {
		"name": "张三",
		"age": 24
	}
	//alert(person.name);

	//定义JSON字符串:
	//var student ="{'name':'name','age': 24}"; //错误额JSON字符串格式
	//注意：JSON字符串，外面用单引号引起来，里面键用双引号引起来。
	var student = '{"name": "张三","age": 24}';
	//alert(student.name);
	//JSON字符串转换成JSON对象
	var s = JSON.parse(student);
	alert(s.age);
	//前台给后台提交数据时，会以JSON字符串来提交给后台
	var person2 = {
		"name": "张三",
		"age": 24
	}

	//JSON对象转换为JSON字符串
	//JSON字符串是这种紧凑格式，不要弄成漂亮的格式
	var jsonStr = JSON.stringify(person2);
	alert(jsonStr);


	//
	/*
	 //错误的示例
	 var student2 = '{
	"name": "张三",
	"age": 24,
	var s2 = JSON.parse(student2);
	alert(s2.age);
	}'; */
</script>

3、Ajax

概念： ASynchronous JavaScript And XML异步的JavaScript和XML
异步和同步：客户端和服务器端相互通信的基础上

客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。这样做提升用户的体验；
我们现在使用的都是原生的Ajax请求，模板代码为：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		//1.创建核心对象
		var xmlhttp;
		xmlhttp = new XMLHttpRequest();

		//2. 建立连接
		/* 参数：
			1. 请求方式：GET、POST
			* get方式，请求参数在URL后边拼接。send方法为空参
			* post方式，请求参数在send方法中定义
			2. 请求的URL：
			3. 同步或异步请求：true（异步）或 false（同步）*/
		xmlhttp.open("GET", "ajaxServlet?username=tom", true);

		//3.发送请求
		xmlhttp.send();

		//4.接受并处理来自服务器的响应结果
		//获取方式 ：xmlhttp.responseText
		//什么时候获取？当服务器响应成功后再获取

		//当xmlhttp对象的就绪状态改变时，触发事件onreadystatechange。
		xmlhttp.onreadystatechange = function() {
			//判断readyState就绪状态是否为4，判断status响应状态码是否为200
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//获取服务器的响应结果
				var responseText = xmlhttp.responseText;
				alert(responseText);
			}
		}
	</script>
	</script>
</html>

天气预报

在这里插入图片描述

主要的JS代码：

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

	<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>
		<link rel="stylesheet" href="css/reset.css" />
		<link rel="stylesheet" href="css/index.css" />
	</head>

	<body>
		<div class="wrap" id="app">
			<div class="search_form">
				<div class="logo"><img src="img/logo.png" alt="logo" /></div>
				<div class="form_group">
					<input type="text" id="city" class="input_txt" placeholder="请输入查询的天气" />
					<button class="input_sub" onclick="sendAjax()">
						搜 索
					</button>
				</div>
				<div class="hotkey">
					<a onclick="linkCity(event)" style="cursor: pointer;">北京</a>
					<a onclick="linkCity(event)" style="cursor: pointer;">上海</a>
					<a onclick="linkCity(event)" style="cursor: pointer;">广州</a>
					<a onclick="linkCity(event)" style="cursor: pointer;">深圳</a>
				</div>
			</div>
			<ul class="weather_list" id="myUL">
			</ul>
		</div>
	</body>
</html>
<script type="text/javascript">
	function sendAjax() {
		var cityName = document.getElementById("city").value.trim();
		if (!cityName) {
			alert("请输入一个城市");
			return;
		}
		//创建Ajax对象
		var xmlhttp = new XMLHttpRequest();
		// 向服务器发送请求
		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + cityName, true);
		xmlhttp.send();

		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText;
				var jsonStr = xmlhttp.responseText;
				//console.log(jsonStr);
				//把JSON字符串，解析成JSON对象
				var obj = JSON.parse(jsonStr);
				var arr = obj.data.forecast;
				var yesterday = obj.data.yesterday;
				//console.log(arr);
				showData(arr,yesterday);
			}
		}
	}

	function showData(arr,yesterday) {
		var myUL = document.getElementById("myUL");
		var liStr = "";
		liStr +=
			`<li>
				<div class="info_type"><span class="iconfont">${yesterday.type}</span></div>
				<div class="info_temp">
					<b>${yesterday.low}</b>
					~
					<b>${yesterday.low}</b>
				</div>
				<div class="info_date"><span>${yesterday.date}</span></div>
			</li>`;
		for (var i = 0; i < arr.length; i++) {
			var json = arr[i];
			liStr +=
				`<li>
					<div class="info_type"><span class="iconfont">${json.type}</span></div>
					<div class="info_temp">
						<b>${json.low}</b>
						~
						<b>${json.low}</b>
					</div>
					<div class="info_date"><span>${json.date}</span></div>
				</li>`;
		}

		myUL.innerHTML = liStr;
	}
	
	function linkCity(e){
		// alert(e.target.innerText);
		
		var city=e.target.innerText;
		//创建Ajax对象
		var xmlhttp = new XMLHttpRequest();
		// 向服务器发送请求
		xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=" + city, true);
		xmlhttp.send();
		
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				//如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText;
				var jsonStr = xmlhttp.responseText;
				//console.log(jsonStr);
				//把JSON字符串，解析成JSON对象
				var obj = JSON.parse(jsonStr);
				var arr = obj.data.forecast;
				var yesterday = obj.data.yesterday;
				//console.log(arr);
				showData(arr,yesterday);
			}
		}
	}
</script>

最后

以上就是俊秀蜡烛为你收集整理的JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax的全部内容，希望文章能够帮你解决JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Java Web
浏览次数：81 次浏览
发布日期：2023-06-14 11:36:04
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_26_fw_14_z_18_5.html

JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax

概述

文章目录

1、JS中的事件

焦点事件

点击事件

键盘事件

鼠标事件

表单事件

页面加载事件

其他事件

事件对象

事件冒泡与阻止事件冒泡

三级联动

2、JSON

JSON简介

JSON嵌套

JSON对象的遍历

JSON与字符串

3、Ajax

天气预报

最后

评论列表共有 0 条评论

发表评论取消回复

JS事件、JSON、Ajax1、JS中的事件2、JSON3、Ajax

概述

文章目录

1、JS中的事件

焦点事件

点击事件

键盘事件

鼠标事件

表单事件

页面加载事件

其他事件

事件对象

事件冒泡与阻止事件冒泡

三级联动

2、JSON

JSON简介

JSON嵌套

JSON对象的遍历

JSON与字符串

3、Ajax

天气预报

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复