解析json文本，然後將其顯示在網頁上

Question

我正在使用StreamOn，一個流式音頻提供程序來爲在線廣播電臺分發我的音頻流。他們使當前「正在播放」的歌曲信息在其服務器上可用（它們向我提供包含此信息的URL）。這是當我去到URL所顯示的數據：

{ 
    "interval": { 
    "id": 0, 
    "starts_at": 1306738563270, 
"ends_at": 1306738735270 
    }, 
    "identifier": "Music-FS680", 
    "category": "music", 
    "original_category": "Music", 
    "buy_link": "", 
    "title": "I'm That Kind of Girl", 
    "artist": "Patty Loveless", 
    "album": "On Down the Line", 
    "publisher": "UMG Recordings, Inc.", 
    "itunes_song_id": "1290089", 
    "album_art": { 
    "src": "http://www.streamon.fm/player/getAlbumArt.php?u=http://a6.mzstatic.com/us/r1000/016/Features/20/41/7b/dj.twfxwryv.170x170-75.jpg", 
    "width": 170, 
    "height": 170, 
    "alt": "On Down the Line", 
    "link": "" 
    }, 
    "next_song": "Little Bitty by Alan Jackson", 
    "next_buy_link": "", 
    "next_album_art": { 
    "src": "http://www.streamon.fm/player/getAlbumArt.php?u=http://a5.mzstatic.com/us/r1000/025/Features/b5/cb/0b/dj.frlbluta.170x170-75.jpg", 
    "width": 170, 
    "height": 170, 
    "alt": "Everything I Love", 
    "link": "" 
    }, 
    "banner": { 
    "src": "", 
    "width": 0, 
    "height": 0, 
    "alt": "", 
    "link": "" 
    } 
} 

我需要採取動態數據，並清晰地在我的主頁顯示它，使它看起來像這樣：

Title: I'm That Kind of Girl 
Artist: Parry Loveless 
Album: On Down the Line 

我知道這是文本解析，但我似乎無法弄清楚我需要使用什麼類型的文本解析方法。

Answer 1

這是JSON。各種語言解析器可在http://json.org/

GoDaddy支持PHP作爲服務器端語言。從外部服務器解析JSON響應的一種快捷方式。用.php擴展（如currently_playing.php）保存下面的代碼：

<?php 
// retrieve the contents of the URL 
$ch = curl_init('http://wtsh.streamon.fm/card'); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
$res = curl_exec($ch); 
curl_close($ch); 
// parses the HTTP response and checks if the title exist 
if (($json = json_decode($res)) && $json->title) { 
    echo 'Title: ' . htmlspecialchars($json->title) . '<br>'; 
    echo 'Artist: ' . htmlspecialchars($json->artist) . '<br>'; 
    echo 'Album: ' . htmlspecialchars($json->album) . '<br>'; 
} else { 
    echo 'No information available, please check again later'; 
} 
?> 

通常情況下，你會做的結果，一些緩存，更新歌曲信息每10秒應該罰款。

看起來響應包含歌曲結束時間的數據（以毫秒爲單位）。那麼更好的方法是檢查這個時間是否已經過去，如果是，則更新緩存。

<?php // filename: current_song.php 
$json = null; 
$cache = 'song.json'; 
// if a cache exists and the time has not passed, use it 
if (file_exists($cache)) { 
    $json = json_decode(file_get_contents($cache)); 
    if ($json->interval && $json->interval->ends_at/1000 < time()) { 
     // expired, discard json 
     $json = null; 
    } 
} 
// if there is no usuable cache 
if (!$json) { 
    // retrieve the contents of the URL 
    $ch = curl_init('http://wtsh.streamon.fm/card'); 
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); 
    $res = curl_exec($ch); 
    curl_close($ch); 
    $json = json_decode($res); 
    // if the title exists, assume the result to be valid 
    if ($json && $json->title) { 
     // cache it 
     $fp = fopen('song.json', 'w'); 
     fwrite($fp, $res); 
     fclose($fp); 
    } else { 
     $json = null; 
    } 
} 
if ($json) { 
    $info = array(); 
    // contains the time in milliseconds 
    $info['wait_ms'] = $json->interval->ends_at - 1000 * microtime(true); 
    $info['title'] = $json->title ; 
    $info['artist'] = $json->artist; 
    $info['album'] = $json->album ; 
    $info['image'] = $json->album_art; 
    // display a JSON response for the HTML page 
    echo json_encode($info); 
} 
?> 

將它嵌入在HTML頁面，使用：

<img id="song_image"><br> 
Title: <span id="song_title">-</span><br> 
Artist: <span id="song_artist">-</span><br> 
Album: <span id="song_album">-</span> 
<script> 
(function() { 
    // we need a JSON parser, if it does not exist, load it 
    if (typeof JSON == "undefined") { 
     var s = document.createElement("script"); 
     // json2.js retrieved from https://github.com/douglascrockford/JSON-js 
     s.src = "json2.js"; 
     document.getElementsByTagName("head").appendChild(s); 
    } 
})(); 
var song_ends = 0; 
function update_song() { 
    if ((new Date).getTime() < song_ends) { 
     // use cached result as the song has not ended yet 
     return; 
    } 
    var req = new XMLHttpRequest(); 
    // IE compatbility: 
    var textContent = 'textContent' in document ? 'textContent' : 'innerText'; 
    req.onreadystatechange = function() { 
     if (req.readyState == 4) { 
      var song = JSON.parse(req.responseText); 
      if (song.title) { 
       var img = document.getElementById("song_image"); 
       img.alt = song.image.alt; 
       img.src = song.image.src; 
       img.width = song.image.width; 
       img.height = song.image.height; 
       document.getElementById("song_title")[textContent] = song.title ; 
       document.getElementById("song_artist")[textContent] = song.artist; 
       document.getElementById("song_album")[textContent] = song.album ; 
       // store the end date in javascript date format 
       song_ends = (new Date).getTime() + song.wait_ms; 
      } 
     } 
    }; 
    req.open('get', 'current_song.php', true); 
    req.send(null); 
} 
// poll for changes every second 
setInterval(update_song, 1000); 
// and update the song information 
update_song(); 
</script> 

Answer 2

這是JSON解析，而不是文本解析。根據您用來解碼JSON的語言，您可以使用一些現成功能以非常簡單直接的方式獲取所需的值。

在PHP中，你可以使用json_decode功能

在JavaScript中，JSON是本地的，看here如何訪問您的數據成員