Spring MVC和Twitter Bootstrap
整體的數(shù)據(jù)流如下圖所示。
使用Spring MVC和Twitter Bootstrap進行響應(yīng)式Web設(shè)計
在這個例子中，我們采用
Twitter Bootstrap
和
JQuery-tmpl
創(chuàng)建了一個
單頁Web站點
。在前端，數(shù)據(jù)是用以下的方式提交的：
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"
);
|
這里執(zhí)行了JQuery，獲得了以JSon對象形式存儲的航班列表。
JQuery-tmpl
插件用來綁定flightList.html，從而實現(xiàn)
單頁面Web站點
設(shè)計。flightList.html文件內(nèi)容如下所示：
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
側(cè)，需要添加Maven依賴并調(diào)用相關(guān)方法，可從該?
鏈接
獲得更詳細的講解。
控制器（controller）的代碼如下所示：
01
|
@RequestMapping
(value =?
"searchResultsJson"
, method = RequestMethod.GET)
|
02
|
public
?
@ResponseBody
|
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響應(yīng)返回到客戶端。
