XingXingMVC Ajax與JSON

時間 2019-11-17

原文原文鏈接

週末好時光啊,啥時候咱有錢了,每天都週末.html

今天介紹如何在xingxingmvc中使用ajax和json.java

仍是使用FirstDemo工程,這個工程相對比較簡潔,除了XingXingMVC以外,沒有再引入其餘依賴包.web.xml文件仍是按照第一個例子的配置,沒有變化.做爲一個懶人做品,xingxingmvc固然但願配置越少越好.配置少,不表明硬編碼寫死,xingxingmvc也提供擴展的可能,只是若是開發人員不想變動,xingxingmvc將使用默認值和默認類來完成工做.xingxingmvc的擴展開發,後續將一一介紹.jquery

xingxingmvc沒有實現ajax所須要的javascript.這裏採用jquery來實現ajax.web

第一步,創建頁面,頁面名稱叫ajaxtest,完整路徑是:ajax/ajaxtest.jsp,代碼以下:ajax

<%@page contentType="text/html" pageEncoding="UTF-8"%>  
    <!DOCTYPE html>  
    <html>  
        <head>  
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
            <%@include file="../public/jquery.jspf" %>  
            <title>Ajax Test</title>  
            <script type="text/javascript">  
                $(document).ready(function(){  
                    $("button").click(function(){  
                       var indata ={txtName:$('#txtName').val(),txtMail:$('#txtMail').val()};  
                       $.get("<%=request.getRequestURL() %>?__METHOD=btnOK", //這裏的__METHOD是form類的方法名.  
                        indata,  
                        function(result){  
                            $("div").html(result);  
                        });  
                    });  
                });  
            </script>  
        </head>  
      
        <body>  
              
           <p><label>姓名</label><input type="text" name="txtName" id="txtName"/></p>  
            <p><label>郵箱</label><input type="text" name="txtMail" id="txtMail"/></p>  
      
            <button>改變內容</button>  
            <hr/>  
            <div id="txt"><h2>經過 AJAX 改變文本</h2></div>  
        </body>  
    </html>

jquery的ajax用法,我就不介紹了,各位看官可自行百度.須要指出的是,$.get()方法中的url:json

<%=request.getRequestURL() %>?__METHOD=btnOK  
//當心了,這裏__METHOD的__是兩個下劃線，且要在英文輸入狀態下輸入。

帶了一個參數__METHOD,且這個參數的值是btnOK.這個參數是MVC後臺處理時候所須要的.mvc能夠從頁面路經解析出頁面對應的form類, 但要執行form類的哪一個方法,則須要這個參數來代表.這裏,__METHOD的值是btnOK,說明要執行form類中的btnOK方法.好,這裏提一個問題,爲何前幾篇文章的例子中,不須要開發人員在頁面中寫這個__METHOD呢.前面的例子,都是傳統的submit提交方式,在這個方式下,mvc本身會祕密注入__METHOD參數,並把submit按鈕的id名稱做爲__METHOD的值,傳給後臺的mvc.這一切怎麼發生的?mvc 在輸出頁面時候,會在頁面的head插入本身的js腳本.請在瀏覽器中查看頁面源代碼,你就會發現,mvc輸出來的頁面源代碼跟頁面原始的源代碼相比,多了兩行:瀏覽器

<script type="text/javascript" src="/FirstDemo/$xx/mvc/resource/js/XXMVC.js?20081224-002"></script>  
    <script type="text/javascript" src="/FirstDemo/$xx/mvc/resource/js/validate.js?20090311-002"></script>

祕密就在這裏了.後續我會繼續解析其中的原因,如今,讓咱們回到今天的話題.服務器

頁面已經用ajax方式向服務器發出請求了,服務器上的mvc開始行動,調用對應的form類,而後返回json數據給頁面.對應的form類,根據xingxingmvc的行爲準則,這個form類名稱叫ajaxtest.完成路徑是:forms.ajax.ajaxtest.java.並且這個 form類有一個方法叫btnOK.這個方法將返回json數據.如何返回呢,請看代碼.mvc

package forms.ajax;  
      
    import forms.myBase.DemoBaseForm;  
    import java.util.Map;  
      
    /** 
     * 
     * @author hicen 
     */  
    public class ajaxtest extends DemoBaseForm  
    {  
        public String btnOK(Map mapRequest,Map mapSession)  
        {  
            String strName = this.gstr("txtName", mapRequest);  
            String strMail = gstr("txtMail", mapRequest);  
              
            String strJson = "{'姓名':'" + strName + "','郵箱':'"+ strMail +"'}";  
            return "json:" + strJson; //這個語句只是讓看官明白返回值的格式,實際應用中建議使用下一句的寫法.          
            //return this.returnJson(strJson); //推薦使用,這樣更簡潔,有助於代碼複用,減小錯誤,統一寫法.  
        }  
    }

好了,咱們能夠看到,btnOK方法的返回值是String.格式爲:json:+字符串(json格式),加入用戶輸入的txtName爲 hicen,txtMail爲hicenwang@hotmail.com,那麼本文例子實際返回就是:json:{'姓名':'hicen','郵箱 ':'hicenwang@hotmail.com'};

今天介紹大概如此.美中不足的是,開發人員在寫ajax提交的js腳本,須要在url中帶上__METHOD及其值.這個跟xingxingmvc 原則不太一致.xingxingmvc一貫都是作好事不留名，不但願代碼中存在xingxingmvc的痕跡。將來解決思路是，mvc提供一個ajax的寫法，例如：mvcform.ajax( sucessFuction, errorFuction);成功了就執行sucessFuction，失敗了就執行errorFuction，這兩個function由開發人員寫，mvc調用。這樣就屏蔽了__METHOD。但這樣也有一個問題，就是mvc包攬了ajax，那開發人員又沒選擇了，這樣會不會霸道了點呢？

相關標籤/搜索

servlet+jsp+ajax+json

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。