retrieving data from python bottle using ajax jquery

Question

I am trying an html page to interact with a python script which returns a json string, using ajax/jquery. I installed bottle for the basic functionality of url routing.

The problem is that my browser shows that my ajax script is recieving a content-length of 5 (which is the string "tring" (see server.py function showAll()) but somehow its not stored in the variable result(see function loader in script.js) and hence I cannot use the returned data.

can anyone tell me what is going wrong..

my html file looks like

index.html

<!DOCTYPE>
<html>
    <head>
        <title>
            magpie
        </title>
        <script type="text/javascript" src="js/script.js"></script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">loader();</script>
    </head>
    <body>
        <div id="main"></div>
    </body>
</html>

If I call load() instead of loader() in this file the content is displayed.

the ajax script:

script.js

function loader()
{
    $(document).ready(function(){
        $.get('http://[localhost]:1111/', function(result){
            alert('success');
            $('#main').html(result);
        });
    });
}

function load()
{
    $(document).ready(function () {
        $.getJSON('data.json', function (data) {
            var output = '';
            $.each(data, function(key, val) {
                output += '<h3>' + val.device + '  ' + val.status + '</h3>';
            })
            $('#main').html(output);
        });
    });
}

the two python scripts are :

server.py

from bottle import get, post, request, run, response
import devices

@get('/')
def showAll():
    # return devices.data
    return "tring"

@post('/act')
def act():
    deviceId = request.forms.get('deviceId')
    devices.changeState(deviceId)
    return

run(host = "[localhost]", port = 1111)

devices.py

import json

data = json.load(open('data.json', 'r+'))
nos = len(data) # Number of devices

def changeState(id):
    state = data[id]['status']
    if state == 'on':
        data[id]['status'] = 'off'
    else:
        data[id]['status'] = 'on'

    json.dump(data, open('data.json', 'w'))

    return 1

and finally my json file(if it matters):

{"B1": {"device": "fan", "status": "on"}, "B3": {"device": "light", "status": "off"}, "B2": {"device": "fan", "status": "on"}}

Loading http://[localhost]:1111/ in browser shows the returned string "tring".Also the page loads only in firefox while other browsers show some allow-acces-origin error.

This is a screenshot of my browser :

enter image description here

score 3 · Answer 1 · answered Jan 16 '14 at 11:32

3

how is your browser recieving "tring" when you are returning "string" from your python script.

I think you will have to set

accessControlAllowCredentials true

I suppose

answered Jan 16 '14 at 11:32

user3202272

35
5

oh yes I had changed the "string" to "tring" just in case there is some keyword problem or something...edited it now..thanks for pointing out. – akki Jan 16 '14 at 11:33
1

This is a great point, but it should be a comment on the original post rather than an answer. – ron rothman Jan 17 '14 at 06:11
@ron.rothman sorry for that..but I dont have the minimum privileges required to do comment on a question – user3202272 Jan 18 '14 at 13:18

score 0 · Answer 2 · answered Jan 17 '14 at 06:10

0

Your server is not returning json; it's returning text/html.

Instead of this:

return "tring"

return a dict, like this:

return {"result": "tring"}

answered Jan 17 '14 at 06:10

ron rothman

17,348
7
41
43

that would have been the case if I would have been returning json, the problem is that it my ajax is not recieving any type of data leave json type..Thanks anyways. – akki Jan 17 '14 at 12:11
1

yes, i was about to suggest that you look at CORS (http://stackoverflow.com/q/17262170/593047), but i see you found the solution yourself. cool--cheers. – ron rothman Jan 17 '14 at 20:56

akki · Accepted Answer · 2014-04-21T10:27:12.917

I had to enable the accessControlAllowOrigin header (thanks to @user3202272, I got the hint from your answer).

Added a few lines to my server.py file and that was it.

Now it looks like

server.py

from bottle import Bottle, request, response, run
import devices

app = Bottle()

@app.hook('after_request')
def enable_cors():
    response.headers['Access-Control-Allow-Origin'] = '*'

@app.get('/')
def show():
    return devices.data
    # return "tring"

@app.post('/act')
def act():
    deviceId = request.forms.get('deviceId')
    devices.changeState(deviceId)
    return

app.run(host = "0.0.0.0", port = 1111)

So basically the problem was with the CORS. You can read more about it here https://gist.github.com/richard-flosi/3789163

Bottle Py: Enabling CORS for jQuery AJAX requests

thanks to everyone..!! :D

retrieving data from python bottle using ajax jquery

3 Answers3