測試 jQuery 傳送中文資料給 Tomcat

測試 jQuery 傳送中文資料給 Tomcat

The following examples had been tested on Mozilla's Firefox and Microsoft's IE. The document is provided as is. You are welcomed to use it for non-commercial purpose.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

請勿轉貼

看其他教材

---

這個範例是對應 由 XMLHttpRequest 送出中文資料給 Tomcat，其主要的目的在於測試在 jQuery 的環境下，如何經資料（尤其是中文資料）傳送給 Tomcat。 在之前的對應文章中，我們說明了不同的開發環境以及瀏覽器對於傳送資料的作法不同， 而且目前也還沒有標準規範該如何做；我們經過多次實驗後得知，比較實用的做法是 瀏覽器端的 Javascript 在將資料送往 Tomcat 之前，最好先使用 encodeURIComponent() 對資料進行編碼。目前根據 jQuery 的文件，jQuery 在傳送資料給伺服器端之前， 會自動對傳送資料進行 encodeURIComponent() 編碼，這個功能讓我們的程式開發 又可以更輕鬆。 完成這個範例的步驟如下：

• 首先，先設計網頁所需要的表單，我們設計的範例如下：

  <form>
  姓名: <input type="text" name="name"></input>
  <input type="button" value="OK" onClick="makeRequest('http://xml.nchu.edu.tw:8080/jlu/servlet/Hello');"></input>
  </form>
  

• 設計 makeRequest()，這次跟之前範例主要的差異有兩個：
  1. 取得文字欄位內容的方式：jQuery 取得如上名為 name 的文字欄位內容的方式是 $("input[name=name]").val()。
  2. Ajax 呼叫的方式：以 jQuery 的 .get() 為例，若傳送的資料包含 name1=value1 和 name2=value2，則 .get() 的用法是 .get(url, {name1:value1, name2:value2}, callback(){});
  因此，makeRequest() 的原始碼如下：

    function makeRequest(url) {
      var str = $("input[name=name]").val(); // 取得 input 名稱為 name 的輸入值
      $.get(url, { name: str },
        function(result) {
          alert(result);
        });
    }
  

• 最後呈現的結果如下，請在姓名欄位內，輸入中文。（由於跨域的安全要求，無法直接在網頁執行，請執行demo 網頁）
• 
  姓名: