Ajax完成页面增删改查（改进版）

最新推荐文章于 2022-12-12 15:51:32 发布

Curry 3O

最新推荐文章于 2022-12-12 15:51:32 发布

阅读量1.6k

点赞数 2

分类专栏： AJAX

本文链接：https://blog.csdn.net/qq_42552393/article/details/97300586

版权

AJAX 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

`Ajax`是Asynchronous JavaScript and XML的缩写，异步的`JavaScript`和`XML`. Ajax描述了一种主要使用脚本操作HTTP的Web应用架构，Ajax应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

Swagger UI: http://134.175.154.93:8099/swagger-ui.html#!

示例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>22</title>
	<style>
		table{
			border-collapse: collapse;
			width: 415px;
			margin: 0 auto;
		}
		table,td,th{
			border:1px solid #ccc;
			text-align: center;
		}
		 div{
			margin-left: 545px;
			margin-bottom: 5px;
		} 
		button{
			width: 80px;
			height: 30px;
			margin: 0 auto; 
		}
	</style>
	<script src="./myAjax.js"></script>
	<script>
		window.onload = function(){
			var tbody = document.getElementsByTagName('tbody')[0];
			var btnsDiv = document.getElementsByClassName('btns-div')[0];
			findAllCategory();

			//查找category的数据
			function findAllCategory(){
				myAjax('GET','/manager/category/findAllCategory',null,function(res){
					console.log(res.data);
					var str = '';
					if (res.data&&res.data.length>0) {
						res.data.forEach(function(item){
							str += `
									<tr>
										<td><input type="checkbox" value='`+item.id+`'></td>
										<td>`+item.name+`</td>
										<td>`+item.comment+`</td>
										<td><button data-id="`+item.id+`">删除</button></td>
									</tr>
				   			 `; 
						});
					}
					tbody.innerHTML = str;
					var button = tbody.firstElementChild.lastElementChild.firstElementChild;
				button.disabled = true;
				},function(error){
					console.log(error);
				});
			}

			//单个删除
			tbody.onclick = function(event){
				var target = event.target;
				if (target.nodeName === 'BUTTON') {
					var id = target.getAttribute('data-id');
					deleteCategoryById({id:id});
				}
			}
			function deleteCategoryById(obj){
				myAjax('GET','/manager/category/deleteCategoryById',obj,function(res){
					findAllCategory();
				},function(error){
					console.log(error);
				});
			}

			//批量删除/新增或修改
			btnsDiv.onclick = function(event){
				var target = event.target;
				if (target.innerText === '新增') {
					var newName = prompt('请您输入要添加的栏目名称:');
					var newComment = prompt('请您输入要添加的备注:');
					saveOrUpdateCategory({name:newName,comment:newComment})
				}else if (target.innerText === '批量删除') {
					var inputs = document.getElementsByTagName('input');
					inputs = [].slice.call(inputs);
					var ids = inputs.filter(function(item){
						return item.checked == true;
					}).map(function(item){
						return item.value;
					});
					batchDeleteCategory({ids:ids.join()});
				}else if (target.innerText === '修改') {
					var newName = prompt('请您输入新的栏目名称:');
					var newComment = prompt('请您输入新的的备注:');
					var inputs = document.getElementsByTagName('input');
					inputs = [].slice.call(inputs);
					var id = inputs.filter(function(item){
						return item.checked == true;
					}).map(function(item){
						return item.value;
					});
					saveOrUpdateCategory({id:id,name:newName,comment:newComment});
				}else if (target.innerText === '全选') {
					var inputs = document.getElementsByTagName('input');
					inputs = [].slice.call(inputs);
					inputs.forEach(function(item){
						item.checked = true;
					});
				}else if (target.innerText === '取消全选') {
					var inputs = document.getElementsByTagName('input');
					inputs = [].slice.call(inputs);
					inputs.forEach(function(item){
						item.checked = false;
					});
				}
			}
			function batchDeleteCategory(obj){
				myAjax('POST','/manager/category/batchDeleteCategory',obj,function(res){
					findAllCategory();
				},function(error){
					console.log(error);
				});
			}

			//新增或修改
			function saveOrUpdateCategory(obj){
				myAjax('POST','/manager/category/saveOrUpdateCategory',obj,function(res){
					findAllCategory();
				},function(error){
					console.log(error);
				});
			}
		}
	</script>
</head>
<body>
	<div class="btns-div">
		<button>全选</button>
		<button>取消全选</button>
		<button>新增</button>
		<button>批量删除</button>
		<button>修改</button>
	</div>
	<table>
		<thead>
			<tr>
				<th>编号</th>
				<th>栏目名称</th>
				<th>备注</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody></tbody>
	</table>
</body>
</html>

myAjax.js代码

function myAjax(method,url,param,handle,handle2){
	//后台服务器的地址和后台代码的端口号
	var baseURL = 'http://134.175.154.93:8099';
	//param是前端传递给后台的参数
	//handle当内部的异步执行成功的回调函数，在这个回调函数里需要将后台返回的数据给handle(成功回调函数)
	//handle2失败回调函数
	var http = new XMLHttpRequest();
	//处理get有参的情况
	if (method ==='GET'&&param) {
		url += '?' + encodeFormData(param);
	}
	http.open(method,baseURL+url);
	http.onreadystatechange = function(){
		if (http.status === 200&&http.readyState === 4) {
			console.log('访问成功');
			handle(JSON.parse(http.responseText));
		}if(http.status !== 200){
			console.log()
		}
	}
	//处理post有参情况
	if (method ==='POST'&&param) {
		//设置Content-Type为表单形式
		http.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
		//发送表单格式的数据
		http.send(encodeFormData(param));
	}else {
		http.send();
	}
}
function encodeFormData(data){
	if(!data){
		return "";
	}
	var pairs = [];
	for(var name in data){
		if(!data.hasOwnProperty(name)){
			continue;
		}
		if(typeof data[name] == "function"){
			continue;
		}
		var value = data[name].toString();
		name = encodeURIComponent(name.replace("%20","+"));//编码名字
		value = encodeURIComponent(value.replace("%20","+"));//编码值
		pairs.push(name+"="+value);
	}
	return pairs.join('&');
}

运行效果:

1.查询数据：
在这里插入图片描述
2.添加数据：

3.单项删除：

4.批量删除：

5.修改数据：

Curry 3O

关注

2
点赞
踩
31

收藏

觉得还不错? 一键收藏
1
评论
Ajax完成页面增删改查（改进版）

Ajax是Asynchronous JavaScript and XML的缩写，异步的JavaScript和XML. Ajax描述了一种主要使用脚本操作HTTP的Web应用架构，Ajax应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。Swagger UI: http://134.175.154.93:8099/swagger-ui.html#!示例：<...
复制链接

扫一扫