JQuery、JSON、Ajax在與ervlet結合的工資計算模塊

        最近在作一我的力資源管理的項目，因爲前期與師兄溝通不順暢，致使瞭如今這個小模塊的產生。這個小模塊主要是作我的工資計算用的；分爲三個部分：
        1）基本工資部分
        2）我的保險部分
        3）我的所得稅部分
        除了第三部分以外，其餘兩部分均可以依據用戶需求手動添加基本工資項和我的保險項，考慮到用戶在進行工資計算的時候勢必要對照本身所填信息，因而採用ajax技術與後臺進行交互，可是ajax因爲與瀏覽器的兼容問題，因而我又選擇了jquery技術的ajax來解決。從後臺傳回來的值由於有三個（工資總和，我的保險總和，我的所得稅），因此只能選用json做爲傳回值。在網上查找了不少資料，都不盡相同，試了幾個都沒什麼效果，最後看到一篇文章很不錯：http://hi.baidu.com/driftice/blog/item/2f7d2a89472af3ba0e244452.html，照着他的思路把個人模塊實現了。

        先對模塊進行技術分析，由於要手工添加基本工資項和我的保險項，這就須要使用前臺的js來實現，這個地方我使用的是上一個亞美項目的現成代碼來實現的比較簡單，後來想用jquery來實現，可是發現貌似沒那麼簡單，因而就把資料放在那，一直懶得研究了。

        關鍵代碼以下：

function addBasicItem()
{
      var tdFile = document.getElementByIdx_x("basic");
      var tableRow = tdFile.insertRow(tdFile.rows.length-1);
      var i=tdFile.rows.length;
      tableRow.id = "rowr" + (i-1);
      var cell0 = tableRow.insertCell(0);
      cell0.className="th";
      cell0.innerHTML ="基本工資"+(i-1);
      var cell1 = tableRow.insertCell(1);
      cell1.innerHTML ="<input type='text' id='incomeAmt"+(i-1)+"' name='incomeAmt' value='0' maxlength='10'/><span class='unit'>元</span> <a href='javascript:deleteBasicItem(""+tableRow.id+"")';><span class='shanchu'>刪除</span></a>";
}
//刪除一行
function deleteBasicItem(rowId)
{
      var tableDetail = document.getElementByIdx_x("basic");
      tableDetail.deleteRow(document.getElementByIdx_x(rowId).rowIndex);
}

        解決了這個問題，那前臺的問題就剩下格式校驗了，話說這個問題也是比較好作的，這裏不作詳述了。
以後就是jquery ajxa的應用，前面說到，由於返回的時候是三個值，因此採用的是json，故須要不少包的支持
        1.java包的支持，想使用json，必須導入如下jar包：
    「json-lib-2.3-jdk15.jar」，同時需導入JSON依賴包「commons-logging-1.0.4.jar」，「commons-lang.jar」，「commons-collections.jar」，「commons-beanutils.jar」，「ezmorph-1.0.4.jar」；
        2 js相關的文件，一共有兩個：需引入"jquery-1.4.2.min.js"與"json2.js"
        這樣全部的準備工做已經完畢，如今jsp頁面寫出咱們要提交表單的js代碼關

        鍵代碼以下：

jQuery(function($) {
        // 使用 jQuery 異步提交表單
        $('#myForm').submit(function() {
          $.ajax({
           url: 'cal',
           data: $('#myForm').serialize(),
           type: "post",
           cache : false,
           dataType:'json',
           success: function(data){
            $("#edTaxSum").attr("value",data.personTax);
            $("#fullSum").attr("value",data.tatolWages);
            $("#edInsSum").attr("value",data.instrument);
           }
          });
        return false;
       });
     });

        這段即包含了提交表單的一些設置，還提供了返回值的處理函數，在返回值的處理函數中，我將返回的數值分別賦值到三個input中。前臺全部的關鍵技術已經結束了。

        如今講介紹servlet如何對ajax數據進行處理並返回。
        servlet對ajax數據的處理和post提交沒有區別，主要是在如何生成json並返回這個地方。

        關鍵代碼以下：

//構建一個JSONObject
        JSONObject resultJSON = new JSONObject();
        resultJSON.accumulate("personTax", personTax);
        resultJSON.accumulate("instrument", instrument);
        resultJSON.accumulate("tatolWages", tatolWages);
        //須要設置ContentType爲"application/x-json"
        resp.setContentType("application/x-json");
        PrintWriter out = resp.getWriter();
        //向客戶端輸出JSONObject字符串
        out.println(resultJSON.toString());
        out.flush();
        out.close();

        很簡單，前臺只須要設定好接受函數就能夠了，雖然如今看來很簡單的一個東西，可是在一開始，仍是搞得我焦頭爛額的，用了一個下午的時間才真正搞定它