先上代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.1.1.js"></script>
<script src="js/Demo_0400.js"></script>
<title>jQuery AJAX</title>
</head>
<body>
<h1>當點擊按鈕時，一個AJAX請求將會發出，並且返回一個txt字符串</h1>
<div id="div1"></div>
<button id="bt1">Click me</button>
</body>
<script>
$(document).ready(function () {
$("#bt1").click(function () {
$.ajax("http://localhost:8080/a.txt",{
type:"GET",//請求方式
dataType:"txt",//返回參數的類型
//contentType:"utf-8",發送請求的編碼方式
success:function (data) {//請求成功後調用的函數
alert("success");
$("#div1").html(data);
},
error:function (textStatus) {//請求失敗後調用的函數
alert("fail");
$("#div1").html(textStatus);
}
});
</script>
</html
在這個示例中，當點擊“click me”按鈕後，jQuery會向tomcat請求a.txt文件，成功過後會彈出“success”警告框，失敗後會彈出“fail”警告框。
問題描述
運行結果如下圖
當點擊按鈕時，在開發者工具下可以看到已經拿到了a.txt文件，但是卻彈出了“fail”警告框。
原因分析
網上搜了很多博客，有的說是跨域訪問，要把請求類型改爲jsonp，但是我是在本地服務器上運行的，都是在本地ip下，不是跨域問題。不過他說的修改請求參數倒是提醒了我。
解決方案
於是我立刻去檢查我的請求參數，考慮到可能是編碼不匹配，於是就把`//contentType:”utf-8”這一句註釋掉了，重新運行，仍然出錯。
於是檢查其他類型，發現dataType寫的是“txt”，傳輸類型裏面沒有txt，而是text，原來是這裏錯了，將這裏改成了
dataType:"text",//返回參數的類型- 1
重新運行，測試，成功！
總結
jQuery AJAX中的$.ajax()方法雖然方便好用，但是出了錯同樣很難查，在使用的過程中應該多注意細節，小心參數類型等問題，用的多了過後，就不會再犯這種初級錯誤了。