javaweb网站开发模板化设计

javaweb网站开发模板化设计
wang@20160620
前言

前一段时间想要开发一个BS架构的应用程序调用我开发的通讯驱动接口来和硬件设备进行通讯测试，以验证我的驱动接口及硬件设备的下端程序通讯是否正常和稳定；并且这个项目系统后期也需要用到手机app；前一阵子有玩了一段手机app开发，从网站上下载一个app的源码，看到它的与后台通讯是通过json在传递数据的；为此我就在思考有没有什么方式可以让网页开发简单化和模块化，后台服务端的通讯可不可以不仅仅运用在PC网页上，也可以适用于手机app上；能不能后台的服务端的通讯数据全部用json来传递，前台网页全部解析json数据，这样一来不就可以PC上能调用，app上也同样可以调用，我想这个方式应该是可以行的通的。

就这样，我沿着这个思路，开始规划和实施我的设想，并按这个思路来开展网站的设计；最近我已经把这个网站搭建出来了，前后台全部用json传数据，并规范了通讯格式，制定前后台的通讯规范，按照规范设计代码；通过规范化的设计可以很容易的扩展模块功能，方便网站建设；

本文主要内容围绕以下三点：定义前后台通讯规范、后台的action通讯代码、前台的jsp代码来展开介绍；

内容

一、定义前后台通讯规范

在我看来，表格无非都具备有列表、添加、修改、删除、查找等功能，可以把这些通用的功能模块化，定义共同可用的参数，以后添加其它模块就可套用相同的文件格式，只需要修改少量的代码就可以实现相应的功能，通过模板化的设计，可以大大的加快网站的开发；以下是我的通用的接口定义；

1、列表、添加、修改、删除接口定义

