电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到前端跨域请求jsonp实现的问题，如果我们遇到了前端跨域请求jsonp实现的情况，该怎么处理怎么...
电脑现已成为我们工作、生活和娱乐必不可少的工具了，在使用电脑的过程中，可能会遇到前端跨域请求jsonp实现的问题，如果我们遇到了前端跨域请求jsonp实现的情况，该怎么处理怎么才能解决前端跨域请求jsonp实现带来的困扰呢，对于这样的问题其实我们只需要电脑java便捷工具 intellij IDEA或者eclipse前端编辑工具HBuilder非必须可以使用java编辑工具代替第一种：创建一个springboot的项目。1、 打开创建页面 选择File-new-project..2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）3、输入项目名字，选择依这样就解决了这样的问题，接下来给大家带来前端跨域请求jsonp实现的详细操作步骤。
工具/原料
电脑
java便捷工具 intellij IDEA或者eclipse
前端编辑工具HBuilder非必须可以使用java编辑工具代替
第一步骤：创建一个javaweb项目
第一种：创建一个springboot的项目。
1、 打开创建页面 选择File-new-project..
2、选择创建的项目为spring initializr 进入springboot项目创建步骤（也可以选择类型java，创建一个普通java项目）
3、输入项目名字，选择依赖web（根据项目需求选择，此次需要），选择存放目录-完成（Finish）
第二种：创建一个简单的javaweb项目。
1、直接打开：https://jingyan.baidu.com/article/ff411625048acf12e482373a.html
2、或者百度搜索：servlet类如何映射到url路径
第二步骤：项目准备
第一步：编写被调用项目的controller。
1、需要集成springmvc，springboot项目集成web就包含springmvc，普通的servlet需要：
PrintWriter w = response.getWriter();w.print(json);
2、端口默认8080
3、controller代码如下所示
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 = "{'id':" + id + ",'name':'" + name + "','sex':'" + sex
+ "'}";
if (callback != null) {
json = callback + "(" + json + ")";
}
return json;
}
}
4、启动服务并测试：
http://localhost:8080/bean?id=2&name=张三&sex=男
第二步：调用项目的准备。
1、新建一个javaweb项目
2、在端口号设置为8020
3、编写跨域调用代码，主要是页面js的编写
第二步骤：jsonp事项跨域的方式
第一种：原生的js实现跨域。
1、借助于原生javascript实现，具体代码如下所示：
window.onload = function () {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = 'http://localhost:8080/bean?callback=ajaxCallback&id=2&name=张三&sex=男';
document.body.appendChild(script);
}
function ajaxCallback(data) {
alert('response data: ' + JSON.stringify(data));
};
第二种：借助于jquery的getJSON实现。
具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
<script src="/uploads/allimg/200815/1143531515-10.jpg"></script>
</head>
<body>
<script>
$.getJSON("http://localhost:8080/bean?callback=?", {id:2,name:'李四',sex:'男'},
function(data) {
alert(data.id+data.name+data.sex);
});
</script>
</body>
</html>
第三种：借助于jquery的ajax实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
<script src="/uploads/allimg/200815/1143531515-10.jpg"></script>
</head>
<body>
<script>
$.ajax({
//设置请求类型
type:"get",
//请求超时时间
timeout:5000,
//设置请求地址
url: 'http://localhost:8080/bean',
//设置需要发送的数据
data: {id:2,name:'李四',sex:'男'},
//定义此请求为跨域请求
dataType: 'jsonp',
//定义回调函数
jsonpCallback:"callbackUser",
success: function (data) {
console.log("成功");
},
error: function (data) {
console.log(data)
}
})
function callbackUser(data){
alert("id:"+data.id+" name:"+data.name+" sex:"+data.sex);
}
</script>
</body>
</html>
第四种：主要是对三种的优化。
1、主要是去除jsonpCallback属性，url中传callback=?定义默认调用ajax的回调函数。要与后台代码对应（String callback = request.getParameter("callback");）
2、调用项目页面如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
<script src="/uploads/allimg/200815/1143531515-10.jpg"></script>
</head>
<body>
<script>
$.ajax({
//设置请求类型
type:"get",
//请求超时时间
timeout:5000,
//设置请求地址
url: 'http://localhost:8080/bean?callback=?',
//设置需要发送的数据
data: {id:2,name:'李四',sex:'男'},
//定义此请求为跨域请求
dataType: 'jsonp',
success: function (data) {
console.log("成功");
alert("id:"+data.id+" name:"+data.name+" sex:"+data.sex);
},
error: function (data) {
console.log(data)
}
})
</script>
</body>
</html>
第四步骤：总结
1、jsonp实现的方式就是借助于script标签的src属性获取数据，然后将数据作为参数传给函数，解析数据。这一点我们需要结合后台callback + "(" + json + ")"
可以看出一二。
2、跨域问题的解决方案除了jsonp方式外还有一种CORS，与jsonp不同的是这是一种后台解决方案。
注意事项
jdk 1.8
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
