Spring MVC和Twitter Bootstrap
整体的数据流如下图所示。
使用Spring MVC和Twitter Bootstrap进行响应式Web设计
在这个例子中，我们采用
Twitter Bootstrap
和
JQuery-tmpl
创建了一个
单页Web站点
。在前端，数据是用以下的方式提交的：
01
|
$(
'#searchResults'
).click(
function
(){
|
02
|
var
origin = $(
"#origin option:selected"
).val();
|
03
|
var
destination = $(
"#destination option:selected"
).val();
|
04
|
var
startDate= $(
"#startDate"
).val();
|
05
|
var
endDate = $(
"#endDate"
).val();
|
07
|
$.get(
"resources/datatemplates/flightList.html"
,
function
(template){
|
08
|
$.get(
"/air/searchResultsJson?leavingFrom="
+ origin +
"&goingTo="
+ destination +
"&startDate="
+ startDate +
"&endDate="
+ endDate,
function
(data){
|
09
|
$(
"#dataRegion"
).html(
""
);
|
10
|
$.tmpl(template, data).appendTo(
"#dataRegion"
);
|
这里执行了JQuery，获得了以JSon对象形式存储的航班列表。
JQuery-tmpl
插件用来绑定flightList.html，从而实现
单页面Web站点
设计。flightList.html文件内容如下所示：
2
|
<
td
>${startTime}</
td
>
|
3
|
<
td
>${startAirport}</
td
>
|
4
|
<
td
>${endTime}</
td
>
|
5
|
<
td
><
a
href
=
"#"
onclick
=
"return getDetails('${endAirport}')"
>${endAirport}</
a
></
td
>
|
在
Spring MVC
侧，需要添加Maven依赖并调用相关方法，可从该
链接
获得更详细的讲解。
控制器（controller）的代码如下所示：
01
|
@RequestMapping
(value =
"searchResultsJson"
, method = RequestMethod.GET)
|
03
|
List searchResultsJson(
@RequestParam
String leavingFrom,
|
04
|
@RequestParam
String goingTo,
@RequestParam
String startDate,
|
05
|
@RequestParam
String endDate) {
|
06
|
Form form =
new
Form();
|
08
|
form.setOrigin(leavingFrom);
|
09
|
form.setDestination(goingTo);
|
10
|
form.setStartDate(startDate);
|
11
|
form.setReturnDate(endDate);
|
13
|
return
locationService.selectFlights(form);
|
上面的例子中，
@ResponseBody
用于将JSon响应返回到客户端。
