我是先學習的原生 js，只拿過原生 js 寫過一些簡單的小練習。在做實際專案時，使用 jQuery ，但是因為沒有系統學習過，而是以專案驅動學習，用到哪，查到哪，經常會踩到一些坑，在此一併記錄，希望自己以後不會再在同一個問題上栽跟頭。

一、jQuery Ajax

檔案上傳及 url 預設編碼問題、content-type 問題

jQuery Ajax 預設會給傳入的 data 進行 url 編碼，如果有時候需要上傳檔案，就不需要使用 url 編碼。

<input type="file" class="btn btn-primary h-image-input">

var form = new FormData();
form.append("photo", $(".h-image-input")[0].files[0]);
$.ajax({
    type:"POST",
    url:"/hotel/picupload",
    processData: false,  // 不對資料進行 url 編碼處理
    contentType: false,  // 設定此處，不設定content-type， formdata會自動設定
    data: form,
    dataType: "json",
    //成功返回之後呼叫的函式             
    success: function(data) {
    },
    error: function () {
    }
});
 

• processData：當設定 data 選項為物件（或將物件作為第二個引數傳遞給 jQuery.get() 和相關方法）時，jQuery 通常會將該物件轉換成字串，該字串遵守標準的 HTML “application/x-www-form-urlencoded” 格式。如果想省略該步驟（比如想將 Document 物件作為 POST 請求體傳送），請設定該項為 false。
• contentType：請求需要的 HTTP Content-Type 頭。預設是 “application/x-www-form-urlencoded”。這是 HTML 表單和絕大部分伺服器指令碼使用的正常值。如果將 Type 選項設定為 “POST” ，想傳送純文字或 XML 文件作為請求體時，需要設定該選項。如果需要上傳檔案，需要將該項設定為 “multipart/form-data”，如果設定該項為 false，XMLHTTPRequest 的 send() 方法會自動設定 “Content-Type” 頭。詳情請見《Javascript 權威指南（第6版）》P499、557

jQuery(function ($) { ... } )

單獨例項化問題

在各 js 檔案裡都有 $(function () {...}) 或者 jQuery(function ($) {...}) ，但是這些是在 DOMReady 後執行的不同的函式，裡面的區域性變數不能相互使用，有各自的閉包。（其實這不是 jQuery 的坑，而是正宗的 js 函式和閉包問題，只是自己踩了...）