涉及接口 hotel.destination
demo语言: Java
开发环境：
前端 jQuery类库、layui、 bootstrap
后端 jdk1.7以上、 tomcat8以上、 springmvc + spring + mybatis
通过目的地接口可以直接输入目的地开头查找目的地列表
html城市输入
创建一个可以输入的'下拉列表'
<input type="text" id='selectCity' placeholder="请选择" value="北京市" class="layui-input" lay-value="0101" > <dl class="layui-anim layui-anim-upbit" id="cityList"> <dd lay-value="0101" class="layui-this">北京市</dd> </dl>
js请求对象
构造请求url及请求数据
var destinationUrl= "/api/hotel/getDestinations"; // controller方法路径
// 构造请求参数对象
var destinationReq = {
"queryText": $("#selectCity").val(),
"sugOrientation": 0
};js异步请求
js监听输入框输出的城市开头的字符，将该字符传入后端返回城市列表
// 绑定监听selectCity输入
$("#selectCity").off('input').on('input',function (e) {
var inputVal = e.delegateTarget.value;
destinationReq.queryText = inputVal;
jQuery.ajax({
url: destinationUrl,
dataType: 'json',
type: 'POST',
contentType:"application/json",
data: JSON.stringify(destinationReq),
success: function (data) { // 请求成功
if (data != null && data.code ==0) {
regionResult = data.result.regionResult;
$("#selectCity").html("")
var ddStr = ""
// 记录是否被选中
var isSelected = false;
for(var i in regionResult) {
if(regionResult[i].regionType == 0){
if($("#selectCity").attr("lay-value") == regionResult[i].regionId){
isSelected = true;
ddStr += "<dd lay-value='"+regionResult[i].regionId
+"' class='layui-this'> "+regionResult[i].regionNameCn+"</dd>"
} else {
ddStr += "<dd lay-value='"+regionResult[i].regionId+"'> "
+regionResult[i].regionNameCn+"</dd>"
}
}
}
// 将目的地列表插入dl列表
$("#cityList").html(ddStr)
if (!isSelected) {
$("#cityList").children().first().attr("class", "layui-this");
$("#selectCity").attr("lay-value", $("#cityList").children().first().attr("lay-value"))
}
}else{
console.log("destination.data:"+ data)
}
},
error: function () {
console.log("获取目的地失败")
}
});
});java后端调用
后端通过http协议调用艺龙的hotel.destination接口
public class HotelDestinationApi {
private static double version = 1.50;
private static EnumLocal locale = EnumLocal.zh_CN;
private static boolean isHttps = false;
...
...
/**
* 通过http工具类调用艺龙接口，将前端参数拼接为URL
*/
public BaseResponse<HotelDestinationSugResp> getHotelDestination(SearchSuggestRequest condition,
String userName, String appKey, String secretKey) {
BaseResponse<HotelDestinationSugResp> result = new BaseResponse<HotelDestinationSugResp>();
String url = "";
String responseData = "";
try{
BaseRequest<SearchSuggestRequest> req = new BaseRequest<SearchSuggestRequest>();
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.destination";
url += "&user="+ userName +"×tamp=";
url += epoch;
url += "&signature=";
url += sig;
url += "&data=" + Tool.encodeUri(str);
System.out.println(url);
//发送请求
responseData = HttpUtil.Send("GET", url, "", "application/json");
//返回值处理
result = JSON.parseObject(responseData,
new TypeReference<BaseResponse<HotelDestinationSugResp>>() {});
} catch (Exception e) {
log.info("[HotelDetailApi] 异常： " + e);
log.info("发送的url： " + url);
log.info("返回值： " + responseData);
}
return result;
}
...
...
}效果展示
