ajax跨域解決方法

Ajax 即“Asynchronous Javascript And XML”（異步 JavaScript 和 XML），是指一種建立交互式網頁應用的網頁開辟手藝。

Ajax = 異步 JavaScript 和 XML 或者是 HTML（尺度通用標識表記標幟說話的子集）。

Ajax 是一種用于建立快速動態網頁的手藝。

Ajax 是一種在無需從頭加載整個網頁的環境下，可以或許更新部門網頁的手藝。

經由過程在后臺與辦事器進行少量數據互換，Ajax 可以使網頁實現異步更新。這意味著可以在不從頭加載整個網頁的環境下，對網頁的某部門進行更新。

傳統的網頁（不利用 Ajax）若是需要更新內容，必需重載整個網頁頁面。

東西/原料

電腦
intellij IDEA或者eclipse

第一步調：建立一個javaweb的項目

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路徑百度經驗

第二步調：利用jquery的ajax實現跨域請求

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
第二步：總結。
現實上我們在參數中傳輸callback參數與，jquery就認為你在發送跨域請求，此時你不界說dataType: 'jsonp',請求仍然沒有問題。