JSON在线解析

所属目录
点击了解高性能代码运行API
运行结果
教程手册
代码仓库
极速运行
交互输入
极速运行模式,更高效的运行,点击编辑器上方的运行按钮即刻体验吧。
以下是用户最新保存的代码
我带会员单位岁啊哈幅度缺乏撒网缺乏v 发布于:2022-09-27 08:28 环保token 发布于:2022-05-12 21:12 流水线的保存的json数据,把里面所有的job的几个信息摘出来,取出每个job的jobName、jobType、categoryId、realJob 内容。 发布于:2022-04-22 19:17 爱上CAD 发布于:2022-02-17 23:03 中国省市区 json 发布于:2021-10-15 13:39 供应商带出币种 发布于:2021-07-23 10:19 拉取采购收货 发布于:2021-07-13 16:14 解析IP地址 发布于:2021-04-12 20:45 OA --> CMDB_DCOS的北向数据 发布于:2021-02-02 15:00 测试json 是否正确 发布于:2021-01-13 11:06 python题库 发布于:2021-01-06 10:31 json 解析 发布于:2020-10-18 15:05 电池图所需数据 发布于:2020-10-08 18:32 新price_bar2 发布于:2020-09-28 09:51 新price_bar 发布于:2020-09-28 15:05 电池图所需数据 发布于:2020-09-20 13:57 电池图所需数据 发布于:2020-09-20 13:57 JSON在线解析,JSON格式化 发布于:2020-09-16 12:10 电池图所需数据 发布于:2020-09-02 11:35 电池图所需数据 发布于:2020-08-25 17:50 建立一个mock测试 json 数据。 发布于:2020-08-22 10:32 地理缩写对照 发布于:2020-07-08 13:28 v2ray-config 发布于:2021-05-11 13:03 JSON在线解析,JSON格式化 发布于:2020-06-20 15:04 [更多]
显示目录

AJAX跨域获取JSON数据



AJAX跨域请求获取JSON数据

我们都知道,AJAX的一大限制是不允许跨域请求。不过通过使用JSONP来实现。JSONP是一种通过脚本标记注入的方式,它是可以引用跨域URL的js脚本,不过需要提供一个回调函数(必须在您自己的页面上),因此,你可以自己处理结果。 本文介绍了JSONP的是怎么在jQuery,MooTools的,Dojo Toolkit中实现的。

jQuery的JSONP

jQuery.getJSON方法:

jQuery.getJSON("http://search.twitter.com/search.json?callback=?",{ 
    q: "Arsenal" 
},function(tweets) { 
    // Handle response here 
    console.info("Twitter returned: ",tweets); 
});

或者:

$.ajax({ 
         type:"get", 
         data:"random="+Math.random(), 
         url:url, 
         dataType:"jsonp", 
         jsonp:"callback", 
         success:function(data){ 
         $.each(data, function(key, val) { 
         $("#myDiv").html($("#myDiv").html()+val.cvalue+"</br>"); 
         }); 
        } 
      }); 

回调方法的参数通过 getJSON 就可以获取到json对象

MooTools JSONP

MooTools 需要 Request.JSONP Class,可以从这里下载MooTools More。选择Request.JSONP

代码如下:

new Request.JSONP({ 
    url: "http://search.twitter.com/search.json", 
    data: { 
        q: "Arsenal" 
    },//提交的参数, 没有参数可以不写 
        callbackKey: 'jsoncallback',//自己定义回调函数的参数名称 
        onComplete: function(tweets) { 
        // Log the result to console for inspection 
        console.info("Twitter returned: ",tweets); 
    } 
}).send(); 

如果自己定义了回调函数的参数名称,跟jquery一样
服务器端需要这样取得:

String callback = request.getParameter("jsoncallback");//取得回调方法名 
        response.setHeader("Cache-Control", "no-cache"); 
        response.setContentType("text/json;charset=UTF-8"); 
        PrintWriter out; 
        try { 
            out = response.getWriter(); 
            out.print(callback+"("+message+")");//这里是关键.主要就是这里 
            out.flush(); 
            out.close(); 
        } catch (IOException e) { 
            e.printStackTrace(); 
        } 

Dojo JSONP

JSONP 在Dojo Toolkit 中需要用上dojo.io.script

// dojo.io.script is an external dependency, so it must be required 
dojo.require("dojo.io.script"); 

// When the resource is ready 
dojo.ready(function() { 

    // Use the get method 
    dojo.io.script.get({ 
        // The URL to get JSON from Twitter 
        url: "http://search.twitter.com/search.json", 
        // The callback paramater 
        callbackParamName: "callback", // Twitter requires "callback" 
        // The content to send 
        content: { 
            q: "Arsenal" 
        }, 
        // The success callback 
        load: function(tweetsJson) {  // Twitter sent us information! 
            // Log the result to console for inspection 
            console.info("Twitter returned: ",tweetsJson); 
        } 
    }); 
}); 

JSONP是一种非常有效的,可靠的,容易实现的远程数据获取方式。JSONP的策略也使开发人员能够避免繁琐的服务器代理方式,很方便的获取数据。

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

客户端代码:

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
  <script type="text/javascript">  
    function jsonpCallback(result) {  
      //alert(result);  
      for(var i in result) {  
        alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
      }  
    }  
    var JSONP=document.createElement("script");  
    JSONP.type="text/javascript";  
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback" rel="external nofollow" ;  
    document.getElementsByTagName("head")[0].appendChild(JSONP);  
  </script>

服务端代码:

<?php  

    //服务端返回JSON数据  
    $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
    $result=json_encode($arr);  
    //echo $_GET['callback'].'("Hello,World!")';  
    //echo $_GET['callback']."($result)";  
    //动态执行回调函数  
    $callback=$_GET['callback'];  
    echo $callback."($result)";
由JSRUN为你提供的JSON在线运行、在线编译工具
        JSRUN提供的JSON 在线运行,JSON 在线运行工具,基于linux操作系统环境提供线上编译和线上运行,具有运行快速,运行结果与常用开发、生产环境保持一致的特点。

title

使用此草稿 删除草稿

  • 00:23
注册登录后可减少验证码的弹出,点击前往 注册 | 登录

皮肤:

运行模式:

嵌入代码 iframe嵌入:


服务器已安装大部分常用的依赖库,但仍会存在一些未被安装的库, 可以通过本窗口立即安装所需依赖库,请确保库名正确,否则无法安装成功。


请输入依赖库的名称:

请选择语言: