Ajax非同步提交表單資料簡單方法

情境描述：

對於一個登入頁面中有一個登入的表單，但是由於登入驗證邏輯比較複雜，我們希望點擊登入後不重新整理當前頁面，給出登入結果後再選擇是跳到新的頁面還是提示使用者名稱密碼錯誤。類似這樣的問題很多很多。非同步擷取資料使使用者體驗大大增強。

背景知識：

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(                'login.action',                {                   "username":jQuery('#username').val(),                   "password":jQuery('#password').val()                },                function(result) {jQuery('#tips').html(result);                },                "json"             );});})();</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();}

輸入處理結果即可。

contentType有很多種格式，可以參考http://sin90lzc.iteye.com/blog/892162