关于json的一些事

最新推荐文章于 2021-09-16 09:05:50 发布

live4what

最新推荐文章于 2021-09-16 09:05:50 发布

阅读量609

点赞数

分类专栏： 7.PHP

本文链接：https://blog.csdn.net/whyistao/article/details/26230177

版权

7.PHP 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

因为平时老是接触它，但是又不是很了解，所以整理一下

关于json的格式

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 标题 </title>
</head>
<body>

<script type="text/javascript">
    
    //定义一个json  相当于定义了一个对象名 以及 它的属性
    // { 键值对,  键值对 }
    var json1 =  { 'key1':123 , 'key2':'stringvvv' } ;
    document.write( json1.key1  +  "<br>" );
    document.write( json1.key2  +  "<br>" );
    
</script>

<br>----------------------------------<br>

<script type="text/javascript">
    
    //键值对中， 值不仅仅可以是数字或字符串， 还可以是另一个json
    var json2 = { 'key1':123, 'key2':{ 'key21':12312, 'key22':'sssss' } };
    document.write( json2.key1 +  "<br>" );
    document.write( json2.key2 +  "<br>" );
    document.write( json2.key2.key21 +  "<br>" );
    document.write( json2.key2.key22 +  "<br>" );
    
</script>

<br>----------------------------------<br>


<script type="text/javascript">
    
    //键值对中， 值不仅仅可以是数字或字符串或json， 还可以是一个json数组，用[]包起来
    var json3 = { 'key1':123, 'key2':{ 'key21':12312, 'key22':'sssss' }, 
                  'key3':[ {'key33':123,'key44':456 },
                           {'key33':123,'key44':456},
                           {'key33':123,'key44':456} 
                         ] 
                };

    document.write( json3.key3[0]  +  "<br>" );
    document.write( json3.key3[0].key33 +  "<br>" );
    document.write( json3.key3[0].key44 +  "<br>" );
    
    document.write( json3.key3[1]  );
    
</script>

</body>
</html>

如何用Javascript获取远程json

情况1:

以股票行情接口为例

如果要获得 http://hq.sinajs.cn/rn=61fdj&format=text&list=stock_sh_up_5min_20 输出的数据

打开链接，可以看到输出的是 stock_sh_up_5min_20 = ...

也就是说服务器返回的是一段js代码，所以我们在本地建立一个<script></script>，并把src等于上面的这个链接，像这样:

那么就相当于得到了里面的数据(虽然里面的变量不是我们定义的，但是加了这段script，就相当于我们定义了这些变量，脚本里也多了这些变量)，然后就可以使用它们了，像这样:

类似的，还有这个

情况2:

情况1中由于服务器已经插入了 var 变量 = xxxx , 所以可以直接操作变量

而对于这种 https://data.btcchina.com/data/ticker?market=btccny 输出的是标准的json格式

{
　　"ticker": {
　　　　　　"high": "2894.97",
　　　　　　　 "low": "2850.08",
　　　　　　　 "buy": "2876.92",
　　　　　　　 "sell": "2883.80",
　　　　　　　 "last": "2875.66",
　　　　　　　 "vol": "4133.63800000",
　　　　　　　 "date": 1396412995
　　　　　　 }
}

可以使用 jquery为我们提供的跨域获取json的getJSON()函数

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 标题 </title>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
</head>
<body>

<script type="text/javascript">
  
  var url = "https://data.btcchina.com/data/ticker?market=btccny";
  $.getJSON( url, function(data){
      
        document.write( data + "<br>" );
        document.write( data.ticker + "<br>" );
        document.write( data.ticker.high + "<br>" );
        document.write( data.ticker.sell + "<br>" );
        
  } );    

</script>
</body>
</html>

情况3:

这个链接 http://q.stock.sohu.com/app1/stockSearch?method=search&callback=searchBox.output&type=all&keyword=60

返回的是一个js代码，开头的searchBox.output是一个回调函数，我们可以通过修改callback参数来自定义我们的回调函数

http://q.stock.sohu.com/app1/stockSearch?method=search&callback=output&type=all&keyword=60

根据返回的数据格式，我们先定义好一个函数

function output(json) { alert(json.result) }

然后用<script></script>的src把上面的网址引进去，同时js为我们提供了createElement()方法可以动态创建一个<script></script>

最后代码如下:

//输出远程传回来的股票代码 输入提示
    function output(json) {
            
            var result = json.result;
            //for( var row in result) {
                $('.codesuggest').html( result.toString() );
            //}
            
    }


    //根据src创建相应的script
    function addScriptTag(src){
         var script = document.createElement('script');
              script.setAttribute("type","text/javascript");
             script.src = src;
             document.body.appendChild(script);
       }
 
     //输入框输入股票代码,把代码加进src
     $('.codesearch').keyup(function(){

             var src = $(this).val().toString();
             if( src.length  ) {
                 src = "http://q.stock.sohu.com/app1/stockSearch?method=search&callback=output&type=cnsi&keyword=" + src;
                 addScriptTag(src);
             }
   
     });

情况4:

这个链接 http://vip.stock.finance.sina.com.cn/quotes_service/api/json_v2.php/Market_Center.getSymbolGN?symbol=sh600048

让我头疼了很久，是一个 [] 包起来的json数组

尚未解决，求指导