html输入项

<!-- 城市选择 -->
<input type="text" id='selectCity' placeholder="请选择" value="北京市" class="layui-input" lay-value="0101" >
<!-- 入离日期选择 -->
<input id="dateSelect" readonly="readonly" class="form-control" value="2019-10-15 到 2019-10-16">
<!-- 酒店名称、位置输入 -->
<input id="inputHotelOrLocation" type="text" class="form-control" placeholder="酒店名称/位置 不限">
<!-- 星级筛选 -->
<div class="row search-item">
    <div class="tit">星级（可多选）</div>
    <div class="btn-group" data-toggle="buttons" style="width: 100%">
        <button id="btnStarRateDefault" name="btnStarRate" value="-1" >不限</button>
        <button id="btnStarRate012" name="btnStarRate" value="0,1,2" >经济/客栈</button>
        <button id="btnStarRate3" name="btnStarRate" value="3" >三星/舒适</button>
        <button id="btnStarRate4" name="btnStarRate" value="4" >四星/高档</button>
        <button id="btnStarRate5" name="btnStarRate" value="5" >五星/豪华</button>
    </div>
</div>

js请求对象

var url = "/api/hotel/getHotelList";  // controller路径
// 构造请求参数对象
var req = {
    "cityId": city,
    "arrivalDate": arrivalDate,
    "departureDate" : departureDate,
    "queryText": queryText,
    "highRate": highRate,
    "lowRate": lowRate,
    "sortType": sort,
    "starRate": starRate,
    "pageIndex" : pageIndex
};

js请求后端

// 请求酒店列表
var result = ajaxCommonForJson(url, "POST", req);
// 对返回结果进行展示
if (result != null && result.list != null && result.list.length > 0) {
    var hotelList = "";
    $.each(result.list, function (i, info) {
        var currency = "￥ ";
        if (info.currencyCode == "RMB") {
            currency = "￥ ";
        } else if (info.currencyCode == "HKD") {
            currency = "＄ ";
        } else if (info.currencyCode == "MOP") {
            currency = "＄ ";
        } else if (info.currencyCode == "JPY") {
            currency = "￥";
        } else if (info.currencyCode == "TWD") {
            currency = "＄ ";
        }
        hotelList += '<div name="divHotelCard" class="list-group-item">'
            + '<div class="container my-hotellist">';
            + '<img src="' + info.thumbnailUrl + '" />';
            + '<span>' + info.hotelName + '</span><span>' + info.score +'分 <span>'
            + info.reviewCount + '条点评</span></span><span>' + info.starRate + '</span>';
            + '<span>' + info.districtName + '/' + info.businessZoneName 
            + '</span><span>' + currency + info.lowRate + '</span>';
            + '<input style="display: none" value="'
            + info.hotelId +'" /></div></div>';
    });
        
    $('#divHotelList').append(hotelList);
    // 对每个酒店项添加点击事件
    $('div[name="divHotelCard"]').click(function () {
        var detailUrl = '/view/hotel/detail?hotelId=' 
         + $(this).find('div').find('input').val()
         + '&arrivalDate=' + $("[name='daterangepicker_start']").val()
         + '&departureDate=' +$("[name='daterangepicker_end']").val();
        if ($('#inputUser').val() != null && $('#inputUser').val() != "" 
            && $('#inputUser').val() != "null") {
            detailUrl += "&user=" + $('#inputUser').val();
        }
        window.location.href= detailUrl;
    });
}

后端调用

public class HotelListApi {
    private static double version = 1.50;
    private static EnumLocal locale = EnumLocal.zh_CN;
    private static boolean isHttps = false;
    ...
    ...
    
    /**
     * 通过http工具类调用艺龙接口，将前端参数拼接为URL
     */
    public HotelListResult getHotelList(HotelListCondition condition, String userName, 
        String appKey, String secretKey) {
        HotelListResult result = new HotelListResult();
        String url = "";
        String responseData = "";
        try{
            BaseRequest<HotelListCondition> req = new BaseRequest<HotelListCondition>();
            req.Version = version;
            req.Local = locale;
            req.Request = condition;
            //请求参数转换为Json字符串
            String str = JsonUtil.entity2Json(req);
            //产生签名
            long epoch = System.currentTimeMillis()/1000;
            String sig = Tool.md5(epoch + Tool.md5(str + appKey) + secretKey);
            
            //产生请求链接
            url = "http://" + serverHost + "/rest?format=json&method=hotel.list";
            url += "&user="+ userName +"&timestamp=";
            url += epoch;
            url += "&signature=";
            url += sig;
            url += "&data=" + Tool.encodeUri(str);
            
            //发送请求
            responseData = HttpUtil.Send("GET", url, "", "application/json");
            //返回值处理
            result = JsonUtil.jsonToObject(responseData, HotelListResult.class);
        } catch (Exception e) {
            log.info("[HotelListApi] 异常： " + e);
            log.info("发送的url： " + url);
            log.info("返回值： " + responseData);
        }
        return result;
    }
    ...
    ...
}

效果展示