AJAX学习笔记之发送请求（一）

最新推荐文章于 2024-04-28 04:05:42 发布

那个雨季

最新推荐文章于 2024-04-28 04:05:42 发布

阅读量104

点赞数

分类专栏：前端文章标签： ajax js

本文链接：https://blog.csdn.net/qq_43534980/article/details/116505316

版权

前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文介绍如何使用AJAX实现异步数据加载，并演示了如何通过JavaScript动态创建表格，包括checkbox动态样式切换和全选功能。通过AJAX获取数据后，根据数据动态构建表格结构，适合前端开发人员学习表格交互技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="AJAX.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#table{
				text-align: center;
			}
			
			/* odd表示奇数行，even表示偶数行 ,n是正整数，从1开始*/
			/* #table tr:nth-of-type(n){
				background-color: firebrick;
			} */
			/* #table tr:nth-of-type(odd){
				background-color: firebrick;
			}
			#table tr:nth-of-type(even){
				background-color: blueviolet;
			} */
			
			#table tr:first-of-type{
				background-color: cadetblue;
			}
			
		</style>
	</head>
	<body>
		
		<table border="1" id="table" align="center" cellpadding="10px" cellspacing="0"></table>
		<script type="text/javascript">
			
			AJAX.get("http://127.0.0.1:8888/login/",function(data){
				var obj = JSON.parse(data);
				// console.log(obj);
				var table = document.querySelector("#table");
				
				
				var tr = document.createElement("tr");
				var th = document.createElement("th");
				th.innerHTML = '<input type="checkbox" id="checkall" />';
				tr.appendChild(th)
				
				var th = document.createElement("th");
				th.innerHTML = "number";
				tr.appendChild(th)
				
				console.log();
				for(i in obj.data[0]){
					var th = document.createElement("th");
					th.innerHTML = i;
					tr.appendChild(th)
				}
				table.appendChild(tr);	
				
				// forEach只能针对数组遍历，e表示数组中的每一个对象或者叫字典，第二个是序号
				obj.data.forEach(function(e,i){
						// console.log(i);
						var tr = document.createElement("tr");
						var td = document.createElement("td");
						td.innerHTML = '<input type="checkbox" id="check"/>';
						tr.appendChild(td)
						var td = document.createElement("td");
						td.innerHTML = i+1;
						tr.appendChild(td);
						for (let j in e) {
							var td = document.createElement("td");
							td.innerHTML = e[j];
							tr.appendChild(td);
						}
					table.appendChild(tr);	
				})
				
				// 勾选最上面的按钮的时候变色的事件
				checkall = document.querySelector("#checkall");
				checkall.onclick = function(){
					// console.log("点击");
					all_input = document.querySelectorAll("#check")

					for(var i = 0;i<all_input.length;i++){
						// console.log(all_input[i]);
						p = all_input[i].parentElement.parentElement;
						all_input[i].checked = this.checked;
						if (this.checked){
							p.style.backgroundColor = "antiquewhite";
						}else{
							p.style.backgroundColor = "white";
						}	
					}
				}
				
				// 勾选单个按钮的时候变色及勾选全选按钮
				all_input = document.querySelectorAll("#check");
				for (var i in all_input) {	
					all_input[i].onclick = function(){
						if( ! this.checked){
							checkall.checked = false; 
						}else{
							for(var j in all_input){
								if (all_input[j].checked) {
									checkall.checked = true;
								}
							}
						}
						p = this.parentElement.parentElement;
						if (this.checked){
							p.style.backgroundColor = "antiquewhite";
						}else{
							p.style.backgroundColor = "white";
						}	
					}
				}
				
			})
		</script>
	</body>
	
	
</html>

AJAX.js 封装好的文件

var AJAX = Object();

AJAX.get = function(url, callback) {
	var request = null;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		request = new window.ActiveXObject();
	}
	if(request != null) {
		//规定请求的类型、URL 以及是否异步处理请求
		request.open('GET', url, true);
		request.send(null);
		request.onreadystatechange = function() {
			if(request.readyState == 4 && request.status == 200) {
				
				callback(request.responseText);
			}
		}
	}
}

AJAX.post = function(url,data,callback) {
	var request = null;
	if(window.XMLHttpRequest) {
		request = new XMLHttpRequest();
	} else if(window.ActiveXObject) {
		request = new window.ActiveXObject();
	}
	if(request != null) {
		//规定请求的类型、URL 以及是否异步处理请求
		request.open('POST', url, true);
		request.send(data);
		request.onreadystatechange = function() {
			if(request.readyState == 4 && request.status == 200) {
				callback(request.responseText);
			}
		}
	}
}