• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > jQuery使用JSONP实现跨域获取数据的三种方法详解

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

作者:yhdsir 字体:[增加 减小] 来源:互联网 时间:2017-05-11

yhdsir通过本文主要向大家介绍了jquery jsonp跨域,jquery ajax jsonp,jquery jsonp,jquery jsonp插件,jquery.jsonp.js等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

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

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

</div>

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

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

</div>

第三种方法是使用getScript方法

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

</div>

实例演练:

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>

</div>

jsonp.php

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

</div>

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

在线JSON代码检验、检验、美化、格式化工具:
http://tools.weikejianghu.com/code/json

JSON在线格式化工具:
http://tools.weikejianghu.com/code/jsonformat

在线XML/JSON互相转换工具:
http://tools.weikejianghu.com/code/xmljson

json代码在线格式化/美化/压缩/编辑/转换工具:
http://tools.weikejianghu.com/code/jsoncodeformat

在线json压缩/转义工具:
http://tools.weikejianghu.com/code/json_yasuo_trans

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

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery使用JSONP实现跨域获取数据的三种方法详解
  • Jquery实现跨域异步上传文件总结
  • JavaScript用JSONP跨域请求数据实例详解

相关文章

  • 2017-05-11微信小程序 slider 详解及实例代码
  • 2017-05-11JavaScript 实现 Tab 点击切换实例代码
  • 2017-05-11javascript过滤数组重复元素的实现方法
  • 2017-05-11Bootstrap中data-target 到底是什么
  • 2017-05-11使用微信内嵌H5网页解决JS倒计时失效问题
  • 2017-05-11利用Javascript裁剪图片并存储的简单实现
  • 2017-05-11jquery广告无缝轮播实例
  • 2017-05-11Bootstrap 网格系统布局详解
  • 2017-05-11js实现彩色条纹滚动条效果
  • 2017-05-11JavaScript数据结构之二叉树的计数算法示例

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • JS小数转换为整数的方法分析
    • 有关JS中的0,null,undefined,[],{},'''''''',false之间的关系
    • vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
    • 从零学习node.js之模块规范(一)
    • vue-dialog的弹出层组件
    • javascript编写简易计算器
    • js实现5秒倒计时重新发送短信功能
    • jquery实现手机端单店铺购物车结算删除功能
    • vue模板语法-插值详解
    • 基于JS实现移动端向左滑动出现删除按钮功能

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有