快捷導(dǎo)航

Ajax異步提交表單數(shù)據(jù)的說(shuō)明及方法實(shí)例

更新時(shí)間：2013年06月22日 11:27:39 作者：

Ajax異步提交表單數(shù)據(jù)的說(shuō)明及方法實(shí)例，需要的朋友可以參考一下

場(chǎng)景描述：
對(duì)于一個(gè)登錄頁(yè)面中有一個(gè)登錄的表單，但是由于登錄驗(yàn)證邏輯比較復(fù)雜，我們希望點(diǎn)擊登錄后不刷新當(dāng)前頁(yè)面，給出登錄結(jié)果后再選擇是跳到新的頁(yè)面還是提示用戶(hù)名密碼錯(cuò)誤。類(lèi)似這樣的問(wèn)題很多很多。異步獲取數(shù)據(jù)使用戶(hù)體驗(yàn)大大增強(qiáng)。
背景知識(shí)：
Ajax指的是異步JavaScript及XML（Asynchronous JavaScript And XML）。
AJAX 不是一種新的編程語(yǔ)言，而是一種用于創(chuàng)建更好更快以及交互性更強(qiáng)的
Web 應(yīng)用程序的技術(shù)。通過(guò)AJAX，您的JavaScript 可使用JavaScript 的XMLHttpRequest 對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。通過(guò)這個(gè)對(duì)象，您的JavaScript 可在不重載頁(yè)面的情況與Web 服務(wù)器交換數(shù)據(jù)。AJAX
在瀏覽器與Web 服務(wù)器之間使用異步數(shù)據(jù)傳輸（HTTP 請(qǐng)求），這樣就可使網(wǎng)頁(yè)從服務(wù)器請(qǐng)求少量的信息，而不是整個(gè)頁(yè)面。AJAX 可使因特網(wǎng)應(yīng)用程序更小、更快，更友好。AJAX
是一種獨(dú)立于Web 服務(wù)器軟件的瀏覽器技術(shù)?！JAX 基于下列Web 標(biāo)準(zhǔn)：JavaScript XML HTML CSS 在AJAX 中使用的Web 標(biāo)準(zhǔn)已被良好定義，并被所有的主流瀏覽器支持。AJAX 應(yīng)用程序獨(dú)立于瀏覽器和平臺(tái)。Web
應(yīng)用程序較桌面應(yīng)用程序有諸多優(yōu)勢(shì)；它們能夠涉及廣大的用戶(hù)，它們更易安裝及維護(hù)，也更易開(kāi)發(fā)。不過(guò)，因特網(wǎng)應(yīng)用程序并不像傳統(tǒng)的桌面應(yīng)用程序那樣完善且友好。
通過(guò)AJAX，因特網(wǎng)應(yīng)用程序可以變得更完善，更友好。
具體用法：

復(fù)制代碼代碼如下:

<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方法中有四個(gè)參數(shù)。
第一個(gè)是url地址，在struts2中，我們只需要提交給對(duì)應(yīng)的action即可，或者指定方法。對(duì)于webx，我們需要這樣寫(xiě)url地址login.htm?action=user_login&event_submit_do_user_login=any
第二個(gè)是參數(shù)列表，你要提交的數(shù)據(jù)，以鍵值對(duì)形式提交。
第三個(gè)參數(shù)是結(jié)果處理函數(shù)，那么結(jié)果將從result中取出。
第四個(gè)參數(shù)是數(shù)據(jù)返回格式。
那么action或者screen中需要做的處理是：

復(fù)制代碼代碼如下:

 
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(); 
} 

輸入處理結(jié)果即可。

您可能感興趣的文章: