- 盡量別把JSP文件暴露出來,或者讓前臺直接訪問JSP頁面。JSP一般放在 /WEB-INF/jsp/ 目錄下。Spring-mvc.xml配置如下:
<!-- 定義跳轉(zhuǎn)的文件的前后綴 ,視圖模式配置 -->
<bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
<property name="prefix" value="/WEB-INF/jsp/" />
<property name="suffix" value=".jsp"/>
</bean>
這樣,在Controller里面可以直接定義跳轉(zhuǎn)到的JSP頁面。一般情況下,在Web.xml配置:
<!-- spring mvc servlet-->
<servlet>
<servlet-name>SpringMVC</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:spring-mvc.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
<async-supported>true</async-supported>
</servlet>
<servlet-mapping>
<servlet-name>SpringMVC</servlet-name>
<!-- 此處也可以配置成 *.do 形式 -->
<url-pattern>/</url-pattern>
</servlet-mapping>
過濾交給DispatcherServlet處理,這里的配置會過濾所有匹配 “/”的URL,因此會把訪問靜態(tài)文件如:CSS 、JS、Image等URL交給DispatcherServlet處理,從而不能正常訪問靜態(tài)文件,因此在Spring-mvc.xml中需要加上如下配置:
<mvc:resources location="/js/" mapping="/js/**"/>
<mvc:resources location="/css/" mapping="/css/**"/>
<mvc:resources location="/img/" mapping="/img/**"/>
<mvc:resources location="/fonts/" mapping="/fonts/**"/>
另外,如果想配合使用REST,又不想創(chuàng)建專門的Controller來處理路由,可在Spring-mvc.xml中增加這樣的配置:
<!-- 配置直接轉(zhuǎn)發(fā)的頁面 -->
<!-- 可以直接相應(yīng)轉(zhuǎn)發(fā)的頁面, 而無需再經(jīng)過 Handler 的方法. -->
<mvc:view-controller path="success" view-name="success"/>
這樣匹配 ".../success"這樣的路由會跳轉(zhuǎn)到,/WEB-INF/jsp/ 目錄下的"success.jsp"。
2.Form表單提交
??Form表單的實現(xiàn)有很多種方法,這里介紹一下Ajax+SpringMVC接收Ajax請求的方式。介紹一個jQuery的Form插件:jquery.form.min.js,Github地址。
jQuery Form插件是一個優(yōu)秀的Ajax表單插件,可以非常容易地、無侵入地升級HTML表單以支持Ajax。jQuery Form有兩個核心方法 -- ajaxForm() 和 ajaxSubmit(), 它們集合了從控制表單元素到?jīng)Q定如何管理提交進(jìn)程的功能。另外,插件還包括其他的一些方法: formToArray()、formSerialize()、fieldSerialize()、fieldValue()、clearForm()、clearFields() 和 resetForm()等。
- HTML代碼:
<form id="form1" method="post">
<table border="1">
<tr>
<td>用戶名:</td>
<td>
<input type="text" name="loginName" /></td>
</tr>
<tr>
<td>愛 好:</td>
<td>
<input type="checkbox" name="cbLoveYy" value="1" />游泳
<input type="checkbox" name="cbLoveYx" value="1" />游戲
<input type="checkbox" name="cbLovePs" value="1" />爬山
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center">
<input id="btnAjaxSubmit" type="submit" value="jQuery.ajax提交" />
</td>
</tr>
</table>
</form>
特別注意:Form中的所有表單元素必須有“name”屬性。否則沒法讀取表單數(shù)據(jù),從而服務(wù)器不能正常接收表單提交的數(shù)據(jù)。
- JS代碼:
<script type="text/javascript">
$(document).ready(function () {
//將Form表單元素轉(zhuǎn)成Object
$.fn.serializeObject = function()
{
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if(o[this.name]){
if(!o[this.name].push){
o[this.name]=[o[this.name]];
}
o[this.name].push(this.value||'');
}else{
o[this.name] = this.value || '';
}
});
return o;
};
var options = {
url: 'items/', //SpringMVC action url
type: 'post',
beforeSubmit: showRequest, //提交前的回調(diào)函數(shù)
success: showResponse, //提交后的回調(diào)函數(shù)
dataType: 'text',
contentType:"application/json",
data: $("#form1").serializeObject() //轉(zhuǎn)為對象,這樣服務(wù)器接收J(rèn)SON格式的數(shù)據(jù),而不是urlencoded格式
};
function showRequest(formData, jqForm, options){
//formData: 數(shù)組對象,提交表單時,F(xiàn)orm插件會以Ajax方式自動提交這些數(shù)據(jù),格式如:[{name:user,value:val },{name:pwd,value:pwd}]
//jqForm: jQuery對象,封裝了表單的元素
//options: options對象
var queryString = $.param(formData);
var formElement = jqForm[0]; //將jqForm轉(zhuǎn)換為DOM對象
var address = formElement.cbLoveYy.value; //訪問jqForm的DOM元素
return true; //只要不返回false,表單都會提交,在這里可以對表單元素進(jìn)行驗證
};
function showResponse(responseText, statusText){
//在output1 div中顯示服務(wù)器返回的結(jié)果
if (responseText.length > 0)
$("#output1").text(responseText);
};
$("#form1").ajaxForm(options);
});
</script>
- SpringMVC Controller:
@RequestMapping(value ="/",method = RequestMethod.POST)
@ResponseBody
public String newItem(HttpServletRequest request,@RequestBody String item)
{
JSONObject itemJSON = new JSONObject();
itemJSON.put("code",200);
itemJSON.put("message","ok");
return itemJSON.toString();
}
另這篇文章也可參考[jQuery實現(xiàn)ajax提交form表單(可以是提交json),用springmvc接收。圖文詳解]
(http://www.cnblogs.com/klwyrn/p/5955152.html)。
3.對話框
一般點擊刪除,提交等按鈕都需要彈出對話框,確認(rèn)是否執(zhí)行此操作。Bootstrap 的Modal可以實現(xiàn)此功能,但是界面有點單一,下面介紹一個jQuery插件,漂亮美觀:sweetalert。