zoukankan      html  css  js  c++  java
  • Javascript getJSON issue using Django callback

    am trying to make a call with this script, but am getting a "Uncaught SyntaxError: Unexpected token :"

    I can't figure out where I'm going wrong, I don't know if it's something with my callback. I am sending a valid JSON packet so I don't think that's the issue. Anyway, here's my html/jquery call:

    <script>
    function loadJSON(){
        $
    .getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?",function(data){
                alert
    ('hey');
                 $
    ('result').append(data);
                 alert
    ('hey 2');
             $
    .each(data,function(i, json){});

       
    });
        alert
    ('hey 3');
    }
    </script>

    With this corresponding function in my django view:

    def tonight_mobile(request):

        callback
    = request.GET.get('callback','')

       
    def with_rank(rank, place):
           
    return(rank >0)

        place_data
    = dict(
           
    Places=[make_mobile_place_dict(request, p)for p inPlace.objects.all()]
       
    )

        xml_bytes
    = json.dumps(place_data)
       
    returnHttpResponse(xml_bytes, content_type='application/json; charset=utf-8')

    Here is my request being logged by my server (so I know its at least getting that far with a OK status code):

    "GET /api/0.1/tonight-mobile.json&callback=jsonp1293142434434 HTTP/1.1"200167

    Displaying this error in my javascript console:

    UncaughtSyntaxError:Unexpected token : tonight-mobile.json&callback=jsonp1293142434434:1

    If you need to see my JSON format (if that is what's causing this) please let me know and I can post it too.

    Thank you in advance for your help!


    UPDATE:

    Here's the response coming from my server:

    {"Places":[{"url":"http://localhost:8000/api/0.1/places/1.plist","image_url":"http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif","name":"Boo's Place"}]}
    [23/Dec/201017:37:22]"GET /api/0.1/tonight-mobile.json&callback=jsonp1293147441552 HTTP/1.1"200167

    UPDATE 2:

    I've managed to get my callback working correctly! Here's the code:

    Client side:

    <script>
    function loadJSON(){
        $
    .getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", logIt(data));
    }
    function logIt(data){
        window
    .console && console.log(data);
        alert
    ('yay!');
    }
    </script>

    Server side:

    def tonight_mobile(request):
        callback
    = request.GET.get('callback','logIt')

       
    def with_rank(rank, place):
           
    return(rank >0)

        place_data
    = dict(
           
    Places=[make_mobile_place_dict(request, p)for p inPlace.objects.all()]
       
    )

        xml_bytes
    = json.dumps(place_data)

       
    if callback:
            xml_bytes
    ='%s(%s)'%(callback, xml_bytes)
       
    print xml_bytes

       
    returnHttpResponse(xml_bytes, content_type='application/javascript; charset=utf-8')

    This returns the following response:

    logIt({"Places":[{"url":"http://localhost:8000/api/0.1/places/1.plist","image_url":"http://localhost:8000/static/place_logos/Tsonoqua_Mask.gif","name":"Boo's Place"}]})

    Is this how it should function? It seems I should be able to simplify the getJSON call... I just want to make sure I've done everything I need to correctly with my callback before I continue forward parsing the response and setting them to elements on the page.


    UPDATE 3*

    So, I've made quite some progress!! I'm using Jquery mobile, so ignore some of the following overdone css, its not related to the core issue.

    I'm having a problem looping over the "Places" in my JSON packet. I am getting a response with multiple "Places", but can't seem to figure out how to iterate over them. My 'i' variable in my each loop is working correctly for the first element, and displaying its corresponding name & image.

    My getJSON and callback method have evolved into this:

    <script>
    function loadJSON(){
        $
    .getJSON("http://localhost:8000/api/0.1/tonight-mobile.json&callback=?", callback(data));
    }
    function callback(data){
        $
    ("#tonight-list").each(data.Places,function(i){
            $
    (this).append("<li role='option' tabindex='"+ data.Places[i]+"' class='ui-li-has-thumb ui-li ui-btn ui-btn-icon-right ui-corner-top ui-corner-bottom ui-controlgroup-last ui-btn-down-c ui-btn-up-c' data-theme='c'><div class='ui-btn-inner ui-corner-top ui-corner-bottom ui-controlgroup-last'><span class='ui-icon ui-icon-arrow-r'></span><div class='ui-btn-text'><img src="+ data.Places[i].image_url +" alt="+ data.Places[i].name +" class='ui-li-thumb ui-corner-tl ui-corner-bl'/><h1 class='list-title ui-li-heading' id='list-title'><a href='detail.html?id=slide' data-transition='slide' class='ui-link-inherit'>"+ data.Places[i].name +"</a></h1><span class='ui-li-count ui-btn-up-c ui-btn-corner-all'>"+ data.Places[i].events +" events</span></div></div></li>");
       
    });

    }
    </script>

    Here's my response:

    callback({"Places":[{"url":"http://localhost:8000/api/0.1/places/3.plist","image_url":"http://localhost:8000/static/place_logos/Bengals_1.png","name":"Big 12","events":2},{"url":"http://localhost:8000/api/0.1/places/2.plist","image_url":"http://localhost:8000/static/place_logos/Makonde_Mask.gif","name":"Harpo's","events":0},{"url":"http://localhost:8000/api/0.1/places/1.plist","image_url":"http://localhost:8000/static/place_logos/Quintons_1.png","name":"Quinton's","events":1}]})

    Am I confusing how the each function iterates over the JSON (which become) Javascript objects? I am pretty sure the each is my issue here, as I am only getting the FIRST element of the "Places" list. Can someone please help me out?

  • 相关阅读:
    flask 实现增删改查
    juniper srx系列配置端口映射 转载
    form(form基础、标签渲染、错误显示 重置信息、form属性、局部钩子、全局钩子)
    postfix “ Sender address rejected: not logged in”
    Python 学习博客地址
    分页器(分页器基本操作、点击按钮分页、美化分页器)
    yuan先生博客地址
    Ajax(form表单文件上传、请求头之contentType、Ajax传递json数据、Ajax文件上传)
    Mysql容器启动失败-解决方案
    Ajax(简介、基础操作、计算器,登录验证)
  • 原文地址:https://www.cnblogs.com/mfryf/p/2347937.html
Copyright © 2011-2022 走看看