JS-Ajax

文章目录

- Ajax
- - 笑话大全

Ajax

<script>
    //AJAX 是一种无需重新加载整个网页的情况下 
    //能够更新部分网页技术

    //1.创建AJAX对象
    var xmlhttp = new XMLHttpRequest();

    //2.发送Ajax异步请求
    //open(method,url,async) 
    //     method 请求类型 GET POST
    //	   url 文件在服务器的位置 后台地址
    //	   async true(异步) false(同步)
    //send()
    xmlhttp.open("GET", "http://wthrcdn.etouch.cn/weather_mini?city=商洛", true);
    xmlhttp.send();

    //3.接收后台响应的结果 JSON字符串
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //接收数据
            var jsonStr = xmlhttp.responseText;
            alert(jsonStr);
        }
    }
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

笑话大全

请添加图片描述

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title>、
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			body {
				background-color: #7500b0;
			}

			#title {
				font-size: 250%;
				color: white;
				margin-top: 5%;
				text-align: center;
				align: center;
			}

			hr {
				margin-top: 3%;
			}

			button {
				width: 13%;
				height: 50px;
				margin-left: 43.5%;
				margin-top: 3%;
				border: 0;
				border-radius: 15px;
				background-color: #410064;
				font-size: 120%;
				color: white;
				line-height: 50px;
				text-align: center;
			}

			button:hover {
				cursor: pointer;
			}

			#content {
				width: 60%;
				height: 35px;
				margin-left: 20%;
				margin-top: 3%;
				border: 0;
			}

			#content {
				margin-left: 15%;
				margin-top: 3%;
				list-style: none;
				width: 70%;
			}

			.c {
				border: 1px #340053 solid;
				height: 80px;
				color: white;
				text-align: left;
				background-color: #50007c;
			}
		style>
	head>
	<body>
		<div id="title">每日一笑div>
		<hr>
		<button>来点段子button>
		<div id="content">
			
		div>
	body>
	<script>
		var btn = document.getElementsByTagName("button")[0];
		btn.onclick = function() {
			//修改按钮别点击后的文本内容
			btn.innerHTML = "再来点";
			//获取父元素->创建内容div
			var bigDiv = document.getElementById("content");
			//父元素下的子元素
			var smallDivs = document.getElementsByClassName("c");
			//清空之前看完的笑话内容
			if (smallDivs.length > 0) {
				bigDiv.innerHTML = "";
			}
			//创建Ajax对象
			var xmlhttp = new XMLHttpRequest;
			//发送异步请求 num=10 一次获取十条信息
			xmlhttp.open("GET", "https://autumnfish.cn/api/joke/list?num=10", true);
			xmlhttp.send();
			//接收后台响应的结果 JSON字符串数据
			xmlhttp.onreadystatechange = function() {
				if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
					//获取字符串数据
					var jsonStr = xmlhttp.responseText;
					var jsonObj = JSON.parse(jsonStr);
					//获取笑话内容 放在datas数组中
					var datas = jsonObj.data;
					//创建div标签 data文本 存放笑话数据
					for (let i = 0; i < datas.length; i++) {
						var smallDiv = document.createElement("div");
						smallDiv.setAttribute("class", "c");
						bigDiv.appendChild(smallDiv);
						var data = document.createTextNode(datas[i]);
						smallDiv.appendChild(data);
					}
				}
			}
		}
	script>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116

相关阅读:
360 度评估中的提问示范
网络精通-DHCP
到底什么是Linux？快进来学习！
numpy生成数组
docker 配置 nginx和php-fpm 跨服务器运行
HTTP请求、响应详解
Windows下Python环境下载与安装
视频压缩文件太大了怎么缩小？别怕，视频压缩我有利器
[附源码]计算机毕业设计小区物业管理系统Springboot程序
C语言练习题之——从简单到烧脑（13）（每日两道）

原文地址：https://blog.csdn.net/m0_51318597/article/details/126262745