方法名	说明	后台action	访问页面	输入参数	返回
list	列表	xxxlist.do	xxxlist.jsp	1、关键字段1: key1 2、搜索:searchStr 3、当前页:pageNum	1、Json数据 2、格式： {“status”:”0”, “caption”:”栏目标题”, “total”:”记录数”, “jsonstr”:[{“字段名1”： ”值1”，“字段2”：“值2”，...},{...},...]}
add	新增	xxxadd.do	xxxadd.jsp	1、关键字段1: key1 2、一笔Json数据格式： {“jsonstr”:[{“字段名1”：”值1”，“字段2”：“值2”]}	1、json提示信息 2、格式： {“status”:”0”, “message”:”提示信息”｝
view	显示一条记录信息	xxxview.do	xxxview.jsp	1、关键字段1: key1 2、关键字段2: key2	2、一笔Json数据格式： {“status”:”0”, “caption”:””, “jsonstr”:[{“字段名1”：”值1”，“字段2”：“值2”}]}
edit	编辑	xxxedit.do	xxxedit.jsp	1、关键字段1: key1 2、关键字段2: key2 3、一笔Json数据 1c6f3 格式： {“jsonstr”:[{“字段名1”：”值1”，“字段2”：“值2”]}	1、json提示信息 2、格式： {“status”:”0”, “message”:”提示信息”｝
delete	删除	xxxdelete.do	提示窗	1、关键字段1: key1 2、关键字段2: key2	1、json提示信息 2、格式： {“status”:”0”, “message”:”提示信息”｝
deleteall	删除所有	xxxdeleteall.do	提示窗	1、关键字段1: key1	1、json提示信息 2、格式： {“status”:”0”, “message”:”提示信息”｝
...

参数定义

（1）关键字段：在action类中定义关键字段

（2）数据内容：数据内容定义为json类型

2、前台页面功能说明及相关的后台调用

菜单模块	前台页面	功能	后台action	备注
xxx管理	xxxlist.jsp	信息列表、查询、调用添加页面、调用修改页面、删除	Qylist.do qydelete.do	查询：xx名称
xxxadd.jsp	添加数据	qyadd.do
xxxupdate.jsp	修改数据	Qyview.do qyupdate.do
...

可以按这种方式，再继续扩展一些特殊的接口定义；

二、后台的action通讯代码编写

主要是根据前后台的通讯规范来定义接口的；主要实现以下几个功能“列表信息、添加、更新、删除、显示等”；并按规范命名和定义json通讯格式；以下为代码参考；

//xxxActiont.java

public class xxxAction extends AbstractAction{

private xxxServiceservice; //数据接口

private PagerServicepagerService;//翻页处理

private Pagerpager;

protected StringpageNum;
//当前页

protected StringpagerMethod;
//执行的方法 “首页，前一页，后一页，尾页”

protected StringtotalRows; //总记录数

protected Stringkey1;
// 关键字段1 ( xxid)

protected Stringkey2; // 关键字段2
(xxid)

protected StringjsonStr;//json数据
｛xx名称｝

protected StringsearchStr; //name

public xxxAction()

{

pagerService =
new PagerService();//翻页处理

service =
new xxxService();//数据接口

}

/***************************************************

*函数名 : list

*功能描述:显示列表信息

*返回值 : json

*参数 :

*作者 : wang

*时间 : 2016-06-01

*修改记录:

****************************************************/

public void list()throws Exception

{

String jsonStr ="";

List<xxxForm> list;

xxxForm form;

String status="0";

String qyid;

String caption;//显示标题

qyid =
key1;

int totalRow=service.getRows(qyid,searchStr);

pager=pagerService.getPager(this.getPageNum(),this.getPagerMethod(),
totalRow);

this.setPageNum(String.valueOf(pager.getCurrentPage()));

this.setTotalRows(String.valueOf(totalRow));

caption=service.getCaption(qyid);

list = service.getList(qyid,pager.getPageSize(),pager.getStartRow(),searchStr);

jsonStr="{\"status\":\""+status+"\",";

jsonStr+="\"caption\":\""+caption+"\",";

jsonStr+="\"total\":\""+totalRow+"\",";

if(list.size()>0)

{

jsonStr+="\"jsonstr\":[";

for(int i=0;i<list.size();i++)

{

form=(xxxForm)list.get(i);

jsonStr+="{\"id\":\""+form.getId()+"\",";

jsonStr+="\"name\":\""+form.getFName()+"\",";

jsonStr+="\"lon\":\""+form.getLon()+"\",";

jsonStr+="\"lat\":\""+form.getLat()+"\"},";

}

}

else

{

jsonStr+="\"jsonstr\":[";

jsonStr+="{\"id\":\"\",";

jsonStr+="\"name\":\"\",";

jsonStr+="\"lon\":\"\",";

jsonStr+="\"lat\":\"\"},";

}

jsonStr = jsonStr.substring(0,jsonStr.length()-1);

jsonStr+="]}";

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//设置utf-8防止显示中文乱码

response.getWriter().write(jsonStr);

}

/***************************************************

*函数名 : add

*功能描述:添加

*返回值 : json

*参数 :

*作者 : wang

*时间 : 2016-06-01

*修改记录:

****************************************************/

public void add()throws Exception

{

xxxForm form =new xxxForm();

String message="";

String retJsonStr;

int ret=1;

String qyid;

String name="";

qyid =
key1;

JSONObject jsonObject = JSONObject.fromObject(jsonStr);

JSONArray data = jsonObject.getJSONArray("jsonstr");

if(data.size()>0)

{

String s = data.getString(0);

JSONObject data2 = JSONObject.fromObject(s);

name = data2.getString("name");

String lon = data2.getString("lon");

String lat = data2.getString("lat");

form.setFName(name);

form.setLat(lat);

form.setLon(lon);

ret =
service.add(form);

}

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//设置utf-8防止显示中文乱码

if(ret==0)

{

message = "添加成功!";

}

else

{

message = "添加失败!";

}

retJsonStr="{\"status\":\""+ret+"\",";

retJsonStr+="\"message\":\""+message+"\"}";

response.getWriter().write(retJsonStr);

}

/***************************************************

*函数名 : update

*功能描述:修改

*返回值 : json

*参数 :

*作者 : wang

*时间 : 2016-06-01

*修改记录:

****************************************************/

public void update()throws Exception

{

xxxForm form =new xxxForm();

String message="";

String retJsonStr;

int ret=1;

String id =key2;

JSONObject jsonObject = JSONObject.fromObject(jsonStr);

JSONArray data = jsonObject.getJSONArray("jsonstr");

if(data.size()>0)

{

String s = data.getString(0);

JSONObject data2 = JSONObject.fromObject(s);

String name = data2.getString("name");

String lon = data2.getString("lon");

String lat = data2.getString("lat");

form.setId(Integer.parseInt(id));

form.setFName(name);

form.setLat(lat);

form.setLon(lon);

ret =
service.update(form);

}

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//设置utf-8防止显示中文乱码

if(ret==0)

{

message = "修改成功!";

}

else

{

message = "修改失败!";

}

retJsonStr="{\"status\":\""+ret+"\",";

retJsonStr+="\"message\":\""+message+"\"}";

response.getWriter().write(retJsonStr);

}

/***************************************************

*函数名 : view

*功能描述:显示一条记录信息

*返回值 : json

*参数 :

*作者 : wang

*时间 : 2016-06-01

*修改记录:

****************************************************/

public void view()throws Exception

{

String message="";

String str,retJsonStr;

String id;

int ret=1;

id =key2;

str =
service.view(Integer.parseInt(id));

if(str!="")

{

retJsonStr="{\"status\":\"0\",";

message ="获取数据ok";

retJsonStr+="\"message\":\""+message+"\",";

retJsonStr+=str+"}";

}

else

{

message ="获取不到数据";

retJsonStr="{\"status\":\"1\",";

retJsonStr+="\"message\":\""+message+"\"}";

}

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//设置utf-8防止显示中文乱码

response.getWriter().write(retJsonStr);

}

/***************************************************

*函数名 : del

*功能描述:删除

*返回值 : json

*参数 :

*作者 : wang

*时间 : 2016-06-01

*修改记录:

****************************************************/

public void delete()throws Exception

{

String id;

String message="";

String retJsonStr;

id =
key2;

int ret =service.delete(Integer.parseInt(id));

HttpServletResponse response = ServletActionContext.getResponse();

response.setContentType("text/html;charset=UTF-8");//设置utf-8防止显示中文乱码

if(ret==0)

{

message = "删除成功!";

}

else

{

message = "删除失败!";

}

retJsonStr="{\"status\":\""+ret+"\",";

retJsonStr+="\"message\":\""+message+"\"}";

response.getWriter().write(retJsonStr);

}

//-------------------------设置属性值---------------------------

public String getPageNum() {

return pageNum;

}

public void setPageNum(String currentPage) {

this.pageNum = currentPage;

}

public String getPagerMethod() {

return pagerMethod;

}

public void setPagerMethod(String pagerMethod) {

this.pagerMethod = pagerMethod;

}

public Pager getPager() {

return pager;

}

public void setPager(Pager pager) {

this.pager = pager;

}

public String getTotalRows() {

return totalRows;

}

public void setTotalRows(String totalRows) {

this.totalRows = totalRows;

}

public String getKey1() {

return key1;

}

public void setKey1(String key1) {

this.key1 = key1;

}

public String getKey2() {

return key2;

}

public void setKey2(String key2) {

this.key2 = key2;

}

public String getSearchStr() {

return searchStr;

}

public void setSearchStr(String val) {

this.searchStr = val;

}

public void setJsonStr(String jsonstr) {

this.jsonStr = jsonstr;

}

public String getJsonStr() {

return this.jsonStr;

}

}

三、前台的jsp代码编写

主要编写3个jsp文件：xxxlist.jsp、xxxadd.jsp、xxxupdate.jsp;

1、列表信息（Xxxlist.jsp）（主要功能包含翻页、查询、显示添加、更新界面、删除等功能;

代码如下：

Xxxlist.jsp

<!DOCTYPE html>

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.util.List" errorPage="" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<%

String path = request.getContextPath();

String key1=request.getParameter("key1"); //pid 区域id

String key2=request.getParameter("key2"); //ctrlid 控制器id

%>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<script type="text/javascript">

var selectedTr=null;

//初始化，加载完成后执行

window.onload=function(){

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

search();

};

//搜索按钮绑定回车事件

document.onkeydown = function(event){

if (event.keyCode == 13) {

event.cancelBubble = true;

event.returnValue = false;

search();

}

}

//首页

function first()

{

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

//调用查询方法

search();

}

//最后一页

function last()

{

var pageCount = $("#pageCount").val();

document.getElementById("pageNum").value = pageCount;

document.getElementById("pagerMethod").value = "last";

//调用查询方法

search();

}

//下一页

function next()

{

//得到当前选中项的页号

var id=$("#pageNum").val();

//计算下一页的页号

var page=parseInt(id)+1;

id = $("#pageCount").val();

var pageCount = parseInt(id);

if(page>pageCount) page= pageCount;

document.getElementById("pageNum").value = page.toString();

document.getElementById("pagerMethod").value = "next";

//调用查询方法

search();

}

//上一页

function previous()

{

//得到当前选中项的页号

var id=$("#pageNum").val();

//计算上一页的页号

var previousPage=parseInt(id)-1;

if(previousPage<1) previousPage = 1;

document.getElementById("pageNum").value =previousPage.toString();

document.getElementById("pagerMethod").value = "previous";

//调用查询方法

search();

}

//重新搜索，模糊查询信息

function research()

{

document.getElementById("pageNum").value = "1";

document.getElementById("pagerMethod").value = "first";

//调用查询方法

search();

}

//搜索，模糊查询信息

function search()

{

//得到查询条件

var searchString=$("#searchString").val();

var key1=document.getElementById("key1").value;

//得到每页显示条数 后台暂时固定16

var pageSize=16;

//得到显示第几页

var num=$("#pageNum").val();

var pageNum = parseInt(num);

var pagerMethod=$("#pagerMethod").val();

$.ajax({

type: "POST",

async: false,

url: "xxxlist.do",

data:{"key1":key1,

"searchStr":searchString,

"pageNum":pageNum,

"pagerMethod":pagerMethod

},

dataType:"json",

error: function(){alert('数据获取错误');},

success: function (data) {

var pageEntity=data;

var obj = pageEntity["jsonstr"];

//将除模板行的thead删除，即删除之前的数据重新加载

$("thead").eq(0).nextAll().remove();

//将获取到的数据动态的加载到table中

// alter(obj.length);

for (var i = 0; i < obj.length; i++) {

//获取模板行，复制一行

var row = $("#tem").clone();

//给每一行赋值

row.find("#id").text(obj[i].id); //id号

row.find("#name").text(obj[i].name); //名称

row.find("#lon").text(obj[i].lon); //经度

row.find("#lat").text(obj[i].lat); //纬度

//将新行添加到表格中

row.appendTo("#table");

}

//当前记录总数

var pageNumCount=pageEntity["total"];

//提示标题

var caption = pageEntity["caption"];

//document.getElementById("caption").value = caption;

document.getElementById("caption").innerText= caption;

var pageNumCount = parseInt(pageNumCount);

//得到总页数

var pageCount;

if(pageNumCount/pageSize==0)

{

pageCount=pageNumCount/pageSize;

}

else

{

pageCount=Math.ceil(pageNumCount/pageSize);

}

// $("#pageCount").val() = pageCount;

document.getElementById("pageCount").value = pageCount;

//输出"显示第1
至10
项记录，共57
项"

document.getElementById("DataTables_Table_0_info").innerHTML=

"【"+pageNum+"/"+pageCount.toString()+"】
"

+" 【共"+pageNumCount.toString()+"笔】";

//如果总记录数小于16条，则不显示分页

if((pageNumCount-2)<0)

{

document.getElementById("bottomTool").style.display="none";

}else{

document.getElementById("bottomTool").style.display="";

}

// pageNum = parseInt(pageNum);

/**给上一步下一步加颜色**/

//判断是否只有一页

if(pageCount==1)

{

//如果只有一页，上一步，下一步都为灰色

$("#previousPage").css("color","#AAA");//给上一步加灰色

$("#nextPage").css("color","#AAA");//给下一步加灰色

$("#firstPage").css("color","#AAA");//给上一步加灰色

$("#lastPage").css("color","#AAA");//给下一步加灰色

}

else if(pageNum-1<1)

{

//如果是首页,则给上一步加灰色，下一步变蓝

$("#firstPage").css("color","#AAA");

$("#previousPage").css("color","#AAA");//给上一步加灰色

$("#nextPage").css("color","#00F");//给下一步加蓝色

$("#lastPage").css("color","#00F");

}

else if(pageNum==pageCount)

{

//如果是尾页,则给上一步加蓝色，下一步灰色

$("#firstPage").css("color","#00F");

$("#previousPage").css("color","#00F");//给上一步标签加蓝色

$("#nextPage").css("color","#AAA");//给下一步标签加灰色

$("#lastPage").css("color","#AAA");

}

else

{

//上一步为蓝色，下一步为绿色

$("#firstPage").css("color","#00F");

$("#previousPage").css("color","#00F");//给上一步加蓝色

$("#nextPage").css("color","#00F");//给下一步加蓝色

$("#lastPage").css("color","#00F");

}

}

});

}

function c1(obj)

{

var td = obj.cells[0];

if(td.innerText!="id号")

{

if(selectedTr!=null) selectedTr.style.backgroundColor='white';

if(selectedTr==obj)

{

selectedTr=null;//加上此句，以控制点击变白，再点击反灰

document.getElementById("key2").value ='';

}

else

{

obj.style.backgroundColor='lightblue'; //把点到的那一行变希望的颜色;

selectedTr=obj;

td = selectedTr.cells[0];

document.getElementById("key2").value = td.innerText;

}

}

}

//添加窗口

function addwin()

{

var pid=document.getElementById("key1").value;

var caption=document.getElementById("caption").innerText;

var x = window.screen.height;

var y = window.screen.width;

var h = 350;

var w = 450;

var model = "title=word,location=no,resizable=no,scrollbars=no,height=" + h + ",width=" + w + ",status=no,toolbar=no,menubar=no,location=no,top=" + (x-h)/2 + ",left=" + (y-w)/2;

var url = "";

url = "<%=path%>/web/xxx/xxxaadd.jsp?key1="+pid+"&caption="+caption;//弹出窗口的页面内容

var oOpen = window.open(url,"add",model);

oOpen.focus();

}

//修改窗口

function updatewin()

{

var id=document.getElementById("key2").value;

if(id=='')

{

alert("请选择一笔记录");

return;

}

var caption=document.getElementById("caption").innerText;

var x = window.screen.height;

var y = window.screen.width;

var h = 350;

var w = 450;

var model = "title=word,location=no,resizable=no,scrollbars=no,height=" + h + ",width=" + w + ",status=no,toolbar=no,menubar=no,location=no,top=" + (x-h)/2 + ",left=" + (y-w)/2;

var url = "";

url = "<%=path%>/web/xxx/xxxupdate.jsp?key2="+id+"&caption="+caption;//弹出窗口的页面内容

var oOpen = window.open(url,"update",model);

oOpen.focus();

}

function ondoubleclick(obj)

{

var td = obj.cells[0];

td = obj.cells[0];

document.getElementById("key2").value = td.innerText;

updatewin();

}

//删除一条记录

function deleteone()

{

var id = document.getElementById("key2").value ;

if(id=='')

{

alert("请选择一笔记录");

return;

}

if(!confirm("确认删除吗"))

{

return;

}

$.ajax({

type: "POST",

async: false,

url: "xxxdelete.do",

data:{"key2":id

},

dataType:"json",

error: function(){alert('数据获取错误');},

success: function (data)

{

var pageEntity=data;

var status = pageEntity["status"];

var message = pageEntity["message"];

if (message != "")

{

alert(message);

document.getElementById("key2").value = '';

research();

}

}

});

}

function Trim(str,is_global)

{

var result;

result = str.replace(/(^\s+)|(\s+$)/g,"");

if(is_global.toLowerCase()=="g")

result = result.replace(/\s/g,"");

return result;

}

</script>

<body style="padding:10px 30px;" bgColor=#ffffff>

<div class="row">

<div >

<div class="panel-heading" style="background-color:#F5F5F5">

<label id="caption" style="font-size:18px;"></label>

</div>

</div>

</div>

<br>

<div class="control-group info">

<div class="controls">

<span class="help-inline">请输入名称</span>

<input type="text" id="searchString" maxlength="30">

<button type="button" class="btn
btn-info" onclick="research()" onkeypress="Enter()">搜索</button>

</div>

</div>

<!--
表格显示 -->

<div class="row">

<div class="col-md-12" style="margin-top:0px;">

<div class="panel panel-info">

<div class="panel-heading">xxx信息&nbsp

<button type="button" onclick="addwin()" class="btn
btn-info"><i class="icon-plus"></i>添加</button>

&nbsp

<button type="button" onclick="updatewin()" class="btn
btn-info">编辑</button>

&nbsp

<button type="button" onclick="deleteone()" class="btn
btn-info">删除</button>

</div>

<br/>

<table id="table" class="table
table-striped table-bordered table-hover datatable">

<thead id="tem">

<tr class="trs" onclick="c1(this);" ondblclick="ondoubleclick(this);">

<th id="id">id号</th>

<th id="name">设备名称</th>

<th id="lon">经度</th>

<th id="lat">纬度</th>

</tr>

</thead>

<tbody>

</tbody>

</table>

</div>

</div>

</div>

<!--
页面底部显示 -->

<!--
每页显示几条记录 -->

<div id="bottomTool" class="row-fluid" >

<!--
显示第 1 至10
项记录，共57
项-->

<div class="span6" style="width:25%;" >

<div id="DataTables_Table_0_info" class="dataTables_info"> </div>

</div>

<!--
第2页-->

<div class="span6" style="width:80%;">

<div class="dataTables_paginate paging_bootstrap
pagination">

<a id="firstPage" href="#" onclick="first()"> 首页</a>

&nbsp

<a id="previousPage" href="#" onclick="previous()"> ←上一页</a>

&nbsp

<a id="nextPage" href="#" onclick="next()"> 下一页
→ </a>

&nbsp

<a id="lastPage" href="#" onclick="last()"> 未页</a>

</div>

</div>

</div>

<input type="hidden" name="key1" value=<%=key1%> id="key1"/>

<input type="hidden" name="key2" id="key2"/>

<input type="hidden" name="pageNum" id="pageNum"/>

<input type="hidden" name="pageCount" id="pageCount"/>

<input type="hidden" name="pagerMethod" id="pagerMethod"/>

<script type="text/javascript" src="<%=path%>/js/jquery-1.7.2.min.js"></script>

</body>

</html>

2、添加界面（xxxadd.jsp)

主要是编辑输入界面，添加功能是调用xxxadd.do 保存添加记录；代码如下：

//xxxadd.jsp

<!DOCTYPE html>

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.util.List" errorPage="" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<%

String path = request.getContextPath();

String key1=request.getParameter("key1");

String caption =new String(request.getParameter("caption").getBytes("iso-8859-1"),"utf-8");

%>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<script type="text/javascript">

function add()

{

var pid = document.getElementById("key1").value ;

var name = document.getElementById("name").value ;

var lon = document.getElementById("lon").value ;

var lat = document.getElementById("lat").value ;

var jsonstr="";

jsonstr="{\"jsonstr\":[{\"name\":\""+name+"\",";

jsonstr+="\"rtsp\":\""+rtsp+"\",";

jsonstr+="\"lon\":\""+lon+"\",";

jsonstr+="\"lat\":\""+lat+"\"}]}";

$.ajax({

type: "POST",

async: false,

url: "xxxaadd.do",

data:{"key1":pid,

"jsonStr":jsonstr

},

dataType:"json",

error: function(){alert('数据获取错误');},

success: function (data)

{

var pageEntity=data;

var status = pageEntity["status"];

var message = pageEntity["message"];

if (message != "")

{

if(status=="0")

{

window.opener.location.reload();

self.close();//关闭子页面

}

else

{

alert(message);

}

}

}

});

}

function closeReflush()

{

// window.opener.location.reload();

self.close();//关闭子页面

}

function isnumberfloat(obj){

var tmp = obj.value;

tmp = tmp.replace(/[^\d.]/g, "");

tmp = tmp=='' ? '' : tmp;

obj.value = tmp;

}

</script>

<body bgColor=#ffffff>

<div id="page-wrapper">

<!-- PageBreadcrumb -->

<div class="page-breadcrumbs">

<%=caption%> --> 添加

</div>

<!-- /PageBreadcrumb -->

<div class="graphs">

<div class="xs">

<h4>&nbsp</h4>

<div class="tab-content">

<div class="tab-pane active" id="horizontal-form">

<form class="form-horizontal">

<div class="control-group info">

<label class="control-label" for="inputInfo">设备名称：</label>

<div class="controls">

<input type="text" id="name" maxlength="30">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo">经度：</label>

<div class="controls">

<input type="text" id="lon" onchange="isnumberfloat(this);" maxlength="16">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo">纬度：</label>

<div class="controls">

<input type="text" id="lat" onchange="isnumberfloat(this);" maxlength="16">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo"></label>

<div class="controls">

<button type="button" class="btn
btn-primary pull-middle" onclick="add()">保存</button>

&nbsp

<button type="button" class="btn
btn-blue" onclick="closeReflush()">返回</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<input type="hidden" name="key1" value=<%=key1%> id="key1"/>

</body>

<script type="text/javascript" src="<%=path%>/js/jquery-1.7.2.min.js"></script>

</html>

3、更新界面（xxxupdate.jsp)

主要是编辑输入界面，加载时首先会调用xxxview.do,加载当前记录并显示，更新功能是调用xxxupdate.do 进行保存更新记录；并键字为key2为数据表中的唯一id;编辑的代码界面和添加差不多，具体代码如下：

//xxxupdate.jsp

<!DOCTYPE html>

<%@ page contentType="text/html; charset=UTF-8" language="java" import="java.util.List" errorPage="" %>

<%@ taglib prefix="s" uri="/struts-tags" %>

<%

String path = request.getContextPath();

String key2=request.getParameter("key2");

String caption =new String(request.getParameter("caption").getBytes("iso-8859-1"),"utf-8");

%>

<html>

<head>

<title></title>

<meta charset="utf-8" />

</head>

<script type="text/javascript">

//初始化，加载完成后执行

window.onload=function()

{

view();

};

//显示

function view()

{

var id = document.getElementById("key2").value ;

$.ajax({

type: "POST",

async: false,

url: "xxxview.do",

data:{"key2":id

},

dataType:"json",

error: function(){alert('数据获取错误');},

success: function (data)

{

var pageEntity=data;

var status = pageEntity["status"];

var message = pageEntity["message"];

if(status=="0")

{

var obj = pageEntity["jsonstr"];

if(obj.length>0)

{

document.getElementById("name").value = obj[0].name;

document.getElementById("lon").value = obj[0].lon;

document.getElementById("lat").value = obj[0].lat;

}

}

}

});

}

function update()

{

var id = document.getElementById("key2").value ;

var name = document.getElementById("name").value ;

var lon = document.getElementById("lon").value ;

var lat = document.getElementById("lat").value ;

var jsonstr="";

jsonstr="{\"jsonstr\":[{\"name\":\""+name+"\",";

jsonstr+="\"lon\":\""+lon+"\",";

jsonstr+="\"lat\":\""+lat+"\"}]}";

$.ajax({

type: "POST",

async: false,

url: "xxxupdate.do",

data:{"key2":id,

"jsonStr":jsonstr

},

dataType:"json",

error: function(){alert('数据获取错误');},

success: function (data)

{

var pageEntity=data;

var status = pageEntity["status"];

var message = pageEntity["message"];

if (message != "")

{

if(status=="0")

{

window.opener.location.reload();

self.close();//关闭子页面

}

else

{

alert(message);

}

}

}

});

}

function closeReflush()

{

self.close();//关闭子页面

}

function isnumberfloat(obj){

var tmp = obj.value;

tmp = tmp.replace(/[^\d.]/g, "");

tmp = tmp=='' ? '' : tmp;

obj.value = tmp;

}

</script>

<body bgColor=#ffffff>

<div id="page-wrapper">

<!-- Page Breadcrumb -->

<div class="page-breadcrumbs">

<%=caption%> --> 修改

</div>

<!-- /Page Breadcrumb -->

<div class="graphs">

<div class="xs">

<h4>&nbsp</h4>

<div class="tab-content">

<div class="tab-pane active" id="horizontal-form">

<form class="form-horizontal">

<div class="control-group info">

<label class="control-label" for="inputInfo">设备名称：</label>

<div class="controls">

<input type="text" id="name" maxlength="30">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo">经度：</label>

<div class="controls">

<input type="text" id="lon" onchange="isnumberfloat(this);" maxlength="16">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo">纬度：</label>

<div class="controls">

<input type="text" id="lat" onchange="isnumberfloat(this);" maxlength="16">

</div>

</div>

<div class="control-group info">

<label class="control-label" for="inputInfo"></label>

<div class="controls">

<button type="button" class="btn
btn-primary pull-middle" onclick="update()">保存</button>

&nbsp

<button type="button" class="btn
btn-blue" onclick="closeReflush()">返回</button>

</div>

</div>

</form>

</div>

</div>

</div>

</div>

</div>

<input type="hidden" name="key2" value=<%=key2%> id="key2"/>

</body>

<script type="text/javascript" src="<%=path%>/js/jquery-1.7.2.min.js"></script>

</html>

四、Struts.xml参考配置

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE struts PUBLIC

"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"

"http://struts.apache.org/dtds/struts-2.0.dtd">

<struts>

<constant name="struts.i18n.encoding" value="UTF-8"/>

<constant name="struts.action.extension" value="do" />

<package name="test" extends="json-default" namespace="">

<!-- xxx设备信息-->

<action name="xxxlist" class="com.xxx.action.xxxAction" method="list">

<result name="success1" type="json">

</result>

</action>

<action name="xxxaadd" class="com.xxx.action.xxxAction" method="add">

<result name="success1" type="json">

</result>

</action>

<action name="xxxupdate" class="com.xxx.action.xxxAction" method="update">

<result name="success1" type="json">

</result>

</action>

<action name="xxxview" class="com.xxx.action.xxxAction" method="view">

<result name="success1" type="json">

</result>

</action>

<action name="xxxdelete" class="com.xxx.action.xxxAction" method="delete">

<result name="success1" type="json">

</result>

</action>

</package>

</struts>

结尾

通过实践，本人觉得我的这个思路还是不错的；为此想把这种方法写下来，可以让更多人参考和借鉴；介绍过程中有不足之处请给予指示，或有更好的思路和想法也可以给我留言，这样大家都可以共同学习和进步。