javaweb网站开发模板化设计
来源：互联网 发布：淘宝为什么得2张银行卡 编辑：程序博客网 时间：2024/05/19 02:00
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数据格式：
{“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信息 
<button type="button" onclick="addwin()" class="btn btn-info"><i class="icon-plus"></i>添加</button>
 
<button type="button" onclick="updatewin()" class="btn btn-info">编辑</button>
 
<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>
 
<a id="previousPage" href="#" onclick="previous()"> ←上一页</a>
 
<a id="nextPage" href="#" onclick="next()"> 下一页 → </a>
 
<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> </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>
 
<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> </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>
 
<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>
结尾
通过实践，本人觉得我的这个思路还是不错的；为此想把这种方法写下来，可以让更多人参考和借鉴；介绍过程中有不足之处请给予指示，或有更好的思路和想法也可以给我留言，这样大家都可以共同学习和进步。
- javaweb网站开发模板化设计
- Javaweb 网站开发 总结
- javaweb开发优秀资源网站
- 网站开发模板
- 网站设计| 网站设计模板素材
- 网站设计之模板管理
- 网站设计之codesmith模板
- javaWeb开发过程中常用网站收藏
- 基于javaweb开发的小区门户网站
- 网站开关设计及模板更换设计
- PHPCMS V9模板设计程序二级开发中常用的一些网站相关信息变量列表
- JavaWeb设计及开发（Demo）实践
- 如何设计通用的网站模板
- 20万种网站模板和设计模板下载
- 分享前端网站模板，HTML5的响应式设计模板
- 【JavaWeb开发】初步实现网站应用钉钉扫码登录
- 网站设计网站开发流程详细介绍
- 网站 设计 架构 开发 探讨
- sizeof的用法及与strlen的比较
- 日常小结-XmlDTD约束
- Spring中的线程池ThreadPoolTaskExecutor
- 音视频同步系列文章之------基于时间戳的同步点
- 003——filter粗粒度权限控制
- javaweb网站开发模板化设计
- Android 学习实例 Note
- Bugzilla使用手册
- 响应式三步曲
- 为什么要BI（商业智能）？
- Swift:optional 可选项的简易说明
- KeyValue 结构
- Ibatis中#和$的区别
- SQL 游标 一个简单的例子
