前端跨域请求jsonp实现( 二 ) _电脑

http://localhost:8080/bean?id=2&name=张三&sex=男

文章插图

文章插图

2第二步：挪用项目标筹办。
1、新建一个javaweb项目
2、在端标语设置为8020
3、编写跨域挪用代码，本家儿如果页面js的编写

第二
：jsonp事项跨域的体例1第一种：原生的js实现跨域。
1、借助于原生javascript实现，具体代码如下所示：
window.onload = function () {
var script = document.createElement('script');
script.setAttribute("type","text/javascript");
script.src = https://vvvtt.com/article/'http://localhost:8080/bean?callback=ajaxCallback&id=2&name=张三&sex=男';
document.body.appChild(script);
}

function ajaxCallback(data) {
alert('response data: ' + JSON.stringify(data));
};

文章插图

文章插图

2第二种：借助于jquery的getJSON实现。
具体代码如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
<script src=https://vvvtt.com/article/"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</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>

文章插图

文章插图

3第三种：借助于jquery的ajax实现。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>跨域测试</title>
<script src=https://vvvtt.com/article/"https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</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>