关于jQuery用$.ajax或$.getJSON实现跨域获取JSON数据的代码

通过jquery可以跨域获取json数据,但必须弄清楚的是,jquery不可以跨域获取任意json格式的数据,必须要通过服务端输出特定的针对jquery跨域读取的json数据。你可能目前对此仍然毫无了解,没关系,本文将以最简单易懂的方式介绍这个技术,相信人人都容易读懂,并能够实际应用。

本文主要和大家介绍JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码,需要的朋友可以参考下,希望对大家有用。

JQuery获取同域的JSON数据

首先引用jQuery库文件:

jQuery代码:

var url="http://localhost:8000/user.php";$(function(){ $.getJSON(url,function(data){ alert (data.name);})});

登录后复制

服务器代码(PHP):

 "xiaoming",  "pass" => "123456"); echo json_encode($arr); ?>

登录后复制

服务器返回字符串:

{“name”:”xiaoming”,”pass”:123456}

JQuery获取跨域的JSON数据

首先引用jQuery库文件:

jQuery代码:

var url="http://localhost:8000/user.php?jsoncallback=?";$(function(){ $.getJSON(url,function(data){ alert (data.name);})});

登录后复制

服务器代码(PHP):

 "xiaoming",  "pass" => "123456"); echo $_GET['jsoncallback']."(".json_encode($arr).")"; ?>

登录后复制

服务器返回字符串(需要传入参数“jsoncallback”):

jQuery19003894091040769696_1505708469340({“name”:”xiaoming”,”pass”:123456})

说明,jQuery传入值每次都不一样。

JQuery获取同域和跨域JSON数据的区别

从上述两个例子看到,JQuery获取同域和跨域JSON数据的区别有两点:

1)jQuery写法不同,跨域时要多加一个参数“jsoncallback=?”

2)服务器端返回字符串的写法不同,跨域时需要用到“’jsoncallback’”的传入值,构造的字符串格式是:jsoncallback传入值(原JSON字符串),注意要用括号把原JSON字符串包住。

总结

通过本文介绍,大家都应该明白了,要jQuery跨域读取JSON数据,首先需要在服务器端构造一个特殊的JSON字符串,否则是读取不了的,好在,构造方法十分简单,文中例子一看便懂。

jQuery + Ajax 获得跨域JSON数据

前面的例子用的是 $.getJSON 来获得跨域JSON数据,其实我们用 $.ajax 的方法也同样可以的。

首先引用jQuery库文件:

jQuery代码:

 $(function(){  $.ajax({  type: 'get',  url: 'http://localhost:8000/user.php?jsoncallback=?',  dataType: 'jsonp',  jsonp: "jsoncallback",  success: function(data) {   alert("用户名:"+ data.name+" 密码:"+ data.pass);  } }); }) 

登录后复制

特别注意,dataType 是 jsonp 而不是 json 。

相关推荐:

html中通过JS获取JSON数据并加载实例分享

JS如何获取Json数组里数组长度的实例

ajax跨域请求的解决办法:使用 JSONP获取JSON数据

以上就是关于jQuery用$.ajax或$.getJSON实现跨域获取JSON数据的代码的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2787750.html

(0)
上一篇 2025年3月8日 18:16:21
下一篇 2025年3月5日 11:45:39

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • VsCode完成VueJs项目的教程

    本文主要介绍了vscode新建vuejs项目的详细步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 使用vue-cli快速构建项目 ( vue-cli 是vue.js的脚手架,用于自动生成…

    2025年3月8日 编程技术
    200
  • javascript二维数组的面试题

    本文主要和大家分享一个关于javascript二维数组的面试题,希望能帮助到大家。给定一个二维数组,实现一个功能函数 fn,向这个函数中传递这个二维数组的一个坐标,如果这个坐标的值为 ”1“,将返回和这个坐标所有相连的并且坐标值为1坐标。 …

    编程技术 2025年3月8日
    200
  • vue-slicksort一个vue.js拖拽组件

    本文主要和大家分享vue-slicksort ,它是一个功能强大的可拖拽的vue.js组件。 它可以自动滚动,锁定坐标系。支持拖拽时,流畅的动画效果。可以支持水平,垂直或者网格的拖拽。支持触摸。希望本文能帮助到大家。 DEMO 安装 通过n…

    2025年3月8日
    200
  • JS中的BOM应用详解

    本文我们住要和大家分享js中的bom应用详解,我们曾经讲过js由三部分组成,其中一个部分就是bom,用于对浏览器进行操作。这节课我们主要就来介绍bom。 BOM基础 我们先来看一个BOM的最基础功能:打开、关闭窗口: 无标题文档 登录后复制…

    2025年3月8日
    200
  • Js简单实现返回上一页简洁介绍

    利用javascript实现返回上一页的方法很简单只需要一行js代码就可以搞定,不太了解js返回上一页的小伙伴们可以来看看,学习学习哦! 不再废话直接上代码: window.history.go(-1);  //返回上一页window.hi…

    编程技术 2025年3月8日
    200
  • js的数据类型及JS基本数据类型具体有哪几种

    本文主要和大家分享js的数据类型及js基本数据类型具体有哪几种,希望能帮助到大家。 近期做一些项目的时候发现,自己的js基础还是不够扎实,再看一遍犀牛书,加深自己的理解和印象。所以从这篇文章开始,后面都是关于原生js的一些内容。 我们先介绍…

    编程技术 2025年3月8日
    200
  • 三种JavaScript定义函数方法

    本文主要和大家介绍javascript定义函数的三种实现方法的相关资料,希望通过本文大家能够掌握三种定义函数的方法,需要的朋友可以参考下,希望能帮助到大家。 JavaScript定义函数的三种实现方法 【1】正常方法 function pr…

    编程技术 2025年3月8日
    200
  • Javascript刷新页面方法及location.reload()用法介绍

    本文主要和大家介绍javascript刷新页面方法及location.reload()用法介绍,希望通过本文能帮助到大家,需要的朋友可以参考下,希望能帮助到大家。 Javascript刷新页面的几种方法: 1    history.go(0…

    编程技术 2025年3月8日
    200
  • nodejs通过代理proxy发送http请求request详解

    本文主要和大家介绍nodejs通过代理(proxy)发送http请求(request),具有一定的参考价值,有兴趣的可以了解一下,希望能帮助到大家。 有可能有这样的需求,需要node作为web服务器通过另外一台http/https代理服务器…

    编程技术 2025年3月8日
    200
  • html和jquery/js引用外部图片时出现403的问题如何解决

    本文主要和大家分享解决html-jquery/js引用外部图片时遇到看不了或出现403的问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 解决方法如下所示: function showI…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论