<!DOCTYPT html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp跨域</title>
<script src="jquery-1.7.2.js"></script>
<!-- 1、sript.src实现跨域 -->
<script>
function showData(result){
var data = JSON.stringify(result) // 将对象编码成JSON字符串
$('#text').val(data) //设置值
}
$(document).ready(function(){
$('#btn').click(function(){
// 向头部添加一个脚本，改脚本发起一个跨域请求
$('head').append('<script src="http://localhost:9090/student?callback=showData"><\/script>')
})
})
</script>
<!-- 2、jquery的ajax跨域 -->
<script>
$(document).ready(function(){
$('#btn').click(function(){
$.ajax({
url: 'http://localhost:9090/student',
type: 'GET',
dataType: 'jsonp', // 返回的数据格式
jsonpCallback: 'showData', // 指定回调函数名称，如果没有，则默认为success函数
success: function(data){
var result = JSON.stringify(data)
$('#text').val(result)
}
})
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="跨域获取数据" />
<textarea id="text" style="width: 400px; height: 100px;"></textarea>
</body>
</html>
