DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> Ajax異步提交表單數據的說明及方法實例
Ajax異步提交表單數據的說明及方法實例
編輯:關於JavaScript     

場景描述:
對於一個登錄頁面中有一個登錄的表單,但是由於登錄驗證邏輯比較復雜,我們希望點擊登錄後不刷新當前頁面,給出登錄結果後再選擇是跳到新的頁面還是提示用戶名密碼錯誤。類似這樣的問題很多很多。異步獲取數據使用戶體驗大大增強。
背景知識:
Ajax指的是異步JavaScript及XML(Asynchronous JavaScript And XML)。
AJAX 不是一種新的編程語言,而是一種用於創建更好更快以及交互性更強的
 Web 應用程序的技術。通過AJAX,您的JavaScript 可使用JavaScript 的XMLHttpRequest 對象來直接與服務器進行通信。通過這個對象,您的JavaScript 可在不重載頁面的情況與Web 服務器交換數據。AJAX
 在浏覽器與Web 服務器之間使用異步數據傳輸(HTTP 請求),這樣就可使網頁從服務器請求少量的信息,而不是整個頁面。AJAX 可使因特網應用程序更小、更快,更友好。AJAX
 是一種獨立於Web 服務器軟件的浏覽器技術。 AJAX 基於下列Web 標准:JavaScript XML HTML CSS 在AJAX 中使用的Web 標准已被良好定義,並被所有的主流浏覽器支持。AJAX 應用程序獨立於浏覽器和平台。Web
 應用程序較桌面應用程序有諸多優勢;它們能夠涉及廣大的用戶,它們更易安裝及維護,也更易開發。 不過,因特網應用程序並不像傳統的桌面應用程序那樣完善且友好。
 通過AJAX,因特網應用程序可以變得更完善,更友好。
具體用法:
復制代碼 代碼如下:
<script type="text/javascript">
(function(){
    jQuery('#loginForm').click(
        function() {
            jQuery('#tips').html("正在登錄.....");
            jQuery.post(
                <span style="white-space:pre">      </span>'login.action',
                <span style="white-space:pre">      </span>{
                   <span style="white-space:pre">           </span>"username":jQuery('#username').val(),
                   <span style="white-space:pre">           </span>"password":jQuery('#password').val()
                <span style="white-space:pre">      </span>},
                <span style="white-space:pre">      </span>function(result) {
                    jQuery('#tips').html(result);
                <span style="white-space:pre">      </span>},
                <span style="white-space:pre">      </span>"json"
             <span style="white-space:pre">     </span>);
        }
    );
})();
</script>

post方法中有四個參數。
第一個是url地址,在struts2中,我們只需要提交給對應的action即可,或者指定方法。對於webx,我們需要這樣寫url地址login.htm?action=user_login&event_submit_do_user_login=any
第二個是參數列表,你要提交的數據,以鍵值對形式提交。
第三個參數是結果處理函數,那麼結果將從result中取出。
第四個參數是數據返回格式。
那麼action或者screen中需要做的處理是:
復制代碼 代碼如下:
HttpServletResponse response = rundata.getResponse();
response.setContentType("application/json");
PrintWriter out;
try {
    out = response.getWriter();
    String result = (String) context.get("result");
    JSONObject json = new JSONObject();
    json.put("result", result);
    out.print(json);
    out.flush();
} catch (IOException e) {
    e.printStackTrace();
}

輸入處理結果即可。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved