1.get請求
方式一：$.ajax{()}
$.ajax({
type : 'get',// 請求方式，可以不聲明該屬性，默認值就是get
url : 'getParams',// 請求地址
data : {// 請求數據，這個參數可以去掉，也就是只發送請求不攜帶數據
name : 'Marydon',
work : '程序員'
},
success : function(result){// 請求成功
alert(result);
},
error : function(result){// 請求失敗，這個參數一般情況系不攜帶
alert(result);
}
});
說明：當是get類型時，可以不聲明type，默認請求方式就是get請求
方式二：$.get();
$.get('getParams',// 請求地址
{// 請求數據
name : 111,
work : '程序員'
},
function(result) {// 請求成功
alert(result);
});
方式三：$.getJSON();
$.getJSON('getParams',// 請求地址
{// 請求數據
name : 'Marydon',
work : '程序員'
},
function(result) {// 請求成功，要求返回的數據必須是json格式的字符串，返回其它類型數據接收不到
alert(JSON.stringify(result));
});
后台返回json數據及前台對應的接收方式
方式一：返回json字符串
當后台沒有指定返回數據格式為application/json數據時，默認是text/html文本數據，ajax將會根據Content-Type屬性自動將dataType屬性的值設置為：text，也就是按照字符串來解析返回的數據。
后台響應
// 告訴瀏覽器以指定的字符集進行解析返回數據
response.setCharacterEncoding("utf-8");
// 后台不指定響應數據格式
JSONObject json = new JSONObject();
json.put("name", request.getParameter("name"));
json.put("work", work);
// 返回json字符串
response.getWriter().append(json.toString());
前端接收：兩種情況
除$.getJSON()以外的ajax接收到的是json字符串，又可以划分為兩種接收方式
第一種：需要手動將其轉換成json對象
$.ajax({
type : 'post',// 請求方式
url : 'getParams',// 請求地址
data : {'name' : 'Marydon','work' : '程序員'},// 請求數據
success : function(result){// json字符串
// json字符串轉json對象
// 方式一：eval()
var json = eval('(' + result + ')');
// 方式二：JSON.parse()
// var json = JSON.parse(result);
alert(json.work);
}
});
第二種：指定返回數據是json
$.ajax({
type : 'get',// 請求方式
url : 'getParams',// 請求地址
data : {'name' : 'Marydon','work' : '程序員'},
dataType : 'json',// 指定返回類型為json數據
success : function(result){// 請求成功
alert(result.work);
}
});
$.get('getParams',// 請求地址
{// 請求數據
name : 111,
work : '程序員'
},
function(result) {// 請求成功
alert(result.work);
},
'json');// 返回數據類型設置必須放在最后
$.getJSON()可以接收到返回的json字符串，並自動將其轉換成json對象
$.getJSON(
'getParams',// 請求地址
{ name : 'Marydon', work : '程序員' },
function(result) {// 自動將json字符串轉化成json對象
alert(result.work);
});
$.getJSON()就不需要聲明啦，因為它的值已經被指定為了'json'。
需要注意的是$.get()和$.post()添加'json'時的位置必須在最后一位。因為語法形如：$.post(url,[data],[callback],['json'])
方式二：返回json對象
后台響應
// 告訴瀏覽器以json對象來處理返回的數據
response.setHeader("content-type","application/json;charset=utf-8");
JSONObject json = new JSONObject();
json.put("name", request.getParameter("name"));
json.put("work", work);
response.getWriter().append(json.toString());
前端接收
前端接收到的就是JSON對象，不需要再處理。
小結：
第一，$get()和$getJSON()的區別；$.getJSON()不能聲明dataType屬性，因為它的值已經被指定為JSON，只有當返回的數據是json字符串或者json對象時，才會接收；而dataType的值，jQuery會自動根據返回類型進行設置，一般無需手動聲明，其它地方一模一樣。
第二，$get()、$getJSON()和$.ajax({})的區別；前兩者只能設置url、data、success這三個屬性，當這三個屬性不能滿足需求時，就必須使用$.ajax({})了。
第三，關於ajax get請求攜帶數據的本質；get請求的本質就是：url?param1=value1¶m2=value2&...，所以，我們可以去掉data屬性，直接在url后面拼接參數即可。例如：
var param = "name=Marydon&work=" + encodeURI('程序員');// 手動拼接需要編碼2次，后台解碼1次
$.get(
'getParams?' + param,// 請求地址+?+請求數據
function(result) {// 請求成功
alert(result);
});
第四，get請求導致的中文亂碼問題，主要分為兩種情況：
首先，需要明白的是：get請求，瀏覽器設置的字符集是ISO-8859-1，所以中文傳輸到后台會導致亂碼，因為后台是以UTF-8進行接收參數的。
第一種情況對應解決方案：使用原生的ajax攜帶數據
方式一，后台轉碼：new String(work.getBytes("iso-8859-1"), "utf-8");；
方式二，前端編碼-work : encodeURI('程序員')，后台解碼-URLDecoder.decode(work, "utf-8")。（推薦使用）
第二種情況對應解決方案：手動拼接key=value，傳輸數據
方式一：前台編碼一次：work=encodeURI('程序員');，后台轉碼：new String(work.getBytes("iso-8859-1"), "utf-8");
方式二：前台手動編碼兩次：work=encodeURI(encodeURI('程序員'))，后台解碼一次：URLDecoder.decode(work, "utf-8")。（推薦使用）
區分不同情況的原因是：
使用ajax的data屬性傳遞數據時，get請求會自動對中文進行一次編碼，tomcat對其解碼一次，其本質還是ISO-8859-1，所以有兩種解決方式；
自己手動拼接的話，get請求將不會自動對中文進行一次編碼，而tomcat高版本url中不允許帶中文，所以至少需要手動編碼一次，同樣的，tomcat會對其解碼一次，所以也有兩種解決方式；
2.post請求
方式一：$.ajax{()}
$.ajax({
type : 'post',// 請求方式，不聲明該屬性時，默認值是get請求
url : 'getParams',// 請求地址
data : {// 請求數據，這個參數可以去掉，也就是只發送請求不攜帶數據
name : 'Marydon',
work : '程序員'
},
success : function(result){// 請求成功
alert(result);
},
error : function(result){// 請求失敗，這個參數一般情況系不攜帶
alert(result);
}
});
方式二：$.post()
$.post('getParams',// 請求地址
{// 請求數據
name : 111,
work : '程序員'
},
function(result) {// 請求成功
alert(result);
});
post請求不存在亂碼問題。
3.總結
第一，通常情況下，用來表示值的數據有兩種類型：string和number，如果是數值類型，則不需要使用雙引號或者單引號；如果是字符串類型，必須使用單引號或者雙引號括住，否則，它將代表的是一個變量而不是一個具體的數據類型，舉例說明：
data : { name : 'Marydon'}，此時的Marydon是一個string類型的字符串；
data : { name : Marydon}，此時的Marydon是一個變量，必須在該代碼出現前面已經聲明了該變量，即var Marydon;，否則js運行時將會報錯：找不到該變量；
data : { name : 111}，這個就比較簡單了，我們一眼就能看出它是數值類型，但是數據在傳輸時，參數值均會被轉換成字符串String來傳輸；后台在接收該參數時用String類型來接收。
第二，關於請求數據格式
data : { key : value}，key既可以不帶引號，也可以帶引號，單引號或者雙引號也都可以，value也一樣。
4.擴展用法
第一，跨域cookie傳遞
使用xhrFields屬性可以解決跨域cookie傳遞問題：即能將客戶端的cookie傳遞給服務器。
xhrFields:{withCredentials:true}；
當然，服務器端也需要做相應的設置才行，具體詳見文章：java、ajax 跨域請求解決方案，第五部分
第二，使用ajax提交文件
方式一：使用原生的XMLHttpRequest對象進行提交
前端發送數據
<input type="file" id="file" onchange="upload('getParams')" style="display: none;">
<input type="button" value="上傳" onclick='javascript:$("#file").click()'>
function upload(url) {
// js 獲取文件對象
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
alert("圖像上傳失敗，請重試！");
return;
}
// 創建form表單
var formFile = new FormData();
// 加入文件對象
formFile.append("file", fileObj);
// 創建XMLHttpRequest對象
var xhr = new XMLHttpRequest();
// post方式，url為服務器請求地址，true 該參數規定請求是否異步處理。
xhr.open("post", url, true);
//請求完成
xhr.onload = function () {
// 將返回數據轉換成JSON對象
var resData = JSON.parse(this.responseText);
document.getElementById("file").value = "";
};
// 請求失敗
xhr.onerror = null;
// 上傳進度調用方法（可實現上傳進度條）
xhr.upload.onprogress = null;
// //開始上傳，發送form數據（以二進制數據傳遞給后台）
xhr.send(formFile);
}
后台接收
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
InputStream is = request.getInputStream();
int i = 0;
while ((i = is.read()) != -1) {
System.out.print((char) i);
}
}
方式二：$.ajaxFileUpload
准備工作：jQuery.js和ajaxfileupload.js
$.ajaxFileUpload({
fileElementId: fileId, //需要上傳的文件域的ID，即<input type="file">的ID。
url: path, //后台方法的路徑
type: 'post', //當要提交自定義參數時，這個參數要設置成post
dataType: 'json', //服務器返回的數據類型。可以為xml,script,json,html。如果不填寫，jQuery會自動判斷。
secureuri: false, //是否啟用安全提交，默認為false。
async : true, //是否是異步
success: function(data) { //提交成功后自動執行的處理函數，參數data就是服務器返回的數據。
},
error: function(data, status, e) { //提交失敗自動執行的處理函數。
console.error(e);
}
});
原理：創建一個隱藏的表單和iframe然后用JS去提交，獲得返回值
使用jQuery的好處在於：可以實現異步提交文件
方式三：FileReader+ajax
// 圖片正則表達式
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
// 文件校驗
if (document.getElementById("uploadImage").files.length === 0) {
alert("請上傳圖像");
return;
}
// js 獲取文件對象
var fileObj = document.getElementById("uploadImage").files[0];
// 格式校驗
if (!rFilter.test(fileObj.type)) {
alert("必須是圖片格式文件！");
return;
}
//判斷是否支持FileReader
if (window.FileReader) {
// 創建文件讀取對象
var reader = new FileReader();
} else {
alert("您的設備不支持圖片上傳功能，如需該功能請升級您的設備或瀏覽器！");
return;
}
// 圖片轉base64（Blob對象或File對象）
reader.readAsDataURL(fileObj);
reader.onload = function(e) {
// 獲取對應的base64
var imgBase64 = e.target.result;
// 將圖片的base64碼傳給后台
// 調用騰訊接口
$.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
// TODO 對返回的接口數據進行自動填充處理
});
};
注意：
這種方法僅限圖片上傳，也就是只適用於圖片上傳；
Internet Explorer 10 之前的版本並不支持FileReader()；
另外，window.FileReader更常用的方式是：圖片預覽，由於低版本IE瀏覽器不支持FileReader實現圖片預覽，但是卻可以通過濾鏡實現預覽，具體見文末推薦。
寫在最后
哪位大佬如若發現文章存在紕漏之處或需要補充更多內容，歡迎留言！！！
相關推薦：
- 個人主頁
- ajax舊版文章
- application/x-www-form-urlencoded與multipart/form-data與application/json的區別 精析
- 圖片預覽（兼容低版本IE）