Page hangs on Ajax request to GAE

Question

I've created a page that interacts with an app written with Python on GAE, to return JSON data (via JSONP, because Cross-origin stuff). However, no matter what method I use, the page always hangs and data never actually makes it to the screen. It runs just fine if I request the stuff by typing the appspot URL into my address bar, though.

Here's the main part of le code.

Python main.py (on GAE)

def retrieve_data(self):
    # Retrieve data from some API, manipulate and return result.

# Note: I'm not using this handler for the request.
# It's just there in case I need it.
class MainHandler(webapp2.RequestHandler):
    def get(self):
        data = retrieve_data(self)
        self.response.headers["Content-Type"] = "application/json"
        self.response.out.write(
            json.dumps(data)
        )

# I'm using this handler for the JSONP request.
class JSONPHandler(webapp2.RequestHandler):
    def get(self):
        data = retrieve_data(self)
        self.response.headers["Content-Type"] = "application/json"
        self.response.out.write(
            "%s(%s)" %
            (urllib2.unquote(self.request.get("callback")),
            json.dumps(data))
        )

app = webapp2.WSGIApplication([
    ('/', MainHandler),
    ('/jsonp', JSONPHandler)
], debug=True)

index.js (Not hosted on GAE)

function add(data) {
    // Sort data, add to DOM.
}

$.ajax({
    type: "GET",
    dataType: "jsonp",
    url: "(APPSPOT URL)/jsonp",
    success: function(data) { add(data) }
});

I've also tried $.get, creating a script tag with a src pointing to the appspot link, and other XMLHTTPRequest methods people described, but none seem to work. If I tell success to just console.log the data, it will do so after a few seconds of running.

So, is there something wrong with the code? Am I missing something in main.py, or am I AJAXing it wrong?

Can you console.log() inside index.js? Are you getting a 400? — GAEfan, Sep 03 '16 at 16:03
You stated that you are getting the proper result if you log in `success`. Try logging inside `function add(data)` — GAEfan, Sep 03 '16 at 16:11
@GAEfan Logging sorta works in the `add` function. It gets returned to the console, but I can't expand it and see the data it returns, and the page still hangs. This isn't the case for logging in `success`, though. It seems to work properly if I do that. — yugottabesssoooruude, Sep 03 '16 at 17:23
Sounds like your problem is in handling a jsonp object in your html `add(data)`: http://stackoverflow.com/questions/5943630/basic-example-of-using-ajax-with-jsonp — GAEfan, Sep 03 '16 at 17:37

score 0 · Answer 1 · answered Sep 03 '16 at 14:10

I used this code to receive cross-origin json request POST data in my webapp2 handler:

def options(self):
    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Access-Control-Allow-Headers'] = '*'
    self.response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'

def post(self):

    self.response.headers['Access-Control-Allow-Origin'] = '*'
    self.response.headers['Access-Control-Allow-Headers'] = '*'
    self.response.headers['Access-Control-Allow-Methods'] = 'POST, OPTIONS'

    data = self.request.body
    args = json.loads(data)

Page hangs on Ajax request to GAE

1 Answers1