IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者
首页 / 前端

getJSON 方法跨域交互实例

web前端开发 2011-09-26 23:34:38 累计浏览 2,932 次
本机暂存
标签 AJAX jQuery JSON 跨域

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

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

同分类推荐文章

  1. translateZ() （2026-06-25 21:18:56）
  2. translateY() （2026-06-25 21:17:56）
  3. translateX() （2026-06-25 21:16:01）

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 （累计阅读 48,350）
  2. 分享一个JQUERY颜色选择插件 （累计阅读 14,224）
  3. 使用python/casperjs编写终极爬虫-客户端App的抓取 （累计阅读 12,962）
  4. YSLOW法则中，为什么yahoo推荐用GET代替POST？ （累计阅读 11,839）
  5. JSONP与POST方式请求 （累计阅读 11,296）
  6. jQuery插件---轻量级的弹出窗口wBox. （累计阅读 10,773）
  7. 10个强大的Ajax jQuery文件上传程序 （累计阅读 8,854）
  8. jQuery性能优化指南 （累计阅读 8,820）
  9. jQuery的data()方法 （累计阅读 8,651）
  10. jQuery Color Animations颜色动画插件 （累计阅读 8,506）