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',请求仍然没有问题。