码一次前后台post请求交互，以及接口的使用，json数据格式的传递

近几天，公司疯狂加班，然后补做了很多功能，很多东西虽然是自己熟悉的，但是却不会上手，动手实践能力仍需加强，对此对一些代码记录，留待学习和总结。

• 简单描述功能
• 具体实现
  • 前台JSP、JS、后台action 源码
• 功能测试

简单描述功能

首先，根据城市下拉选择框选择城市，然后级联下拉线路，级联下拉城市所对应的所有线路。

前台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

至此，该部分所有功能均已实现。

要做一个爱学习，并勤于记录的程序员，有时候，发现很多东西，是没有接触过，所以不会，也有很多东西不会，是因为做的太少所以不会，所以，经常去浏览各大博客，亦或对已经写过的代码做一记录，慢慢会积累起来的。

不积跬步无以至千里，不积小流无以成江河！！！！！！！