`

Ajax无刷新表格行内编辑源码带数据库

AjaxJSP浏览器IESafari 
阅读更多
Ajax 页面无刷新完整 表格编辑 姓名验证 增 删 改 查 源码带数据库

附件中可下载源码加数据库,下载前看自己是否需要

实现内容:
1.姓名无刷新检查 数据库中是否有同名的帐户
2.增 删 改 查 页面无刷新 实现
3.表格编辑 无需提交新的页面处理数据
4.POST 提交中文已经处理

实现:Jsp ,js ,css, ajax,sqlserver 2005

效果图
1.页面显示数据


2.用户名自动检查


3.已经存在的显示


4.添加前


5.添加后的数据页面也不会刷新


6.还可以实现行内编辑效果


7.修改数据


8.更新后的数据


部分源码  index.jsp 
<%@ page language="java" pageEncoding="GBK" contentType="text/html; charset=UTF-8"%>
<html>
  <head>
   <title>编辑数据</title>
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<style type="text/css">
		#contentDiv{
			width:700px;
			margin-left:130px;
		}
		td{
			line-height: 18px;
		}
		#addDiv{
			width:700px;
			margin-left:130px;
		}
		.nameTxt{
			font-size:12px;
			border:1px redge #227799;
			width:95px;
			height:15px;
			background-color:#bbeedd;
		}
		.emailTxt{
			font-size:12px;
			border:1px redge #227799;
			width:130px;
			height:15px;
			background-color:#bbeedd;
		}
		.addressTxt{
			font-size:12px;
			border:1px redge #227799;
			width:200px;
			height:15px;
			background-color:#bbeedd;
		}
	</style>
	<script type="text/javascript">
	    //异步请求对象
		var xmlRequest;
		//得到请求对象 
		function getXMLHttpRequestObject(){
		   //不同的浏览器创建方式不同
			try{
				xmlRequest = new XMLHttpRequest(); //Firefox ,safari
			}catch(e){
				//IE
				try{
					xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");
				}catch(e){
				    xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
			return xmlRequest;//返回
		}
		
		//检查用户是否存在
		function checkUser(userName){
		    //用户名输入不能为空
			if(userName==""){
				document.getElementById("mess").innerHTML="<font color='red'>&nbsp;不能为空！</font>";
				return;
			}
			//得到请求对象
			xmlRequest = getXMLHttpRequestObject();
			if(xmlRequest==null){
				alert("您的浏览器不支持AJAX!");
				return;
			}
			var url = "checkuser.jsp"; //请求页面
			url+="?user="+userName; //用户名
			url=encodeURI(url); 
			url=encodeURI(url); 
			xmlRequest.onreadystatechange = stateChanged;//状态改变调用函数
			xmlRequest.open("GET",url,true);
			//xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
			xmlRequest.send(null);  // 发送请求
		}
		
		//姓名是否已经存在检查
		function stateChanged(){
			if(xmlRequest.readyState==4){
				if(xmlRequest.status==200){
					showMess();
				}else { //页面不正常
	                window.alert("您所请求的页面有异常。");
	            }
			}else{ //请求状态还没有成功，页面等待
                document .getElementById ("mess").innerHTML ="检查中...";
            }
		}
		//姓名检查 异步处理显示信息
		function showMess(){
			 var message = xmlRequest.responseText;
			  document.getElementById("mess").innerHTML = message;
		}
		//显示表格编辑的数据
		function changeView(id,name,email,address,birthday){
			objname = document.getElementById('tdname'+id);
			objemail = document.getElementById('tdemail'+id);
			objaddress = document.getElementById('tdaddress'+id);
			objbirthday = document.getElementById('tdbirthday'+id);
			objmanage = document.getElementById('tdmanage'+id);
			objname.innerHTML="<input type='text' name='name"+id+"' id='name"+id+"' class='nameTxt' value='"+name+"'>";
			objemail.innerHTML="<input type='text' name='email"+id+"' id='email"+id+"' class='emailTxt' value='"+email+"'>";
			objaddress.innerHTML="<input type='text' name='address"+id+"' id='address"+id+"' class='addressTxt' value='"+address+"'>";
			objbirthday.innerHTML="<input type='text' name='birthday"+id+"' id='birthday"+id+"' class='nameTxt' value='"+birthday+"'>";
			objmanage.innerHTML="<a href=javascript:getData('update','"+id+"')>OK</a> &nbsp;<a href=javascript:getData('load','')>Cancel</a>";
		}
		
		//得到表格数据
		function getData(flag,id){
			
			var url = "getdata.jsp";//要请求的数据库返回的数据页面
			
			//得到请求对象
			xmlRequest = getXMLHttpRequestObject();
			if(xmlRequest==null){
				alert("您的浏览器不支持AJAX!");
				return;
			}
			
			//load 表示是页面加载数据
			if(flag=="load"){
				url +="?flag=load";
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("GET",url,true);
				xmlRequest.send(null);  // 发送请求
			
			}else if(flag=="add"){  //add 表示是页面添加数据动作
			    //简单验证数据
				var name = document.myform.newname.value;
				var email = document.myform.newemail.value;
				var address = document.myform.newaddress.value;
				var birthday = document.myform.newbirthday.value;
				
				//简单判断是否完整
				if(name==""||email==""||address==""||birthday==""){
					alert("信息不完整！");
					document.myform.newname.focus();
					return;
				}
				//拼接请求的字符串
				var url = "getdata.jsp?flag=add";
				url+="&name="+name+"&email="+email+"&address="+address+"&birthday="+birthday;
				url=encodeURI(url); 
				url=encodeURI(url); 
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("POST",url,true);
				xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
				xmlRequest.send(url);  // 发送请求
			}else if(flag=="update"){
				
				 //简单验证数据
				var name = document.getElementById("name"+id).value;
				var email = document.getElementById("email"+id).value;
				var address = document.getElementById("address"+id).value;
				var birthday = document.getElementById("birthday"+id).value;
				
				//简单判断是否完整
				if(name==""||email==""||address==""||birthday==""){
					alert("信息不完整！");
					document.getElementById(id+"name").focus();
					return;
				}
				
				//拼接请求的字符串
				var url = "getdata.jsp?flag=update";
				url+="&name="+name+"&email="+email+"&address="+address+"&birthday="+birthday+"&id="+id;
				url=encodeURI(url); 
				url=encodeURI(url); 
				
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("POST",url,true);
				xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
				xmlRequest.send(url);  // 发送请求
			}else if(flag=="delete"){
				url +="?flag=delete&id="+id;
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("GET",url,true);
				xmlRequest.send(null);  // 发送请求
			}
		}
		
		//状态改变 回调函数
		function dataChanged(){
			if(xmlRequest.readyState==4){
				if(xmlRequest.status==200){
					showDatas();//已经可以正常接受数据
				}else { //页面不正常
	                window.alert("您所请求的页面有异常。");
	            }
			}
		}	
		//表格部分显示数据
		function showDatas(){
			  //从响应页面得到数据
			  var message = xmlRequest.responseText;
			  //显示数据
			  document.getElementById("datadiv").innerHTML = message;
			  
			  document.myform.newname.value="";
			  document.myform.newemail.value="";
			  document.myform.newaddress.value="";
			  document.myform.newbirthday.value="";
			  document.getElementById("mess").innerHTML="";
		}
	</script>
</head>
  <body onload="getData('load','')">
    <div id="mainDiv">
    	<div id="addDiv">
    		<h3>Information</h3>
    		<form name = "myform" method="post">
    			<table width="100%">
    				<tr>
    					<td>Name:</td>
    					<td><input type="text" name="newname" onclick="value=''" class="normalTxt" onblur="checkUser(this.value)">
    						<span id="mess"></span>
    					</td>
    				</tr>
    				<tr>
    					<td>Email:</td>
    					<td><input type="text" name="newemail" class="middleTxt" size="150"></td>
    				</tr>
    				<tr>
    					<td>Address:</td>
    					<td><input type="text" name="newaddress" class="longTxt"></td>
    				</tr>
    				<tr>
    					<td>BirthDay:</td>
    					<td><input type="text" name="newbirthday" class="normalTxt"></td>
    				</tr>
    				<tr>
    					<td colspan="2">
    						<input type="button" value="submit" onclick="getData('add','')" class="normalBtn">&nbsp;
    						<input type="reset" value="Reset" class="normalBtn">
    					</td>
    				</tr>
    			</table>
    		</form>
    	</div>
    	<div id="datadiv">
    	
    	</div>
    </div>
  </body>
</html>


index.jsp 主页面实现思路

1. 在 body onload 事件中 调用函数 
<body onload="getData('load','')">


getData()函数 主要是做异步向数据库发送请求动作，可以处理增 删 改 查操作
请求的页面都是  getdata.jsp
通过  判断用户到底执行的是哪一个动作 ,第二个参数是 id 用户执行 删除和修改标识动作 
    //load 表示是页面加载数据
     if(flag=="load"){



//得到表格数据
		function getData(flag,id){
			
			var url = "getdata.jsp";//要请求的数据库返回的数据页面
			
			//得到请求对象
			xmlRequest = getXMLHttpRequestObject();
			if(xmlRequest==null){
				alert("您的浏览器不支持AJAX!");
				return;
			}
			
			//load 表示是页面加载数据
			if(flag=="load"){
				url +="?flag=load";
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("GET",url,true);
				xmlRequest.send(null);  // 发送请求
			
			}else if(flag=="add"){  //add 表示是页面添加数据动作
			    //简单验证数据
				var name = document.myform.newname.value;
				var email = document.myform.newemail.value;
				var address = document.myform.newaddress.value;
				var birthday = document.myform.newbirthday.value;
				
				//简单判断是否完整
				if(name==""||email==""||address==""||birthday==""){
					alert("信息不完整！");
					document.myform.newname.focus();
					return;
				}
				//拼接请求的字符串
				var url = "getdata.jsp?flag=add";
				url+="&name="+name+"&email="+email+"&address="+address+"&birthday="+birthday;
				url=encodeURI(url); 
				url=encodeURI(url); 
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("POST",url,true);
				xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
				xmlRequest.send(url);  // 发送请求
			}else if(flag=="update"){
				
				 //简单验证数据
				var name = document.getElementById("name"+id).value;
				var email = document.getElementById("email"+id).value;
				var address = document.getElementById("address"+id).value;
				var birthday = document.getElementById("birthday"+id).value;
				
				//简单判断是否完整
				if(name==""||email==""||address==""||birthday==""){
					alert("信息不完整！");
					document.getElementById(id+"name").focus();
					return;
				}
				
				//拼接请求的字符串
				var url = "getdata.jsp?flag=update";
				url+="&name="+name+"&email="+email+"&address="+address+"&birthday="+birthday+"&id="+id;
				url=encodeURI(url); 
				url=encodeURI(url); 
				
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("POST",url,true);
				xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
				xmlRequest.send(url);  // 发送请求
			}else if(flag=="delete"){
				url +="?flag=delete&id="+id;
				//状态改变
				xmlRequest.onreadystatechange = dataChanged;
				xmlRequest.open("GET",url,true);
				xmlRequest.send(null);  // 发送请求
			}
		}



检查 用户姓名是否存在部分也非常的简单 ，请求的是 checkuser.jsp 页面 
//检查用户是否存在
		function checkUser(userName){
		    //用户名输入不能为空
			if(userName==""){
				document.getElementById("mess").innerHTML="<font color='red'>&nbsp;不能为空！</font>";
				return;
			}
			//得到请求对象
			xmlRequest = getXMLHttpRequestObject();
			if(xmlRequest==null){
				alert("您的浏览器不支持AJAX!");
				return;
			}
			var url = "checkuser.jsp"; //请求页面
			url+="?user="+userName; //用户名
			url=encodeURI(url); 
			url=encodeURI(url); 
			xmlRequest.onreadystatechange = stateChanged;//状态改变调用函数
			xmlRequest.open("GET",url,true);
			//xmlRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
			xmlRequest.send(null);  // 发送请求
		}



中间有一部份代码，是用户当前页面编辑的传递参数，通过 innerHTML 输出标签内容 
//显示表格编辑的数据
		function changeView(id,name,email,address,birthday){
			objname = document.getElementById('tdname'+id);
			objemail = document.getElementById('tdemail'+id);
			objaddress = document.getElementById('tdaddress'+id);
			objbirthday = document.getElementById('tdbirthday'+id);
			objmanage = document.getElementById('tdmanage'+id);
			objname.innerHTML="<input type='text' name='name"+id+"' id='name"+id+"' class='nameTxt' value='"+name+"'>";
			objemail.innerHTML="<input type='text' name='email"+id+"' id='email"+id+"' class='emailTxt' value='"+email+"'>";
			objaddress.innerHTML="<input type='text' name='address"+id+"' id='address"+id+"' class='addressTxt' value='"+address+"'>";
			objbirthday.innerHTML="<input type='text' name='birthday"+id+"' id='birthday"+id+"' class='nameTxt' value='"+birthday+"'>";
			objmanage.innerHTML="<a href=javascript:getData('update','"+id+"')>OK</a> &nbsp;<a href=javascript:getData('load','')>Cancel</a>";
		}




checkuser.jsp 主要是用户检查用户是否存在 
<%
  		//设置编码
  		request.setCharacterEncoding("UTF-8");
  		String name = request.getParameter("user").trim();
  		name = URLDecoder.decode(name,"UTF-8");
  		Message message = new BOMessage().getMessageByName(name);
 		
  		//设置输出信息的格式及字符集 
		response.setContentType("text/xml; charset=UTF-8");
		response.setHeader("Cache-Control", "no-cache");
		out.print("<response>");
		if(message.getId()!=-1){
			out.print("<font color='red'>用户名已经存在！请更改！</font>");
		}else{
			out.print("<font color='blue'>可以添加此用户！</font>");
		}
		out.print("</response>");
  	 %>


中间一部分的表格编辑部分是前一个实例中专门实现了的，因此如果只是需要看表格编辑部分，可以查看 http://lvp.iteye.com/blog/343241

且这个实例中的表格编辑部分有所改动，主要在于页面请求的表格数据不是当页显示，而是从异步请求 处理页面部分返回的，因此有一些差异，大家可以对比的去看.


getdata.jsp 表格部分处理代码 和 index.jsp中的代码有对应的部分 
<%
					for (int i = 0; i < list.size(); i++) {
					Message message = list.get(i);
			%>
			<tr>
				<td width="5%"><%=message.getId()%></td>
				<td width="15%" id="tdname<%=message.getId()%>"><%=message.getName()%></td>
				<td width="20%" id="tdemail<%=message.getId()%>"><%=message.getEmail()%></td>
				<td width="30%" id="tdaddress<%=message.getId()%>"><%=message.getAddress()%></td>
				<td width="15%" id="tdbirthday<%=message.getId()%>"><%=message.getBirthDay()%></td>
				<td width="15%" id="tdmanage<%=message.getId()%>">
					<a
						href="javascript:changeView('<%=message.getId()%>','<%=message.getName()%>','<%=message.getEmail()%>','<%=message.getAddress()%>','<%=message.getBirthDay()%>')">Edit</a>&nbsp;
					<a href="javascript:getData('delete','<%=message.getId()%>')">Delete</a>
				</td>
			</tr>
			<%
			}
			%>


17
顶
0
踩
分享到：
| JSP 编译和运行过程与JSP源码简单分析
评论
9 楼 xf3656910 2013-12-21  
感谢楼主的分享
8 楼 gzdx968342 2011-09-21  
楼主有心啊，整理的不错！
7 楼 birdzoe 2011-07-27  
这东西不错。
6 楼 lezhichen 2011-02-21  
吕老师，我来关注一下～～～～
5 楼 lvp 2010-03-30  
筑水阁 写道
你好， 当我试着运行你的代码时为什么会是打不开的呢？

我使用的是IE6.0浏览器. 你看看是浏览器的问题,还是部署的问题.
4 楼 筑水阁 2009-10-07  
你好， 当我试着运行你的代码时为什么会是打不开的呢？
3 楼 liun5210 2009-05-30  
真的很不错啊！谢谢楼主！
2 楼 pujh 2009-04-13  
这东西不错。
1 楼 leeleo 2009-04-04  
正找这方面的东西呢,多谢楼主分享
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Ajax无刷新分页示例源码2012419

    Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无...

    php_ajax无刷新聊天室源码

    【PHP_AJAX无刷新聊天室源码解析】 在网页应用中，实时交互性是提升用户体验的关键要素之一，而PHP_AJAX无刷新聊天室正是实现这一目标的典型技术组合。这里的“PHP”指的是服务器端的脚本语言，用于处理数据和业务...

    ajax实现无刷新对数据库的操作(表格版).zip_ajax 表格_ajax 无刷新_ajax 表格_ajax 表格 数据_表

    总的来说，Ajax技术通过无刷新的方式提高了网页的交互性，使得在表格中对数据库的操作变得更加流畅和高效。在实践中，开发者需要结合HTML、CSS、JavaScript和服务器端语言（如PHP、Python或Node.js）来构建这样的...

    基于PHP的Ajax无刷新分页列表源码(自动跳转).zip

    【标题】"基于PHP的Ajax无刷新分页列表源码(自动跳转)"涉及的核心技术是PHP编程语言、Ajax（Asynchronous JavaScript and XML）异步技术以及前端分页的实现，其中还包括了自动跳转功能。这个源码可能是用于创建一个...

    AJAX JSP 无刷新表格

    Ajax 页面无刷新表格，完整支持表格编辑 姓名验证 增 删 改 查 源码带数据库 附件中可下载源码加数据库,下载前看自己是否需要 实现内容: 1.姓名无刷新检查 数据库中是否有同名的帐户 2.增 删 改 查 页面无刷新...

    Ajax全新教程 无刷新页面 无刷新数据更新 无刷新绑定 asp.net全新Ajax教程

    无刷新数据更新是Ajax实现无刷新页面的关键技术。它允许在后台与服务器进行通信，获取或发送数据，然后仅更新页面中的指定部分。例如，一个实时聊天应用，可以通过Ajax实现在不刷新页面的情况下接收到新的消息并显示...

    ajax实现无刷新对数据库的操作

    ajax实现无刷新对数据库的操作 ========================================= 功能:ajax实现无刷新对数据库的操作 有添加、删除、修改、分页 使用的是jquery框架 作者:wangsdong 来源:www.aspprogram.cn 文章为作者...

    jquery添加表格行内编辑代码.zip

    在这个“jquery添加表格行内编辑代码.zip”压缩包中，包含了一个使用jQuery实现的表格行内编辑功能的示例。下面将详细解释这个功能的实现原理和涉及的技术点。 首先，`demo.html`是主页面文件，它通常会包含HTML...

    ajax无刷新实例,无刷新分页，带数据库源文件

    【标题】中的“ajax无刷新实例,无刷新分页”主要涉及的是Web开发中的Ajax技术，这是一种能够在不重新加载整个网页的情况下更新部分网页内容的技术。Ajax全称Asynchronous JavaScript and XML（异步JavaScript和XML）...

    ajax无刷新聊天室源码--jsp版

    综上所述，"ajax无刷新聊天室源码--jsp版"涵盖了Ajax技术、JSP编程、Servlet交互、数据库操作等多个核心知识点，对于学习JavaWeb开发和理解前后端交互机制有着重要的实践意义。通过深入研究这个项目，开发者不仅可以...

    ASP和Ajax结合,实现无刷新操作数据库

    在ASP中处理服务器端逻辑，如访问数据库、验证用户输入等，然后利用Ajax在后台处理这些任务，无需刷新整个页面，只更新必要的内容区域。 实现ASP和Ajax的结合，主要涉及以下几个关键步骤： 1. **创建Ajax请求**：...

    ASP网上商城源码带数据库

    4. **商品展示**：商品展示页面通常包括商品图片、名称、价格、描述等信息，源码会包含获取和显示这些信息的逻辑，可能通过AJAX实现动态加载。 5. **用户管理**：用户注册、登录、密码找回等功能是网上商城必备的。...

    Ajax无刷新分页编辑DataGrid

    在实现Ajax无刷新分页编辑DataGrid时，需要考虑性能问题，如优化查询效率，避免一次性加载过多数据，以及合理设计数据库索引以提高数据检索速度。 8. 兼容性和安全性： 开发时需确保Ajax无刷新分页编辑DataGrid在...

    Java Ajax 无刷新分页实例（完整版）

    总的来说，"Java AJAX 无刷新分页实例（完整版）"是一个涵盖了前端交互、后端处理、数据库操作和用户体验设计等多个方面综合的项目，对于学习和实践Web开发中的AJAX应用非常有帮助。通过理解和实践这个实例，开发者...

    JSP数据库数据AJAX无刷新分页

    "JSP数据库数据AJAX无刷新分页"是一个常见的技术实现，它结合了JavaServer Pages（JSP）、数据库技术、Ajax（Asynchronous JavaScript and XML）以及前端分页组件，为用户提供了一种无需整个页面刷新即可获取并显示...

    基于AJAX的无刷新聊天室

    【基于AJAX的无刷新聊天室】是一种利用Ajax技术实现的实时交互聊天系统，它无需用户手动刷新页面就能即时更新聊天内容，提升了用户体验。在Web 2.0时代，AJAX（Asynchronous JavaScript and XML）成为了构建动态、...

    使用Ajax实现页面表格添删改查的异步刷新操作

    总结来说，"使用Ajax实现页面表格添删改查的异步刷新操作"是一个高效且用户友好的前端技术实践，它结合了JavaScript和HTTP，实现了无刷新的数据交互，显著提升了网页应用的性能和交互性。在部署和使用过程中，应遵循...

    AJAX无刷新聊天室 带实例数据库

    实现了以下的功能。...5.信息显示，发表消息，上线与下线，都感觉不到页面的刷新，ajax实现 6.滚动条的控制，有时需要看上面的消息，有时需要自动滚动，由你控制 7.点击退出时，关闭页面，其它窗体显示下线信息.

    ASP+AJAX无刷新用户注册、判断用户名数据库版

    【ASP+AJAX无刷新用户注册】是一种网页开发技术，旨在提供更加流畅和高效用户体验，让用户在不重新加载整个页面的情况下进行数据交互。这个技术结合了两种主要的技术：Active Server Pages（ASP）和Asynchronous ...

    Ajax无刷新分页代码 -ASP源码.zip

    在这个特定的【标题】"Ajax无刷新分页代码 - ASP源码.zip"中，我们可以预期包含的是一个使用ASP（Active Server Pages）语言实现的Ajax分页功能的源代码示例。 ASP是微软公司推出的一种服务器端脚本环境，用于创建...

Magicbox
Global site tag (gtag.js) - Google Analytics