getJSON 方法跨域交互实例 -- JavaScript -- IT技术博客大学习 -- 共学习共进步！

您现在的位置：首页 --> JavaScript --> getJSON 方法跨域交互实例

getJSON 方法跨域交互实例

浏览:2745次出处信息

现在真正的实现跨域交互还没有一个很好的方法，几天给大家推荐一下方法 $.getJSON(url, [data], [fn])

这是一个jquery的一个方法，来介绍一下这个方法的参数：

url:发送请求地址。

data:待发送 Key/value 参数。

fn：载入成功时回调函数。

在 jQuery 1.2 中，您可以通过使用JSONP 形式的回调函数来加载其他网域的JSON数据，如 "myurl?callback=?"。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。注意：此行以后的代码将在这个回调函数执行前执行。

这个方法，可以很好和远程做一些交互工作，兼容性也很好，今天我给大家带来一个php的实力

请输入：张三或者张丽来查看性别

哈哈，看到效果了吧，远程地址是：http://www.ys005.com/gy.php 来看一下源码吧

<?php
$n='女';
$nan='男';
$hs=$_GET['hs'];
if(!empty($_GET['name'])){
if($_GET['name'] === '张三'){
echo $hs,"({\"xb\":\"你的性别是：$nan\"})";
}else if($_GET['name'] === '张丽'){
echo $hs,"({\"xb\":\"你的性别是：$n\"})";
}else{
echo $hs,"({\"xb\":\"你输入的姓名没有录入系统\"})";
}
}else{
echo $hs,"({\"xb\":\"你没有输入内容\"})";
}
?>

01
<?php 

02
$n='女'; 

03
$nan='男'; 

04
$hs=$_GET['hs']; 

05
if(!empty($_GET['name'])){ 

06
if($_GET['name'] === '张三'){ 

07
echo $hs,"({\"xb\":\"你的性别是：$nan\"})"; 

08
}else if($_GET['name'] === '张丽'){ 

09
echo $hs,"({\"xb\":\"你的性别是：$n\"})"; 

10
}else{ 

11
echo $hs,"({\"xb\":\"你输入的姓名没有录入系统\"})"; 

12
} 

13
}else{ 

14
echo $hs,"({\"xb\":\"你没有输入内容\"})"; 

15
} 

16
?>

再来看一下本地html的源码！

<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
</head>
<body>
<input type="text" class="name" name="name" />
<input type="button" onclick="javascript:cs()" value="查看" />
<div class="b"></div>
<script type="text/javascript">
function cs(){
var namen=$(".name").attr("value")
//alert("http://www.ys005.com/gy.php?name="+namen+"&hs=bo");
$.getJSON("http://www.ys005.com/gy.php?name="+namen+"&sj="+parseInt(Math.random()*1000)+"&hs=?",function bb(date){
$(".b").html(date.xb)
})

}
</script>

01
<script type="text/javascript" src="jquery-1.5.2.min.js"></script> 

02
</head> 

03
<body> 

04
<input type="text" class="name" name="name" /> 

05
<input type="button" onclick="javascript:cs()" value="查看" /> 

06
<div class="b"></div> 

07
<script type="text/javascript"> 

08
function cs(){ 

09
var namen=$(".name").attr("value") 

10
//alert("http://www.ys005.com/gy.php?name="+namen+"&hs=bo"); 

11
$.getJSON("http://www.ys005.com/gy.php?name="+namen+"&sj="+parseInt(Math.random()*1000)+"&hs=?",function bb(date){ 

12
$(".b").html(date.xb) 

13
}) 

14
  
15
} 

16
</script>

是不是很简单呢，大家快动手研究一下吧，这是一个很简单的例子

建议继续学习：

QQ技术交流群：445447336，欢迎加入！
扫一扫订阅我的微信号：IT技术博客大学习

<< 前一篇：div+css+js无缝滚动代码

后一篇：前端要给力之：分解对象构造过程new() >>

文章信息

作者：Sonhineboy 来源： web前端开发
标签： getJSON 跨域
发布时间：2011-09-26 23:34:38

建议继续学习

近3天十大热文