1. <tr id="722gv"></tr>

            實作Ajax

            2024-03-07 18:39 更新

            下面我們通過實做AJAX對Dorado中的AJAX操作做一定的了解。 頁面功能描述: 首先我們設計一個Spring的JavaBean:

            package com.bstek.dorado.sample.basic;
            
             
            import java.util.Properties;
            import org.springframework.stereotype.Component;
            import com.bstek.dorado.annotation.Expose;
            import com.bstek.dorado.core.DoradoAbout;
            
             
            @Component
            public class Ajax {
            
             
                @Expose
                public String toUpperCase(String str) {
                    return "input:\n" + str + "\n\n" + "output:\n"
                            + str.toUpperCase();
                }
            
             
                @Expose
                public int multiply(int num1, int num2) {
                    return num1 * num2;
                }
            
             
                @Expose
                public Properties getSystemInfo() {
                    Properties info = new Properties();
                    info.setProperty("product", DoradoAbout.getProductTitle());
                    info.setProperty("vendor", DoradoAbout.getVendor());
                    info.setProperty("version", DoradoAbout.getVersion());
                    return info;
                }
            }

            頁面上放置三個按鈕:button1, button2, button3

            • 單擊button1的時候,調用spring中的一個bean的方法toUpperCase,并將我們傳入的字符串轉換為大寫,并返回到前臺瀏覽器中;

            • 單擊button2的時候,調用spring中的一個bean的方法multiply,并將我們傳入Map對象(含多個key)中的兩個數字相乘,并將計算結果返回到前臺瀏覽器中;

            • 單擊button1的時候,調用spring中的一個bean的方法getSystemInfo,并將Java中的一個Map對象返回到前臺瀏覽器中;

            如果完成了以上的三個功能,我們就很容易解決這些AJAX技術問題:

            • 如何調用Spring中bean中指定的業務方法;
            • 如何傳入一個單值給后臺,并將調用結果為單值的值如何返回到前臺;
            • 如何傳入一個map到后臺,并將運算結果返回到前臺;
            • 如何調用后臺的業務方法,并將計算結果為map的值返回到前臺;

            掌握了以上基本技術之后,再將它們綜合應用一下,如JS中指定map參數,ajax調用結束之后返回map對象,并在前端使用。這樣我們就可以解決大部分的ajax調用問題了。

            toUpperCase

            下面我們還是在HelloWorld中實做這個范例,由于HelloWorld中已經定義過Ajax這個Bean了,我們不再重復定義,我們在com.bstek.dorado.sample.training目錄中新建一個名稱為Ajax的View,并在其中添加一個AjaxAction控件和Button控件,其中AjaxAction是Action的一種,我們在控件的基礎知識中簡單介紹過它代表了頁面上的一種動作,是不可見的對象。但是它可以被其他可見控件使用,例如單擊按鈕時觸發Action。 我們設置AjaxAction控件的相關屬性:

            其中我們特別關注其service屬性,"ajax#toUpperCase"是一個服務名稱,根據Dorado中的服務定位表達式,它最終代表的含義是調用Ajax這個類的toUpperCase方法,至于服務表達式的概念我們后面再講,這兒我們只要記住這個字符串最終會調用到Ajax這個類的toUpperCase方法就可以。而parameter的值就代表了調用toUpperCase方法傳入的參數值。 再設置Button控件的相關屬性: 屬性 值 action toUpperCaseAction 定義action屬性的效果是,單擊按鈕的時候自動觸發toUpperCaseAction。我們可以注意到Button上的顯示內容我們都沒有定義,該處根據Action的綁定規則它會自動顯示action對應的caption,而toUpperCaseAction中我們已經定義了caption了。 另外,當Ajax這個類的toUpperCase方法執行結束之后,我們希望在瀏覽器中看到最終的返回值,那么我們定義toUpperCaseAction的onSuccess事件: 輸入如下代碼:

            dorado.MessageBox.alert(self.get("returnValue"));

            在action的onSuccess事件中,self代表了action本身,returnValue表示Ajax調用結束后Java層返回的結果。該處關于JS代碼的寫法后面我們會有專門的章節進行說明,此處我們記住self.get("returnValue")的含義就是獲得ajax調用返回的結果就可以。 這樣我們就完成了第一個按鈕的開發,在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果

            multiply

            下面我們接著做multiply的ajax調用,同樣我們再添加一個AjaxAction和一個Button。 我們設置AjaxAction控件的相關屬性: 通過toUpperCase實例的制作,我們知道了"ajax#multiply",它最終代表的含義是調用Ajax這個類的multiply方法。executingMessage是用于在Ajax調用時給客戶一個提示信息,在Ajax調用結束之后會自動消失,這樣對于某些耗時的ajax調用來說這種顯示效果更為人性化。 再設置Button控件的相關屬性: Ajax乘法 定義action屬性的效果是,單擊按鈕的時候自動觸發toUpperCaseAction。另外與toUpperCase范例不同,這次我們直接在Button上定義caption,其實這幾種定義caption的方式都可行,根據實際場景靈活運用就是了。例如我們希望動態改變按鈕綁定的action時,我們就可以考慮將caption定義在action中。 另外,當Ajax這個類的multiply方法被調用時需要兩個參數,我們希望給用戶一個自定義輸入參數的機會,而不是toUpperCase用例中直接定義在parameter屬性中,如下圖: 則我們給button1的onClick代碼中添加如下的JS:

                  var action = view.get("#action1");
                dorado.MessageBox.prompt("Please input two numbers here",{
                    defaultText: "3,5",
                    callback: function(text){
                        var nums = text.split(",");
                        var parameter = {
                            num1: nums[0],
                            num2: nums[1]
                        };
                        action.set("parameter", parameter).execute(function(result){
                            dorado.MessageBox.alert(nums[0] + " * "+ nums[1] + " = " + result);
                        });
                    }
                });

            其中我們通過Dorado提供的MessageBox做用戶輸入界面,MessageBox的具體用法參考:http://dorado.bstek.com/jsdoc/class.html?symbol=dorado.MessageBox. 我們將用戶輸入的值利用js的split拆分為兩個數字,num1和num2封裝到parameter中(可以想象成一個Map),并將這個parameter設置給action去調用服務器端的multiply方法。 我們回過頭在看看multiply方法:

            @Expose
            public int multiply(int num1, int num2) {
                return num1 * num2;
            }

            當map對象傳到Ajax類的時候,發現沒有匹配的方法,這個時候Dorado的自動方法適配機制會自動的將map拆為num1和num2,從而調用到multiply方法。有關自動方法適配我們后面還會再講。multiply做的工作就是將num1和num2相乘,并將結果返回。我們在Button的onClick代碼中利用了一個回調函數將計算結果顯示出來(回調函數用法會在后面的JavaScript基礎中進一步說明)。 這樣我們就完成了第二個按鈕的開發,在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果

            getSystemInfo

            下面我們做getSystemInfo的ajax調用,同樣我們再添加一個AjaxAction和一個Button。 我們設置AjaxAction控件的相關屬性: ajax#getSystemInfo 通過toUpperCase實例的制作,我們知道了"ajax#getSystemInfo",它最終代表的含義是調用Ajax這個類的getSystemInfo方法。 再設置Button控件的相關屬性: 定義action屬性的效果是,單擊按鈕的時候自動觸發getSystemInfo。 另外,當Ajax這個類的getSystemInfo方法調用成功后返回的是一個Properties對象,這也是一個Map對象,我們希望在瀏覽器中看到最終的返回值,那么我們在Ajax.js中定義getSystemInfoAction的onSuccess事件:

                var info = self.get("returnValue");
                dorado.MessageBox.alert("product : " + info.product + "\n" +
                    "vendor : " + info.vendor + "\n" +
                    "version : " + info.version);

            在action的onSuccess事件中,self代表了action本身,returnValue表示Ajax調用結束后Java層返回的結果。由于返回的是一個Map對象,在瀏覽器中接受的時候會自動轉為JSON對象,這樣我們就可以直接通過info.product,info.veneor,info.version范圍map中的內容。 這樣我們就完成了第三個按鈕的開發,在瀏覽器中打開這個頁面(http://localhost:8080/sample-center/com.bstek.dorado.sample.training.Ajax.d)查看效果

            以上內容是否對您有幫助:
            在線筆記
            App下載
            App下載

            掃描二維碼

            下載編程獅App

            公眾號
            微信公眾號

            編程獅公眾號

            中文字幕人成乱码熟女|强行入侵女人a片|亚洲日本成本人观看|天天操天天操