您的位置：首页 > Web前端 > JQuery

JQuery JSONP跨域初识（一）

2015-07-16 21:04 603 查看

直接上代码：

jp1.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>jsonp</title>
<script type="text/javascript"  src="./jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
type: "post",
url: "http://mutablehost:18080/jp2.js",
dataType: "jsonp",
// jsonp: "scallback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
jsonpCallback:"flightHandler",
//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
success: function(json){
var info = '当前时间：'+new Date()+'</font><br/>航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。';
$("#div").html(info);
},
error:function(XMLHttpRequest,textStatus) {
$("#div").html("ERROR:"+textStatus);
$("#div").append("<br/>"+XMLHttpRequest.status);
$("#div").append("<br/>"+XMLHttpRequest.readyState);
}
});

});
</script>
</head>
<body>
jp1.html<br/><br/>
<DIV ID="div"></DIV>
</body>
</html>

jp2.js

flightHandler({
"code": "CA1998",
"price": 1780,
"tickets": 522
});

>>>>>>>>>>>>>>>>>>>>>>>以上就是最简单的示例，补充说明：<<<<<<<<<<<<<<<<<<<<<<<

准备两个tomcat，保障两个tomcat都可以访问对应的文件：

tomcat a: (路径：\apache-tomcat-6.0.35 - A\webapps\ROOT\jp1.html)

tomcat b: (路径：\apache-tomcat-6.0.35 - B\webapps\ROOT\jp2.js)

host（C:\Windows\System32\drivers\etc\HOSTS）文件配置本地域名（最后添加）

127.0.0.1		mutablehost

启动tomcat a, tomcat b测试，访问tomcat a：http://localhost:8080/jp1.html

以上就是内容，需要注意的是参数：

$.ajax的jsonpCallback和jsonp参数，看请求地址就知道了

哦，不清楚？好，改代码来个对照：

代码修改：

请求地址：

好了，可以了，至于参数做什么用的，这里不做说明，另外，注意一点，特别重要的一点：

jsonpCallback配置的字符串是请求返回的json名要一致：

（jp1.html）

jp2.js

好，可以了。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航

JQuery JSONP跨域 初识（一）

JQuery JSONP跨域初识（一）