写完这个雇员信息管理系统后,让我感受最深的是JSON的数据结构确实比XML更为优秀,但这并意味着JSON就可以代替XML,而作为轻量级开发,JSON应是首选。总之,JavaScript+Ajax在解析JSON类型的数据方面真的比XML简单、容易。下面贴出一些核心代码及效果图,完整案例请在本文最后下载。
1、数据分页代码:
function empInfo(){
var tbl = document.getElementById("tbl");
tbl.style.display = "none";
var xhr=getXhr();
xhr.open("GET", "./employee.do?symbol=pageInfo&page=" + nowPage
+ "&pageSize=" + pageSize, true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var obj=eval("("+xhr.responseText+")");
empInfoTool(obj);
}
}
}
2、获取总页数:
//获取总页数
function getCountPage(){
var tbl = document.getElementById("tbl");
tbl.style.display = "none";
var countRecord=0;
var xhr=getXhr();
xhr.open("GET","./employee.do?symbol=findAll",true);
xhr.send();
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var obj=eval("("+xhr.responseText+")");
countRecord=obj.length;
countPage = (countRecord % pageSize == 0 ? countRecord / pageSize
: Math.ceil(countRecord / pageSize));
}
}
}
3、最为核心的代码:
//将雇员信息转化成页面表格显示
function empInfoTool(obj){
var itbody = document.getElementById("itbody");
itbody.innerText = "";
for(var i=0;i<obj.length;i++){
var tr=document.createElement("tr");
var delbtn = document.createElement("input");
var upbtn = document.createElement("input");
delbtn.setAttribute("type", "button");
upbtn.setAttribute("type", "button");
delbtn.setAttribute("value", "删除");
upbtn.setAttribute("value", "编辑");
var empno=document.createElement("td");
var ename=document.createElement("td");
var job=document.createElement("td");
var mgr=document.createElement("td");
var hiredate=document.createElement("td");
var sal=document.createElement("td");
var comm=document.createElement("td");
var deptno=document.createElement("td");
var udtd=document.createElement("td");
empno.appendChild(document.createTextNode(obj[i].empno));
ename.appendChild(document.createTextNode(obj[i].ename));
job.appendChild(document.createTextNode(obj[i].job));
mgr.appendChild(document.createTextNode(obj[i].mgr));
var date=new Date(obj[i].hiredate.time);
var str=getFormatDate(date);
hiredate.appendChild(document.createTextNode(str));
sal.appendChild(document.createTextNode(obj[i].sal));
comm.appendChild(document.createTextNode(obj[i].comm));
deptno.appendChild(document.createTextNode(obj[i].deptno));
udtd.appendChild(upbtn);
udtd.appendChild(delbtn);
tr.appendChild(empno);
tr.appendChild(ename);
tr.appendChild(job);
tr.appendChild(mgr);
tr.appendChild(hiredate);
tr.appendChild(sal);
tr.appendChild(comm);
tr.appendChild(deptno);
tr.appendChild(udtd);
itbody.appendChild(tr);
//删除雇员信息
delbtn.onclick=function(){
var empno = this.parentNode.parentNode.firstChild.innerHTML;
var xhr=getXhr();
xhr.open("GET", "./employee.do?symbol=delete&empno="+ empno, true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
var obj=eval("("+xhr.responseText+")");
empInfoTool(obj);
}
}
}
//更新雇员信息
upbtn.onclick=function(){
var tbl = document.getElementById("tbl");
tbl.style.display = "block";
var empno_tr=$("empno_tr");
empno_tr.style.display="none";
var addbtn=$("addbtn");
addbtn.style.display="none";
var tr_emp = this.parentNode.parentNode;
var emp = tr_emp.childNodes;
for ( var i = 0; i < emp.length - 1; i++) {
if (emp[i].nodeType == 1) {
switch (i) {
case 0:
$("empno").value = emp[i].innerHTML;
break;
case 1:
$("ename").value = emp[i].innerHTML;
break;
case 2:
$("job").value = emp[i].innerHTML;
break;
case 3:
$("mgr").value = emp[i].innerHTML;
break;
case 4:
$("hiredate").value = emp[i].innerHTML;
break;
case 5:
$("sal").value = emp[i].innerHTML;
break;
case 6:
$("comm").value = emp[i].innerHTML;
break;
case 7:
var deptno = emp[i].innerHTML;
var xhr = getXhr();
xhr.open("GET", "./dept.do", true);
xhr.send();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4&& xhr.status == 200) {
var obj = eval("("+xhr.responseText+")");
DeptsInfo(obj, deptno);
}
}
break;
}
}
}
}
}//for循环结束
var pagediv = document.getElementById("pagediv");
if (!pagediv.hasChildNodes()) {
displayPage();
}
//分页事件处理
startPage.onclick = function() {
nowPage = 1;
empInfo();
}
pageUp.onclick = function() {
if (nowPage - 1 > 1) {
nowPage -= 1;
} else {
nowPage = 1;
}
empInfo();
}
pageDown.onclick = function() {
if (nowPage + 1 >= countPage) {
nowPage = countPage;
} else {
nowPage += 1;
}
empInfo();
}
endPage.onclick = function() {
nowPage = countPage;
empInfo();
}
}
4、部分servlet代码:
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("application/json;charset=utf-8");
request.setCharacterEncoding("utf-8");
String symbol = request.getParameter("symbol");
String pageNo = request.getParameter("page") == null ? "1" : request
.getParameter("page");
int nowPage = Integer.parseInt(pageNo);
int pageSize = request.getParameter("pageSize") == null ? 5 : Integer
.valueOf(request.getParameter("pageSize"));
if ("findAll".equals(symbol)) {
EmployeeService esi = new EmployeeServiceImpl();
List<Employee> emps = esi.findAll();
JSONArray ja = JSONArray.fromObject(emps);
response.getWriter().print(ja);
} else if ("pageInfo".equals(symbol)) {
EmployeeService esi = new EmployeeServiceImpl();
List<Employee> emps = esi.getNowPageInfo(nowPage, pageSize);
JSONArray ja = JSONArray.fromObject(emps);
response.getWriter().print(ja);
} else if ("delete".equals(symbol)) {
int empno = Integer.parseInt(request.getParameter("empno"));
EmployeeService esi = new EmployeeServiceImpl();
esi.deleteById(empno);
request.getRequestDispatcher("./employee.do?symbol=pageInfo")
.forward(request, response);
} else if ("update".equals(symbol)) {
int empno = Integer.parseInt(request.getParameter("empno"));
String ename = request.getParameter("ename");
String job = request.getParameter("job");
int mgr = Integer.valueOf(request.getParameter("mgr"));
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Date hiredate = null;
try {
hiredate = sdf.parse(request.getParameter("hiredate"));
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
double sal = Double.valueOf(request.getParameter("sal"));
double comm = Double.valueOf(request.getParameter("comm"));
int deptno = Integer.valueOf(request.getParameter("deptno"));
Employee employee = new Employee();
employee.setEmpno(empno);
employee.setEname(ename);
employee.setJob(job);
employee.setMgr(mgr);
employee.setHiredate(hiredate);
employee.setSal(sal);
employee.setComm(comm);
employee.setDeptno(deptno);
EmployeeService esi = new EmployeeServiceImpl();
esi.update(employee);
request.getRequestDispatcher("./employee.do?symbol=pageInfo")
.forward(request, response);
} else if ("add".equals(symbol)) {
int empno = Integer.parseInt(request.getParameter("empno"));
String ename = request.getParameter("ename");
String job = request.getParameter("job");
int mgr = Integer.valueOf(request.getParameter("mgr"));
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
Date hiredate = null;
try {
hiredate = sdf.parse(request.getParameter("hiredate"));
} catch (ParseException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
double sal = Double.valueOf(request.getParameter("sal"));
double comm = Double.valueOf(request.getParameter("comm"));
int deptno = Integer.valueOf(request.getParameter("deptno"));
Employee employee = new Employee();
employee.setEmpno(empno);
employee.setEname(ename);
employee.setJob(job);
employee.setMgr(mgr);
employee.setHiredate(hiredate);
employee.setSal(sal);
employee.setComm(comm);
employee.setDeptno(deptno);
EmployeeService esi = new EmployeeServiceImpl();
esi.insert(employee);
request.getRequestDispatcher("./employee.do?symbol=pageInfo")
.forward(request, response);
}
}
另外还有Dao包下的实现代码,由于实在太多,这里就不再贴出来了,详细内容请下载完整案例。以下是效果图:
下面是完整案例压缩包:
- 大小: 70.2 KB
- 大小: 23.3 KB
分享到:
相关推荐
基于Jquery+Ajax+Json实现分页显示附效果图
【项目原型】spring+spring mvc+mybatis+shiro+maven+bootstrap+ajax+json+分页+逆向工程 包含现在最流行的技术框架,快速部署各种应用,加入shiro权限框架,安全,美观,你值得拥有
HTML+CSS+JavaScript+AJAX+JQuery入门
全栈实现学生信息管理系统,未使用框架,适合初学web开发者。压缩包中包括前端、后端、数据库(数据库建表文件StudentMS\web\sql) 前端:html、css、JavaScript、jquery、ajax 后端:java、jdbc、servlet、org.json...
一个基于JavaScript+Jquery+Ajax技术实现的用户注册系统源程序代码.
不推荐下载,该版本存在较多问题 推荐下载笔者的新发布的该版本,名称为xmlhttp_asp+javascript+json+xml
基于Java+MySQL+JavaScript+Ajax+Servlet+Filter+CSS+JSP+tomcat的信息管理系统的源码,适用于MySQL5.x,idea,tomcat8-9,拥有基本的信息的增删改查,查找方式多种,登录功能。字符集选择UTF-8,可在此基础上修改为...
使用Servlet+Jsp+JDBC实现增删改查,前台显示界面使用JavaScript、Ajax与后台交互进行登录验证,并对查询结果实现分页、局部刷新,以及复选框(全选、反选)操作,适合Web开发的初学者
javascript+jquery+ajax相关学习资料PPT
很多示例我都下载看了,要么复杂,要么就实现不了。我这个示例是自己亲手写的。新建一个eslipse项目,...示例包括jquery通过ajax获取selvert类中转换的json数据和javascript通过ajax获取selvert类中转换的json数据。
基于 Java Web+JavaScript+JavaBean+Servlet+Ajax的企业信息管理系统.采用MySQL数据库.是很有价值的J2EE学习的入门案例分析-Based on Java Web+ JavaScript+ JavaBean+ Servlet+ Ajax for enterprise information ...
后台: * 管理员模块 * 分类管理模块 * 图书管理模块 * 订单模块 二、项目运行 环境配置: Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术: JSP + C3P0+ Servlert...
1.13 使用JavaScript JSP+AJAX1.13 使用JavaScript JSP+AJAX1.13 使用JavaScript JSP+AJAX
JavaScript+jsp+ajax实现的聊天系统 内含数据库,详细的面向对象文档 运行的配置tomcat+mysql
Ajax+Servlet+Java+JavaScript实现分页,这个方法相当方便,你绝对没想到!
Zabbix使用javascript+jsonpath预处理动态生成监控项.docx
javascript +ajax 根据用户输入地址,自动获取城市
含数据库文件,界面美观 注:源码为MyEclipse中开发文件,测过可以正常运行
C#网站开发案例详解 基于Ajax+CSS+JavaScript+XML技术 源码
javascript+ajax实用技术,共80个经典实例。技术巧用,效果经典。。。。。