近几天，公司疯狂加班，然后补做了很多功能，很多东西虽然是自己熟悉的，但是却不会上手，动手实践能力仍需加强，对此对一些代码记录，留待学习和总结。
简单描述功能
首先，根据城市下拉选择框选择城市，然后级联下拉线路，级联下拉城市所对应的所有线路。
前台post请求后台，将前台下拉的城市和线路下拉值传递给后台，后台通过前天传的城市和下拉进行接口查询，通过接口的方式查到所需的值。
具体实现
前台JSP、JS、后台action 源码
设置下拉select的id值，设置其id=city，name=’city’,因为要根据城市的下拉去做线路下拉的级联下拉，所以当城市改变的时候，线路也要随之更改为该城市所对应的线路，给select添加refreshLine()事件来触发。
<div class="count-hd">
<label>城市</label>
<select id="city" name="city" onchange="refreshLine()">
<option value="1">北京市</option>
<option value="2">天津市</option>
<option value="3">上海市</option>
<option value="4">澳大利亚市</option>
<option value="5">北欧市</option>
</select>
<button class="btn btn-info" onclick="retrieve()">查询</button>
</div>refreshLine()事件JS源码：
function refreshLine() {
//根据城市的id值，获取其下拉的值，定义一个code来传值
//根据id，取得页面的值，需要在其id前加#
var code = $('#city option:selected').val();//Jquery获取选中的值
var lineDrop = $('#lineDrop');
var lineDrop1 = $('#lineDrop1');
var temp_html;
//post请求数据，$.post('url',{'参数1':XXX,'参数2':XXX},'成功加载后执行函数：function(result)')
$.post('/gj/gj/application/gjOnlineApplication.do?action=getLineListByCode',{'code':code},function(result){
//遍历获取到数据
var lineInfo = $.each(result.lineName,function(i, lineInfo){
temp_html+="<option value='"+lineInfo.uuid+"'>"+lineInfo.lineName+"</option>";
});
//将信息显示在页面之中
lineDrop.html(temp_html);
lineDrop1.html(temp_html)
})
}gjOnlineApplication后台中获取城市所对应的所有下拉信息；
首先需要将前天传来的值接收到，添加code对象，添加其set和get方法。
//前台传递过来的城市下拉值
private String code;
public String getCode() {
return code;
}
public void setCode(String code) {
this.code = code;
}然后在获取城市对应的所有线路信息。
public String getLineListByCode() {
QueryParamList params = new QueryParamList();
params.addParam("cityCode",code);
List<GjBusLine> lists = gjBusLineService.retrieve(params, null, null, null, null);
List<Map<String,Object>> lineList = new ArrayList<Map<String, Object>>();
for(int i=0;i<lists.size();i++){
//定义一个map类型数据，先将数据put进map之中，然后将线路信息添加至list之中；
Map<String,Object> map = new HashMap<String, Object>();
//将线路的主键给下拉的label
map.put("uuid",lists.get(i).getUuid() );
//将线路的名称给下拉的value
map.put("lineName", lists.get(i).getLineName());
//将该条线路信息添加至list之中
lineList.add(map);
}
//将lineName值取到，然后返回给前台
result.put("lineName",lineList);
//返回json形式的数据
return "resultData";
}该action类为数据接口，里面涉及到许多接口，其数据是以json形式返回，其形式：
@Namespace("/gj/application")
@ParentPackage("framework-default")
@Action(value = "/gjOnlineApplication", results = {@Result(name="input",location="gjonlineapplication.jsp"),
@Result(name="resultData",type = "json", params = {"root", "result" })})
//上面action当中，定义了后台的地址以及返回的结果。
public class GjOnlineApplicationAction extends GjCommonAction {
//根据前台的action地址进入action
@Override
public String execute() throws Exception {
if("getLineListByCode".equals(action)){
return this.getLineListByCode();
}
return super.execute();
}
}线路名称的select添加id，因为要获取到下拉的值，通过id来获取其值。这里还有一个onchange()事件，是当选择下拉以后，调用后台接口，返回一个该线路的信息，比如该线路的长度等。
<div class="tab-pane item-list">
<div class="item-list-title">
<span class="tit"><i class="decorate"></i>公共汽电车运营线路长度</span>
<span class="line"></span>
</div>
<div class="item-list-body">
<div class="input-group">
<label>线路名称：</label>
<select id="lineDrop1" onchange="lineDrop1()">
</select>
</div>
<div class="input-group">
<label>线路长度（km）：</label>
<input name="upMiler" onchange="yyxlcd()" type="text">
</div>
<div class="input-group">
<label>线路宽度（km）：</label>
<input name="downMiler" onchange="yyxlcd()" type="text">
</div>
<div class="input-group">
<label>计算结果（长宽比例）：</label>
<input name="yyxlcd" type="text" disabled>
</div>
</div>
<div class="item-list-bottom">
<p>这里是相关计算说明。</p>
</div>
</div>根据线路名称，获取线路的信息，通过线路下拉的onchange()事件来触发：
function lineDrop1(){
//通过id获取线路下拉的值
var lineDrop1 = $('#lineDrop1 option:selected').val();
//通过name值来获取线路长度信息
//后面还可拼接，类似and方式，eg:$('input[name='xxx'][type=text][type=checkbox]'),无需加#
var upMiler1 = $('input[name=upMiler][type=text]');
//通过name值获取线路宽度信息
var downMiler1 = $('input[name=downMiler][type=text]');
//定义计算结果的text，计算比例
var upDownMiler1 = $('input[name=upDownMiler][type=text]');
$.post('/gj/gj/application/gjOnlineApplication.do?action=getBusLineUp',{'lineDrop1':lineDrop1},function(result){
//获取后台的值.val(result.BusLineUp)
upMiler1.val(result.BusLineUp);
downMiler1.val(result.BusLineDown);
upDownMiler1.val(Number(upMiler1.val())+Number(downMiler1.val()));
$('input[name=yyxlcd][type=text]').val((Number(upMiler1.val())+Number(downMiler1.val())+Number(upDownMiler1.val()))/2);
})
}后台action，首先需要定义lineDrop1来接收线路下拉传递的值。
//线路下拉传递的值
private String lineDrop1;
public String getLineDrop1() {
return lineDrop1;
}
public void setLineDrop1(String lineDrop1) {
this.lineDrop1 = lineDrop1;
}然后根据前台post请求的action方法，通过接口获取值。
//线路信息
public String getBusLineUp(){
GjBusLine gjBusLine = gjBusLineService.retrieve(lineDrop1);
BigDecimal a=GisCaclUtil.getBusLineUp(gjBusLine.getLineCode());
BigDecimal b=GisCaclUtil.getBusLineDown(gjBusLine.getLineCode());
//将线路长度添加至json格式的数据中
result.put("BusLineUp", a);
//将线路宽度添加至json格式的数据中
result.put("BusLineDown", b);
//返回json格式的数据
return "resultData";
}这时候，通过前天的方法即可获取到值：
$.post('/gj/gj/application/gjOnlineApplication.do?action=getBusLineUp',{'lineDrop1':lineDrop1},function(result){
//获取线路长度的值
upMiler1.val(result.BusLineUp);
//获取线路宽度的值
downMiler1.val(result.BusLineDown);
//计算结果
$('input[name=yyxlcd][type=text]').val((Number(upMiler1.val())+Number(downMiler1.val())+Number(upDownMiler1.val()))/2);
})
//这里之前遇到一个问题，后台接口传值可能速度很慢，然后前台直接就会执行计算结果那个函数，这时候因为没有线路的长度和宽度，所以无法计算结果，会显示NaN;添加一个定时器即可解决问题。
window.setTimeout("xlwmd()",1000);
function yyxlcd (){
upMiler = upMilerDom.val();
downMiler = downMilerDom.val();
$('input[name=yyxlcd][type=text]').val((Number(upMiler)+Number(downMiler)+Number(upDownMiler))/2);
}功能测试
想要查看action执行的结果，如何操作呢？
首先登录该程序或项目，然后在浏览器地址栏输入该action地址：
//无传递参数
http://localhost:8080/gj/gj/simulation/gjOnlineApplication.do?action=getLineListByCode
//传递参数
http://localhost:8080/gj/gj/simulation/gjOnlineApplication.do?action=getLineListByCode&code=2&linecode=1至此，该部分所有功能均已实现。
要做一个爱学习，并勤于记录的程序员，有时候，发现很多东西，是没有接触过，所以不会，也有很多东西不会，是因为做的太少所以不会，所以，经常去浏览各大博客，亦或对已经写过的代码做一记录，慢慢会积累起来的。
不积跬步无以至千里，不积小流无以成江河！！！！！！！