读书人

怎么利用js跨域查询json数据并放置在h

发布时间: 2013-03-04 17:22:13 作者: rapoo

如何利用js跨域查询json数据并放置在html页面中,希望高人能把代码贴出来
1.我现在有一个这样的api地址他返回的是json格式的数据
http://api.cndns.com/sitestar/getTemplateCategories.aspx?username=cantect&otime=201302281136&checksum=5d3742d59bb86347d71b7145a6615f61

2.我想获取他的status的值,但是我不知道从何下手

3.这是我用jquery写的获取json的测试页面,通过firebug的调试,证明我get了json数据,但是显示不了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" language="javascript" src="js/jquery-1.7.2.js"></script>

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script>
function showStudent(){
var s='';
$.getJSON("http://api.cndns.com/sitestar/getTemplateCategories.aspx?username=cantect&otime=201302281136&checksum=5d3742d59bb86347d71b7145a6615f61",function(json){
var d=json.status;

for(var i=0;i<d.length;i++){
//循环输出p标签
s+=('<p>id:'+d[i].status +'  ');
}
$('#content').html(s);
});

}

</script>


</head>

<body>
<input type="button" value="获取json" onclick="showStudent()" />
<div id="content"></div>
</body>
</html>


好像不行,建议LZ用JAVA或PHP去获取,然后用ajax去调用对应的后台程序。
[解决办法]
<script type="text/javascript" src="javascript/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function()
{

//从校务系统取得学校新闻
var shoolwebsite = "http://10.1.8.199:801/school/InterFaceWebService.asmx/GetSchoolNotice2_jsonSerialization?callback=?";
$.getJSON(
shoolwebsite,
{uid:'mkxling', CountTop:10},//用户id,取得最新新闻条数


function(data)
{
var i=0;
var jsons ;
jsons=jQuery.parseJSON(data.msg);
var i=0;
if (jsons)
{
if (jsons.length > 0 )
{
for (i = 0; i <= jsons.length-1; i++) {
alert(jsons[i].NoticeId);
alert('创建时间:' +jsons[i].CreateTime);
alert('新闻标题:'+Url.decode(jsons[i].Title));
alert('新闻超链接:'+jsons[i].URL);
alert('作者:'+Url.decode(jsons[i].NOTICEAUTHOR));
alert('新闻内容:'+Url.decode(Url.decode(jsons[i].NOTICE)).replace(/\+/g," "));

//asp不懂 建议用【创建时间】,【新闻标题】作为主键更新NEWS这张表。





}

}
}

});

})

var Url = {

// public method for url encoding
encode : function (string) {
return escape(this._utf8_encode(string));
},

// public method for url decoding
decode : function (string) {
return this._utf8_decode(unescape(string));
},

// private method for UTF-8 encoding
_utf8_encode : function (string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";

for (var n = 0; n < string.length; n++) {

var c = string.charCodeAt(n);

if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6)
[解决办法]
192);
utftext += String.fromCharCode((c & 63)
[解决办法]
128);
}
else {
utftext += String.fromCharCode((c >> 12)
[解决办法]
224);
utftext += String.fromCharCode(((c >> 6) & 63)
[解决办法]
128);
utftext += String.fromCharCode((c & 63)
[解决办法]
128);
}

}

return utftext;
},

// private method for UTF-8 decoding
_utf8_decode : function (utftext) {
var string = "";


var i = 0;
var c = c1 = c2 = 0;

while ( i < utftext.length ) {

c = utftext.charCodeAt(i);

if (c < 128) {
string += String.fromCharCode(c);
i++;
}
else if((c > 191) && (c < 224)) {
c2 = utftext.charCodeAt(i+1);
string += String.fromCharCode(((c & 31) << 6)
[解决办法]
(c2 & 63));
i += 2;
}
else {
c2 = utftext.charCodeAt(i+1);
c3 = utftext.charCodeAt(i+2);
string += String.fromCharCode(((c & 15) << 12)
[解决办法]
((c2 & 63) << 6)
[解决办法]
(c3 & 63));
i += 3;
}

}

return string;
}

}

[解决办法]
如果你不想搭建服务器做代理,可以使用yahoo提供的JSONP跨域访问在线代理API

<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$.getJSON("http://query.yahooapis.com/v1/public/yql", {
q: "select * from json where url=\"http://api.cndns.com/sitestar/getTemplateCategories.aspx?

username=cantect&otime=201302281136&checksum=5d3742d59bb86347d71b7145a6615f61\"",
format: "json"
}, function(data) {
var $content = $("#content")
var rst=data.query.results.json;
if(rst)alert(rst.status)
});

});
</script>

读书人网 >JavaScript

热点推荐