getJSON 方法跨域交互实例

web前端开发 2011-09-26 23:34:38 浏览 2,881 次

标签 getJSON 跨域

现在真正的实现跨域交互还没有一个很好的方法，几天给大家推荐一下方法 $.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>

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

建议继续学习

优雅绝妙的Javascript跨域问题解决方案（阅读 7,940）
跨域请求的iframe解决方案（1）（阅读 6,320）
jQuery中getJSON跨域原理详解（阅读 6,262）
ajax-cross-domain （阅读 5,761）
利用跨域资源共享（CORS）实现ajax跨域调用（阅读 5,521）
研究ext发现ajax跨域实现（阅读 4,700）
三谈Iframe自适应高度（阅读 4,581）
使用document.domain和iframe实现站内AJAX跨域（阅读 4,461）
使用window.postMessage实现跨域通信（阅读 4,163）
跨域请求的iframe解决方案（2）（阅读 4,122）