Ajax增删改查实例

最新推荐文章于 2022-08-29 15:25:22 发布

GoCZ

最新推荐文章于 2022-08-29 15:25:22 发布

阅读量1.6k

点赞数

分类专栏： JSON

本文链接：https://blog.csdn.net/qq_40551994/article/details/97547103

版权

JSON 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
</head>
<body>

<div align="center">


<tr><td><button onclick='list()'>查看列表</button></td></tr>
<tr><td><button onclick='add()'>添加</button></td></tr>
<table  border="1">
<tr>
<td>编号</td>
<td>姓名</td>
<td>操作</td>
<td>操作</td>
</tr>


</table>
<table id="tt" border="1"></table>

<!-- //更新回显 -->
</div >
<div id="dd" style="display: none;" align="center">
id:<input type="text" id="id"><br>
姓名:<input type="text" id="name"><br>
<button onclick="update()">更新</button>
</div>

<!-- //添加 -->
</div >
<div id="ff" style="display: none;" align="center">
id:<input type="text" id="addid"><br>
姓名:<input type="text" id="addname"><br>
<button onclick="save()">保存</button>
</div>

<script type="text/javascript">
function list(){
	
	
	$.ajax({
		
		url:"a?method=findlist",
		type:"get",
		data:"",
		dataType:"json",
		success:function(list){
		
			for(var i in list){
		  		$("#tt").append("<tr><td>"+list[i].id+"</td><td>"+list[i].name+
		  				"</td><td><button onclick='toupdate("+list[i].id+")'>更新</button></td>"+
		  				"</td><td><button onclick='todelete("+list[i].id+")'>删除</button></td></tr>"
		  		)
		  	}
		}
		
		
	});
  
}

function toupdate(id) {
	$.ajax({
		
		url:"a?method=toupdate",
		type:"post",
		data:"id="+id,
		dataType:"json",
		
		success:function(user){
			$("#dd #id").val(user.id);
			$("#dd #name").val(user.name);
			$("#dd").show();
		}
	});
}

function update(id) {
	var id = $("#id").val();
	var name =$("#name").val();
	$.ajax({
		
		url:"a?method=update",
		type:"post",
		data:{"id":id,"name":name},
		dataType:"json",
		contentType:'application/x-www-form-urlencoded;charset=UTF-8',
		success:function(data){
			if(data=="success"){
				alert("更新失败");
			}else{
				alert("更新成功");
				window.location.href = window.location.href;
			}
			
		}
	});
	
	$("#dd").hide();
	
}


	 
	

	


function add() {
	$("#ff").show();
}


function save() {
	var id =$("#addid").val();
	var name =$("#addname").val();
	$.ajax({
		
		url:"a?method=save",
		type:"post",
		data:{"name":name,"id":id},
		dataType:"json",
		success:function(data){
			if(data=="success"){
				alert("添加失败");
			}else{
				alert("添加成功");
				window.location.href = window.location.href;
			}
			
		}
	});
	
	
	$("#dd").hide();
}

</script>

<script>
function todelete(id) {
	$.ajax({
		url:"a?method=delete",
		type:"post",
		data:"id="+id,
		dataType:"json",
		success:function(data){
			if(data=="success"){
				alert("删除失败");
			}else{
				alert("删除成功");
				window.location.href = window.location.href;
			}	
		}
	});
}
</script>
</body>
</html>

GoCZ

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Ajax增删改查实例

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.2.min.js"></script&...
复制链接

扫一扫