2021-05-12 14:32:11
ajax跨域解決方法
2019-12-12 09:57:44
Ajax 即「Asynchronous Javascript And XML」（非同步 JavaScript 和 XML），是指一種建立互動式網頁應用的網頁開發技術。
Ajax = 非同步 JavaScript 和 XML 或者是 HTML（標準通用標示語言的子集）。
Ajax 是一種用於建立快速動態網頁的技術。
Ajax 是一種在無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
通過在後台與伺服器進行少量資料交換，Ajax 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。
傳統的網頁（不使用 Ajax）如果需要更新內容，必須過載整個網頁頁面。
1
第一種：建立一個springboot的專案（也可以建立一個簡答的java專案）。
1、 開啟建立頁面 選擇File-new-project..
2、選擇建立的專案為spring initializr 進入springboot專案建立步驟（也可以選擇型別java，建立一個普通java專案）
3、輸入專案名字，選擇依賴web（根據專案需求選擇，此次需要），選擇存放目錄-完成（Finish）
2
第二種：建立一個簡單的javaweb專案。
1、直接開啟：https://jingyan.baidu.com/article/ff411625048acf12e482373a.html
2、或者百度搜尋：servlet類如何對映到url路徑 百度經驗
1
第一步：編寫一個controller。
關鍵點是需要獲取前端的callback引數並返回，包裹需要解析的json資料。
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.util.Map;
@RestController
public class TestController {
@RequestMapping("/bean")
public String testJson(HttpServletRequest request,
HttpServletResponse response, Map paramMap) {
String callback = request.getParameter("callback");
String id = request.getParameter("id");
String name = request.getParameter("name");
String sex = request.getParameter("sex");
String json = callback + "(" + "{'id':" + id + ",'name':'" + name
+ "','sex':'" + sex + "'}" + ")";
return json;
}
}
2
第二步：編寫前端頁面請求。
1、注意需要引入jquery
2、callback=?一定要傳，後台解析
3、dataType的型別一定注意在特殊的情況下定義為「json」 也是可以的
不過一般為：dataType: 'jsonp',
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script>
//ajax跨域請求
function getAjax() {
//基於jQuery的跨域請求
$.ajax({
//設定請求型別
type:"get",
//請求超時時間
timeout:5000,
//設定請求地址
url: 'http://localhost:8080/bean?callback=?',
//設定需要傳送的資料
data: {id:2,name:'李四',sex:'男'},
//定義此請求為跨域請求
dataType: 'jsonp',
success: function (data) {
console.log(data.id+data.name+data.sex);
},
error: function (data) {
console.log(data)
}
})
}
//傳送請求
getAjax();
</script>
</body>
</html>
3
第三步：測試。
1、啟動被呼叫服務，並測試
2、啟動呼叫服務，開啟需要呼叫的頁面如下如下所示：
1
第一步：還可以使用jquery外掛jquery.jsonp.js實現跨域
下載地址：https://github.com/congmo/jquery-jsonp/tree/master/src
function jsontest(){
//下載引入引入jquery.jsonp.js
//https://github.com/congmo/jquery-jsonp/tree/master/src
$.jsonp({
url: 'http://localhost:8080/bean?callback=?',
"success": function(data) {
console.log(data.id+data.name+data.sex);
},
"error": function(d,msg) {
console.log(data)
}
});
}
2
第二步：$.getJSON實現跨域
$.getJSON("http://localhost:8080/bean?callback=?", {id:2,name:'李四',sex:'男'},
function(data) {
alert(data.id+data.name+data.sex);
});
3
第三步：總結。實際上我們在引數中傳輸callback引數與，jquery就認為你在傳送跨域請求，此時你不定義dataType: 'jsonp',請求仍然沒有問題。相關文章