网站地图    收藏   

子栏目

主页 > 前端 > javascript >

javascript跨域调用JSON数据示例

来源：自学PHP网    时间：2014-09-19 14:47 作者： 阅读:次

[导读] 如果我们使用原生态的javascript跨域调用JSON数据我们利用createElement再加动态给src加远程数据接口，现在我们也可以使用jquery ajax getjson来实例。...

js原生态写法

 代码如下 复制代码

<script type="text/javascript"> 
    function urljson(o) { 
        //o=eval(’(’+o+’)’); 
        for(var i in o) { 
            alert(i+":"+o);//循环输出a:1,b:2,etc. 
        } 
    } 
    var jsonp=document.createElement("script"); 
    jsonp.type="text/javascript"; 
    jsonp.src="http://www.a.com/1/a.txt"; 
    document.getElementsByTagName("head")[0].appendChild(jsonp);//跨域调用JSON数据
    //urljson("{msg:’this is json data’}");//如本机数据，这样调urljson函数

</script>

远程端

 代码如下 复制代码


urljson({msg:’this is json data’})

urljson本地名和远程一致即可，可动态生成

或者下面（

JavaScript的链接，必须在function的下面。
）

 代码如下 复制代码

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script type="text/javascript">
function jsonpCallback(result) {
  alert(result.a);
  alert(result.b);
  alert(result.c);
  for(var i in result) {
  alert(i+":"+result);//循环输出a:1,b:2,etc.
  }
}
</script>

<script type="text/javascript" src="http://www.a.com/1/a.txt"></script>


Jquery. getJSON跨域调用数据


方法定义：jQuery.getJSON( url, data, callback )
通过get请求得到json数据
·url用于提供json数据的地址页
·data(Optional)用于传送到服务器的键值对
·callback(Optional)回调函数，json数据请求成功后的处理函数

 代码如下 复制代码
function(data, textStatus) {
        // data是一个json对象
        // textStatus will be "success"
       this; // the options for this ajax request
}

 


（1）一个对象

 代码如下 复制代码

$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
       $("#divmessage").text(data.CustomerName);
    }
);
 


向Json_1.ashx地址请求json数据，接收到数据后，在function中处理data数据。 这里的data的数据是一条记录，对应于一个customer实例，其中的数据以k/v形式存在。即以[object,object]数组形式存在。
{"Unid":1,"CustomerName":"宋江","Memo":"天魁星","Other":"黑三郎"}

所以在访问时，以data.Property来访问，下面以k/v循环来打印这条宋江的记录：

 代码如下 复制代码


$.getJSON(
    "webdata/Json_1.ashx",
    function(data) {
        var tt="";
        $.each(data, function(k, v) {
            tt += k + "：" + v + "<br/>";
        })
        $("#divmessage").html(tt);
});

 
结果：
Unid：1
CustomerName：宋江
Memo：天魁星
Other：黑三郎
（2）对象数组

例

 代码如下 复制代码


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>测试文档</title>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
</head>

<body>
<script language="javascript" type="text/javascript">
function getjs()
{
 $.getJSON("aaa.php?module=yes&rid="+Math.random(),{ids:[111,222,333,444,555].join(",")},function(data){
  for(var i=0;i<data.length;i++){
   alert(data[i].id);
  }
 });
}
</script>
<input type="button" value="测试" onClick="javascript:getjs();"/>
</body>
</html>

 

<?php
$ids=$_GET["ids"];
$ids=explode(',',$ids);
//$arr=array("name"=>"姓名", "age"=>20,'A'=>$ids);
$arr=array();
$arr[]=array('id'=>$ids[0],'price_now'=>'0.00','time_now'=>'161427','u_name_now'=>'abc','state'=>'1','bidDisabled'=>'0');
$arr[]=array('id'=>$ids[1],'price_now'=>'0.00','time_now'=>'161427','u_name_now'=>'abc','state'=>'1','bidDisabled'=>'0');
$arr[]=array('id'=>$ids[2],'price_now'=>'0.00','time_now'=>'161427','u_name_now'=>'abc','state'=>'1','bidDisabled'=>'0');
$arr[]=array('id'=>$ids[3],'price_now'=>'0.00','time_now'=>'161427','u_name_now'=>'abc','state'=>'1','bidDisabled'=>'0');
$arr[]=array('id'=>$ids[4],'price_now'=>'0.00','time_now'=>'161427','u_name_now'=>'abc','state'=>'1','bidDisabled'=>'0');
$jarr=json_encode($arr);
echo $jarr;
?>

最新评论

    加载更多~~

    添加评论

    更多文章推荐

    自学PHP网专注网站建设学习,PHP程序学习,平面设计学习，以及操作系统学习

    京ICP备14009008号-1@版权所有www.zixuephp.com

    网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱904561283@qq.com

    添加评论