jsonp跨域传值

2019-11-20 作者:计算机教程   |   浏览(95)

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

jsonp跨域传值

js原生态写法

很简单,(历史遗迹啊)来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个元素,地址指向第三方的API网址,形如:

 代码如下

并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。

复制代码

第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:callback({"name":"hax","gender":"Male"})

<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函数

这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。

</script>

代码实现:

远程端

下面文件内容在:www.test1.com域名下,请求www.test2.com下的test2.php文件内容

 代码如下

<metacontent="text/html; charset=utf-8"http-equiv="Content-Type"/> <scripttype="text/javascript">

复制代码

functionjsonpCallback(result) {

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

alert(result.name);

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

}

或者下面(

script>

JavaScript的链接,必须在function的下面。

<scripttype="text/javascript"src="www.test2.com/test2.php?callback=jsonpCallback">script>

 代码如下

以上代码需要注意:JavaScript的链接,必须在function的下面

复制代码

下面文件内容在www.test2.com下的test2.php里:

<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>

header("content-type:text/html;charset=utf-8");

<script type="text/javascript" src="http://www.a.com/1/a.txt"&gt;&lt;/script&gt;

@$arr=array(

Jquery. getJSON跨域调用数据

name=>"zhangsan",

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

age=>23,

 代码如下

sex=>'男'

复制代码

);

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

echo$_GET['callback']."(".json_encode($arr).")";

 

?>

(1)一个对象

实现方式2:利用$.getJSON实现

 代码如下

下面文件内容在:www.test1.com域名下,请求www.test2.com下的test2.php文件内容

复制代码

<scripttype="text/javascript"src="引入jquery路径">script> <scripttype="text/javascript">$.getJSON("http://www.test2.com/test2.php?callback=?",function(result) {

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

alert(result.name)//就可以得到name的值

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

}

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

});

 代码如下

script>

复制代码

下面文件内容在www.test2.com下的test2.php里:

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

header("content-type:text/html;charset=utf-8");

 
结果:
Unid:1
CustomerName:宋江
Memo:天魁星
Other:黑三郎
(2)对象数组

@$arr=array(name=>"zhangsan",age=>23,sex=>'男'

本文由www.2003.com发布于计算机教程,转载请注明出处:jsonp跨域传值

关键词: