js回调函数报错Uncaught SyntaxError: Unexpected token :

发布于
2016-10-22

在用网易云音乐API查询歌曲信息时，可以成功，获取到歌曲id后想用同样的方法获取歌词，但是就报错了，script中的src在地址栏中可以直接返回json数据，但是通过回调函数打印，却报错。
相关js

// 搜索歌词
    var searchLyricBtn = document.getElementById('search-lyric-btn');
    searchLyricBtn.addEventListener('click', function () {
        var musicId = result.getAttribute('data-id');
        
        console.log(musicId);
        var url = "http://music.163.com/api/song/lyric";
        var data = {
            "id": musicId,
            "lv": -1,
            "kv": -1,
            "tv": -1,
            "callback": "jsonplyriccallback"
        }
        var buffer = [];
        for (var key in data) {
            buffer.push(key + '=' + encodeURIComponent(data[key]));
        }
        var fullpath = url + "?os=pc&" + buffer.join('&');
        CreateScript(fullpath);

    });
    function CreateScript (src) {
        var el = document.createElement('script');
        el.src = src;
        el.async = true;
        el.defer = true;
        document.body.appendChild(el);
    };
    // 歌词搜索回调
    function jsonplyriccallback (rs) {    
        console.log('回调成功');    
    };

对json和jsonp的回调格式不是很清楚。
测试id可以用287035 歌曲《遇见》的
测试src直接地址栏形式返回

成功的歌曲的src直接地址栏形式返回

貌似后面这个自动多了一个回调函数包装。
求大神解答~。

javascript json jsonp

阅读 5.5k

3 个回答

灰色v碰触

✓ 已被采纳

经过测试，这个链接：
http://music.163.com/api/song/lyric?os=pc&id=287035&lv=-1&kv=-1&tv=-1&callback=jsonplyriccallback
中 &callback=jsonplyriccallback 应该是你自己加上去的吧。

因为 http://music.163.com/api/song/lyric 所对应的后台的服务器端脚本只是单纯的输出，并不支持回调（或者你不知道他的回调的api名称，格式）。

因为是单纯的输出字符串,所以，但凡使用 script 的 src 标签来加载，都会报错的，因为这样做：

<script src='http://music.163.com/api/song/lyric?os=pc&id=287035&lv=-1&kv=-1&tv=-1&callback=jsonplyriccallback`
中 `&callback=jsonplyriccallback'></script>

等src加载完毕后，服务端输出的字符串会直接写入script标签中，等价于：

<script src='http://music.163.com/api/song/lyric?os=pc&id=287035&lv=-1&kv=-1&tv=-1&callback=jsonplyriccallback`
中 `&callback=jsonplyriccallback'>
{"sgc":true,"sfy":false,"qfy":false,"lrc":{"version":17,"lyric":"[00:00.00] 作曲 :....}
</script>

所以才会报错。

若想解决这个问题，若是你会 php 的话，用 curl 来模拟请求，来后自己写一个简单的控制脚本，其他类型的服务器语言我不会，就给个php的范例吧：

如：

server.php:
$curl = curl_init();
$url = $_GET['url'];
curl_setopt($curl , CURLOPT_URL , $url);
curl_setopt($curl , CURLOPT_RETURNTRANSFER , true);
$rel = curl_exec($curl);
curl_close($curl);
print_r($rel);

front.js:
var path = 'server.php';
var queryString = 'url=http://music.163.com/api/song/lyric?os=pc&id=287035&lv=-1&kv=-1&tv=-1';
var xhr = new XMLHttpRequest();
   xhr.open(path , queryString , true);
   xhr.onreadystatechange = function(){
     if (this.readyState === 4 && this.status === 200) {
       console.log('抓取到的数据：' , xhr.responseText);
     }
   }
   xhr.send(null);