使用ajax不刷新页面获取、操作数据

最新推荐文章于 2021-08-06 00:26:23 发布

了迹奇有没

最新推荐文章于 2021-08-06 00:26:23 发布

阅读量1.6k

点赞数 5

分类专栏： js篇文章标签： js ajax jquery java

本文链接：https://blog.csdn.net/w_monster/article/details/104233522

版权

js篇专栏收录该内容

10 篇文章 0 订阅

订阅专栏

在使用jsp或html时，利用ajax达到不刷新页面就可以获取、操作数据。

首先上代码（html+js）
在此处需要引入jquery插件

<!-- 这是页面部分 html-->
<body>
  	<div style="width:100%;height:30px; float:left">
  		<input type="button" value="查询" onclick="selAll()"/>
  	</div>
    <div style="width:49%;height:500px; border:1px solid red;float:left">
    	<table width="100%" border="1">
    		<tr align="center">
    			<td  width="25%">
    				编号
    			</td>
    			<td  width="25%">
    				姓名
    			</td>
    			<td  width="25%">
    				年龄
    			</td>
    			<td  width="25%">
    				操作
    			</td>
    		</tr>
    	</table>
    	<table width="100%" border="1" cellspacing="0" id=" ">
    		
    	</table>
    </div>
     <div style="width:49%; border:1px solid red;float:left">
    	<div style="height:250px; border:1px solid red;">
	    	<div style="width:100%;float:left;border-bottom:1px solid red; ">
		  		新增信息
		  	</div>
		  	<center>
		  		<table border="1" style="margin-top: 80px;">
			  		<tr>
			  			<td>姓名：</td>
			  			<td>
			  				<input id="name"/>
			  			</td>
			  		</tr>
			  		<tr>
			  			<td>年龄：</td>
			  			<td>
			  				<input id="age"/>
			  			</td>
			  		</tr>
			  		<tr>
			  			<td colspan="2" align="center">
			  				<input type="button" value="新增用户" onclick="addUser()">
			  			</td>
			  		</tr>
			  	</table>
		  	</center>
		  	
	    </div>
	     <div style="height:250px; border:1px solid red;">
	    	<div style="width:100%;float:left;border-bottom:1px solid red; ">
		  		编辑信息
		  	</div>
		  	<center>
		  		<table border="1" style="margin-top: 80px;">
			  		<tr>
			  			<td>姓名：</td>
			  			<td>
			  				<input type="hidden" id="uid"/>
			  				<input id="uname"/>
			  			</td>
			  		</tr>
			  		<tr>
			  			<td>年龄：</td>
			  			<td>
			  				<input id="uage"/>
			  			</td>
			  		</tr>
			  		<tr>
			  			<td colspan="2" align="center">
			  				<input type="button" value="编辑用户" onclick="upUser()">
			  			</td>
			  		</tr>
			  	</table>
		  	</center>
	    </div>
    </div>
     
  </body>

接着是js部分代码部分，这里有简单的增删改查代码，可完成基本所有功能

<script>
	<!--这里进行查询所有操作，这里查询完之后顺位添加，可以先清空内容再进行此方法，以保证不重复-->
	function selAll(){
		$.ajax( {
						url:'usersel',
						type:'post',
						data: {
							
						},
						datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
						success : function(data) {
							var json=eval('(' + data + ')');
							
							$.each(json, function (n, item) {
								<!--这里进行添加操作-->
								addRow(n,item)
							});
						}
				});
	}
	function addRow(n,item){
		var val="<tr align='center'>";
		val=val+"<td  width='25%'>"+(n+1)+"</td>";
		val=val+"<td  width='25%'>"+item.name+"</td>";
		val=val+"<td  width='25%'>"+item.age+"</td>";
		val=val+"<td  width='25%'><a href='javascript:editUser("+item.id+");'>编辑</a><a href='javascript:delUser("+item.id+");'>删除</a></td>";
		val=val+"</tr>";
		
		$("#showdata").append(val);
	}
	function addUser(){
		var nval=document.getElementById("name").value;
		var aval=document.getElementById("age").value;
		
		$.ajax( {
			url:'useradd',
			type:'post',
			data: {
				name:nval,
				age:aval			
			},
			datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				alert("信息添加成功！");
				selAll();		
			}
		});
	}
	//获取原始数据
	function editUser(ele){
		$.ajax( {
			url:'useredit',
			type:'post',
			data: {
				id:ele			
			},
			datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				var json=eval('(' + data + ')');
				$.each(json, function (n, item) {
					document.getElementById("uid").value=item.id;
					document.getElementById("uname").value=item.name;
					document.getElementById("uage").value=item.age;
				});
			}
		});
	}
	function delUser(ele){
		var flag=confirm("确认删除信息？");
		if(!flag){
			return false;
		}
		$.ajax( {
			url:'userdel',
			type:'post',
			data: {
				id:ele			
			},
			datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				alert("信息删除成功！");
				selAll();	
			}
		});
	}
	function upUser(){
		var uid=document.getElementById("uid").value;
		var uname=document.getElementById("uname").value;
		var uage=document.getElementById("uage").value;
		
		$.ajax( {
			url:'userup',
			type:'post',
			data: {
				id:uid,
				name:uname,
				age:uage			
			},
			datatype : "json",//"xml", "html", "script", "json", "jsonp", "text".           
			success : function(data) {
				alert("信息更新成功！");
				selAll();	
			}
		});
	}
</script>

最后，在后端的操作中也有需要注意的点

		//这里把数据库查询后得到的对象进行处理，转换为json后返回
		JSONArray jsonArray = JSONArray.fromObject(list);
		System.out.println(jsonArray);
		response.setCharacterEncoding("utf-8");
		response.getWriter().print(jsonArray);