JQuery - Ajax和Tomcat跨域請求問題解決方法！
阿新 • • 發佈：2018-09-26
頁面 解析json turn 圖片 fault $.ajax action 配置 span
在JQuery裏面使用Ajax和Tomcat服務器之間進行數據交互，遇到了跨域請求問題，無法成功得到想要的數據！
錯誤信息部分截圖：
通過錯誤信息判斷知道已經發生在Ajax跨域請求問題了！
當前Tomcat服務器，是一個已經存在的工程，有APP同這部分代碼一同工作。我所做的是開發另外一款手機應用程序，並且使用已有的接口！在這種情況下，實現Ajax跨域請求，而且對目前源代碼影響越小越好！怎樣達到這樣的目標？最終通過為Tomcat添加過濾器方式完成！
由於此項目是商業項目，服務器並不是我管理，所以無法提供具體代碼和截圖，具體實現根據下面這篇文章：
https://blog.csdn.net/appppppen/article/details/73196448
對於不了解JAVA開發朋友，可以通過下面文章了解一下Tomcat的過濾器：
http://www.runoob.com/servlet/servlet-writing-filters.html
最終，在服務器上面配置好過濾器，客戶端通過JQuery Ajax可以和服務器交互數據了，下面是獲取數據的部分截圖：
我的JQuery Ajax頁面代碼：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JQuery跨域解決方法</title> <script src="js/common.js"></script> <script src="js/jquery-2.1.4.min.js"></script> </head> <script language="JavaScript"> $(document).ready(function () { $("#submit").unbind("click").bind("click", function (e) {
e.preventDefault(); $.ajax({ url:"請求數據網址", type: "post", data: $("#form1").serialize(),//要提交數據 //另外一種提交數據方式，有的時候應該有用處 // data: { // ‘參數名稱‘: ‘參數值‘ // }, dataType: "json",//從服務器返回數據類型 beforeSend: function (request) { //發送請求前調用的函數，需要配置可以在這裏做 }, success: DoAjaxSuccess, error: DoAjaxError, complete: DoComplete }) //Ajax執行成功後調用的函數 function DoAjaxSuccess(data, status, jqxhr) { //得到返回的數據 var responseText = jqxhr.responseText; //解析JSON數據 $.parseJSON(responseText); //在Chrome瀏覽器控制臺打印信息 console.log(responseText); //在頁面顯示得到的數據 $("#ajax-responseData").html(responseText); //恢復默認錯誤信息 $("#ajax-error").html("錯誤信息："); } //Ajax執行失敗後調用的函數 function DoAjaxError(jqxhr, status, errorMsg) { //在頁面顯示錯誤信息 $("#ajax-error").html("錯誤信息：" + errorMsg); } //Ajax執行完畢後調用的函數 function DoComplete(jqxhr, status) { //在頁面顯示完成狀態 $("#ajax-status").html("完成狀態：" + status); //操作時間 var curTime = GetCurTime(); $("#ajax-responseTime").html(curTime); } }); }) </script> <body> <form id="form1" name="form1" method="post" action="#"> <table width="100%" border="1"> <tbody> <tr> <td> <table width="100%" border="0"> <tbody> <tr> <td width="7%">服務器：Tomcat</td> </tr> </tbody> </table> </td> </tr> <tr> <td> <table width="100%" border="1"> <tbody> <tr> <td width="67%"> <table width="100%" border="1"> <tbody> <tr> <td><label for="tel">電話:</label> <input name="tel" type="text" id="tel" value=""></td> </tr> <tr> <td><label for="pwd">密碼:</label> <input name="pwd" type="text" id="pwd" value=""></td> </tr> </tbody> </table> </td> <td width="33%"><input type="submit" name="submit" id="submit" value="提交"></td> </tr> </tbody> </table> </td> </tr> <tr> <td>操作時間：<a style="color: red" id="ajax-responseTime"> </a></td> </tr> <tr> <td id="ajax-status">完成狀態：</td> </tr> <tr> <td id="ajax-error">錯誤信息：</td> </tr> <tr> <td id="ajax-responseData"> </td> </tr> </tbody> </table> </form> </body> </html>
註意：得到返回JSON數據，在Ajax執行成功回調函數中，具體代碼是：
//Ajax執行成功後調用的函數
function DoAjaxSuccess(data, status, jqxhr) {
//得到返回的JSON數據
var responseText = jqxhr.responseText;
//解析JSON數據
$.parseJSON(responseText);
//在Chrome瀏覽器控制臺打印信息
console.log(responseText);
//在頁面顯示得到的數據
$("#ajax-responseData").html(responseText);
//恢復默認錯誤信息
$("#ajax-error").html("錯誤信息：");
}
common.js代碼：這是上面文件裏面引用的一個提供一些功能的JS文件
//補齊兩位數 function padleft0(obj) { return obj.toString().replace(/^[0-9]{1}$/, "0" + obj); } //得到當天日期 function GetCurTime() { var nowtime = new Date(); var year = nowtime.getFullYear(); var month = padleft0(nowtime.getMonth() + 1); var day = padleft0(nowtime.getDate()); var hour = padleft0(nowtime.getHours()); var minute = padleft0(nowtime.getMinutes()); var second = padleft0(nowtime.getSeconds()); var millisecond = nowtime.getMilliseconds(); millisecond = millisecond.toString().length == 1 ? "00" + millisecond : millisecond.toString().length == 2 ? "0" + millisecond : millisecond; return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second + "." + millisecond; }
JQuery - Ajax和Tomcat跨域請求問題解決方法！