欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

jQuery使用JSONP实现跨域获取数据的三种方法详解

程序员文章站 2023-01-07 20:53:50
本文实例讲述了jquery使用jsonp实现跨域获取数据的三种方法。分享给大家供大家参考，具体如下： 第一种方法是在ajax函数中设置datatype为'jsonp'...

本文实例讲述了jquery使用jsonp实现跨域获取数据的三种方法。分享给大家供大家参考，具体如下：

第一种方法是在ajax函数中设置datatype为'jsonp'

$.ajax({
  datatype: 'jsonp',
  url: 'http://www.a.com/user?id=123',
  success: function(data){
    //处理data数据
  }
});

第二种方法是利用getjson来实现，只要在地址中加上callback=?参数即可

$.getjson('http://www.a.com/user?id=123&callback=?', function(data){
  //处理data数据
});

第三种方法是使用getscript方法

//此时也可以在函数外定义foo方法
function foo(data){
  //处理data数据
}
$.getscript('http://www.a.com/user?id=123&callback=foo');

实例演练：

index.html

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jsonp</title>
<script src="jquery-1.8.0.min.js"></script>
<script>
  $.ajax({
    type : "post",
    url : "jsonp.php?name=zhaoxiace&age=30",
    datatype : "jsonp",
    jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
    jsonpcallback:"callbackfunction",//自定义的jsonp回调函数名称，默认为jquery自动生成的随机函数名
    success : function(data){
      console.log(data.statuscode + "/" + data.message + "/" + data.name + "/" + data.age);
    },
    error:function(){
      alert('请求失败');
    }
  });
</script>
</head>

jsonp.php

<?
$data["age"] = $_get['age'];
$data["name"] = $_get['name'];
$data["statuscode"]="200";
$data["message"]="成功";
$tmp= json_encode($data); //json数据
echo $callback . '(' . $tmp .')'; //返回格式，必需
?>

ps：关于json操作，这里再为大家推荐几款比较实用的json在线工具供大家参考使用：

在线json代码检验、检验、美化、格式化工具：

json在线格式化工具：

在线xml/json互相转换工具：

json代码在线格式化/美化/压缩/编辑/转换工具：

在线json压缩/转义工具：

更多关于jquery相关内容感兴趣的读者可查看本站专题：《jquery操作json数据技巧汇总》、《jquery form操作技巧汇总》、《jquery常用插件及用法总结》、《jquery扩展技巧总结》、《jquery表格(table)操作技巧汇总》及《jquery选择器用法总结》

希望本文所述对大家jquery程序设计有所帮助。

上一篇： 秘制油拌凉菜小妙招，你值得拥有

下一篇： 鲫鱼豆腐汤怎么做营养又美味？

推荐阅读