lvp
- 浏览: 115185 次
- 性别:
- 来自: 北京
-
文章分类
最新评论
-
zxjlwt：
学习了。http://surenpi.com
JSP 编译和运行过程与JSP源码简单分析 -
KevinDai007：
KevinDai007 写道这个项目是不是我问题?我在我电脑上 ...
AJAX无刷新聊天室实现(压缩包附件下载) -
KevinDai007：
这个项目是不是我问题?我在我电脑上运行时，找开第二个窗口后，那 ...
AJAX无刷新聊天室实现(压缩包附件下载) -
shuixiafeiqiao：
JSP 无数据库型简单聊天室 附件源码 -
shuixiafeiqiao：
...
JSP 无数据库型简单聊天室 附件源码
Ajax 页面无刷新完整 表格编辑 姓名验证 增 删 改 查 源码带数据库
附件中可下载源码加数据库,下载前看自己是否需要
实现内容:
1.姓名无刷新检查 数据库中是否有同名的帐户
2.增 删 改 查 页面无刷新 实现
3.表格编辑 无需提交新的页面处理数据
4.POST 提交中文已经处理
实现:Jsp ,js ,css, ajax,sqlserver 2005
效果图
1.页面显示数据
2.用户名自动检查
3.已经存在的显示
4.添加前
5.添加后的数据页面也不会刷新
6.还可以实现行内编辑效果
7.修改数据
8.更新后的数据
部分源码 index.jsp
index.jsp 主页面实现思路
1. 在 body onload 事件中 调用函数
getData()函数 主要是做异步向数据库发送请求动作，可以处理增 删 改 查操作
请求的页面都是 getdata.jsp
通过 判断用户到底执行的是哪一个动作 ,第二个参数是 id 用户执行 删除和修改标识动作
检查 用户姓名是否存在部分也非常的简单 ，请求的是 checkuser.jsp 页面
中间有一部份代码，是用户当前页面编辑的传递参数，通过 innerHTML 输出标签内容
checkuser.jsp 主要是用户检查用户是否存在
中间一部分的表格编辑部分是前一个实例中专门实现了的，因此如果只是需要看表格编辑部分，可以查看 http://lvp.iteye.com/blog/343241
且这个实例中的表格编辑部分有所改动，主要在于页面请求的表格数据不是当页显示，而是从异步请求 处理页面部分返回的，因此有一些差异，大家可以对比的去看.
getdata.jsp 表格部分处理代码 和 index.jsp中的代码有对应的部分
我使用的是IE6.0浏览器. 你看看是浏览器的问题,还是部署的问题.
正找这方面的东西呢,多谢楼主分享
附件中可下载源码加数据库,下载前看自己是否需要
实现内容:
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'> 不能为空！</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> <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">
<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'> 不能为空！</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> <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>
<a href="javascript:getData('delete','<%=message.getId()%>')">Delete</a>
</td>
</tr>
<%
}
%>
- 20090401-AJAX_增删改查_用户名验证_表格编辑.rar (508.3 KB)
- 下载次数: 1191
17
顶
顶
0
踩
踩
分享到：
评论
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
正找这方面的东西呢,多谢楼主分享发表评论
-
JQuery 第二天 - 表单对象属性过滤选择器
2010-03-30 11:51 2115<%@ page language="java ... -
JQuery 第二天 - 属性过滤选择器
2010-03-30 11:21 1643<%@ page language="java ... -
JQuery 第二天 - 内容过滤选择器
2010-03-30 11:07 1266<%@ page language="java ... -
JQuery 第二天 - 过滤选择器
2010-03-30 10:34 1205[size=x-small]<%@ page langu ... -
JQuery 第二天 - 层次选择器
2010-03-30 10:13 1181<%@ page language="ja ... -
JQuery 第一天
2010-03-30 09:10 1388demo01.jsp 基本步骤 <%@ page l ... -
AJAX无刷新聊天室实现(压缩包附件下载)
2009-04-12 18:28 11845之前也写了一个小的聊 ...
相关推荐
Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无刷新分页示例源码 程序介绍： 程序使用jquery方法提交请求，处理后将数据库绑定到页面中。 Ajax无...
php_ajax无刷新聊天室源码
ajax无刷新实例,无刷新分页，带数据库源文件
ajax 无刷新 实现数据库添加删除等 比较全面 包括删除添加等
基于PHP的Ajax无刷新分页列表源码(自动跳转).zip
Ajax 页面无刷新表格，完整支持表格编辑 姓名验证 增 删 改 查 源码带数据库 附件中可下载源码加数据库,下载前看自己是否需要 实现内容: 1.姓名无刷新检查 数据库中是否有同名的帐户 2.增 删 改 查 页面无刷新...
ajax实现无刷新对数据库的操作 ========================================= 功能:ajax实现无刷新对数据库的操作 有添加、删除、修改、分页 使用的是jquery框架 作者:wangsdong 来源:www.aspprogram.cn 文章为作者...
ajax无刷新聊天室源码 使用jsp制作的一个聊天室,对新手有很好的帮助.
ASP+AJAX无刷新用户注册、判断用户名数据库版
通过Jquery的Ajax实现无刷新读写操作，例子很简单，包含对三种常见的控件的操作（文本框、下拉框、勾选框），架构也可以参考，对初学者还是有用的。
asp Ajax无刷新文件上传(带进度条,无组件) 技术交流网址WWW.94X.NET
php中ajax无刷新插入数据库 非常好用
JSP数据库数据AJAX无刷新分页 保证运行 学习好范例
实现了以下的功能。...5.信息显示，发表消息，上线与下线，都感觉不到页面的刷新，ajax实现 6.滚动条的控制，有时需要看上面的消息，有时需要自动滚动，由你控制 7.点击退出时，关闭页面，其它窗体显示下线信息.
Ajax全新教程 无刷新页面 无刷新数据更新 无刷新绑定 asp.net全新Ajax教程
艾恩Ajax无刷新文件上传(带进度条,无组件)艾恩Ajax无刷新文件上传(带进度条,无组件)艾恩Ajax无刷新文件上传(带进度条,无组件)
基于PHP的Ajax无刷新文件上传代码源码.zip
thinkphp+ajax无刷新分页，方便快捷，简单易行
基于AJAX的无刷新聊天室,一个不错的东东,来自于AJAX WEB 2.0
ajaxregASP+AJAX无刷新用户注册、判断用户名数据库版