Django simpleJSON jQuery.parseJSON无效标签

时间:2011-04-07 09:25:24

标签: javascript jquery django json simplejson

我在django中有以下视图

def playingNow(request,playlist_id):
    from django.db import connection
    cursor = connection.cursor()

    sql =   "SELECT id, timestamp, song_played_id, playlist_from_id, now() - timestamp as timepassed FROM music_song_played \n"\
            "WHERE playlist_from_id = %s \n"\
            "ORDER by timepassed ASC \n"\
            "LIMIT 1;"
    cursor.execute(sql,[playlist_id])
    data = cursor.fetchall()
    songPlaying = get_object_or_404(song, id = data[0][2])
    playing = {}
    playing["song"] = unicode(songPlaying)
    playing["licensed"] = "Licensed by "
    return HttpResponse(simplejson.dumps(playing), content_type ="application/javascript; charset=utf8")

和以下模板

{% block content %}

<script type='text/javascript' src='/media/inthebackground-utils.js'></script>
<script type='text/javascript' src='/media/jwplayer/swfobject.js'></script>
<script type='text/javascript' src='/media/jwplayer/jwplayer.min.js'></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-latest.pack.js'></script>
<script type='text/javascript' src='/media/jquery.periodicalupdater.js'></script>
<script type="text/javascript">
  var data = new Object();
</script>


  <div id="StationName">Your Listening to: {{ station.name }} </div>
  <div id="playingNow-{{ station.name }}"></div>
  <div id='padder{{ station.name }}' style="height:20px; float left"></div>
  <div id='mediaspace-{{ station.name }}'"><p> You dont have adobe flash player installed. Please download and install from <a href="http://get.adobe.com/flashplayer">here</a> </div>

  <script type="text/javascript">

    data.{{ station.name }} = {'userid':'{{ user.pk }}', 'playlist' : '{{ station.pk }}'};

    $.PeriodicalUpdater('/music/playingNow/{{ station.pk }}/',
                    {method: 'get'}, 
                    function(remoteData, success, xhr, handle)
                    {

                      jQuery.parseJSON(remoteData);
                      console.log(typeof(remoteData));
                      console.log(remoteData);
                      licenceDiv = '<div id="licence">'+remoteData.license +'</div>';
                      songDiv = '<div id="licence">'+remoteData.song +'</div>';
                      contDiv = '<div id="playingNow-{{ station.name }}">' + songDiv + licenceDiv +'</div>';
                      $('#playingNow-{{ station.name }}').replaceWith(contDiv);
                      jwplayer('mediaspace-{{ station.name }}').play(true);
                     });

    jwplayer('mediaspace-{{ station.name }}').setup({
      flashplayer: "/media/jwplayer/player.swf",
      file: "{{ station.url }}?{{ cacheBuster }}",
      height: 20,
      width: 300,
      controlbar: "bottom",
      provider: "sound",
      duration: "0",
      events: {
        onPlay: function(event){play(data.{{ station.name }});},
        onPause: function(event){pause(data.{{ station.name }});}
        }
     });

     $(window).unload( function () { pause(data.{{ station.name }} ); } );
  </script>


{% endblock %}

periodicalUpdater触发并执行get时,它从视图函数中获取json作为字符串,这意味着我可以像普通的json结构一样访问它。当我尝试执行jQuery.parseJSON时,firefox firebug会抛出“无效标签”错误。我在几个地方读过这可能是因为jquery期待的是期待JSONP而不是JSON。但我不知道如何解决这个问题。

有什么想法吗?

干杯

标记

1 个答案:

答案 0 :(得分:0)

尝试:

...
$.PeriodicalUpdater('/music/playingNow/{{ station.pk }}/',
                {method: 'get',
                 type: 'jsonp'}, 
                function(remoteData, success, xhr, handle) ...

那应该告诉ajax调用使用jsonp。

注意:作为免责声明,我实际上并没有使用过这个库,但我对此进行了调查,因为我自己对jQuery自动更新程序很感兴趣。看看这里的文档:

https://github.com/RobertFischer/JQuery-PeriodicalUpdater/

我们可以看到它使用常规的jQuery Ajax调用,您可以为PeriodicalUpdater指定参数,然后将其传递给Ajax调用。 PeriodicalUpdater中的type字段似乎等同于jQuery ajax调用中的dataType字段,其中的文档位于此处:

http://api.jquery.com/jQuery.ajax/