SpringMVC知識點

  1. 盡量別把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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. Java基礎(chǔ)部分 基礎(chǔ)部分的順序:基本語法,類相關(guān)的語法,內(nèi)部類的語法,繼承相關(guān)的語法,異常的語法,線程的語...
    子非魚_t_閱讀 34,638評論 18 399
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,271評論 0 1
  • 1.JQuery 基礎(chǔ) 改變web開發(fā)人員創(chuàng)造搞交互性界面的方式。設(shè)計者無需花費時間糾纏JS復(fù)雜的高級特性。 1....
    LaBaby_閱讀 1,495評論 0 2
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,116評論 2 17
  • 先講一個故事,這個故事來源于《三體》,有一層令人不安的恐怖色彩,與火雞有關(guān)。一個農(nóng)場里有一一群火雞,農(nóng)場主 每天中...
    自控力君閱讀 1,471評論 2 3

友情鏈接更多精彩內(nèi)容