Getting Data back from Python with Cherrypy and jQuery/AJAX

Question

Unfortunately i dont get ajax to work properly with cherrypy. Here is my python code:

from mako.template import Template
from mako.lookup import TemplateLookup
import cherrypy
import os
import json

CURDIR = os.getcwd()

cherrypy.config.update({
    "tools.staticdir.root" : CURDIR,
    "tools.staticdir.dir" : "static",
    "tools.staticdir.on" : True
    })

# Loopuoobjekt für die Templates
tmplLookup = TemplateLookup(directories=['templates'])
# Liefert das Gerenderte Template zurück
def serve_template(templatename, **tmpl_vars):
    template = tmplLookup.get_template(templatename)
    return template.render(**tmpl_vars)

class Root(object):
    @cherrypy.expose
    def index(self):
        return serve_template("index.html")

    @cherrypy.expose
        def switch(self, id):
        print("Licht nr {} wurde geschaltet".format(id))
        cherrypy.response.headers["Content-Type"] = "application/json"
        return json.dumps({"text" : "schalter {} ".format(id)})

cherrypy.quickstart(Root())

and Here is my html template:

<html>
<head>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $("button").click(function() {
            $.ajax({
                url: "switch",
                type: "POST",
                data: {id: $(this).attr('id')},
                succes: function(response) {
                    $("#test").html(response);
                } 
            });
        });
    });
    </script>
</head>
<body>
    <h1>Hallo Haus!</h1>
    <button id=1>Licht 1</button> </br>
    <button id=2>Licht 2</button> </br>
    <button id=3>Licht 3</button> </br>
    <button id=4>Licht 4</button>

    <div id=test></div>

</body>
</html>

If i press one of those 4 buttons i get the right id printed in my console. The above example

return json.dumps({"text" : "schalter {} ".format(id)})

is written on the most toturials i found, but unfortunately this gives me an error:

[09/Apr/2014:15:36:57] HTTP Traceback (most recent call last):
File "C:\Python33\lib\site-packages\cherrypy-3.2.4-py3.3.egg\cherrypy\_cprequ
est.py", line 656, in respond
    response.body = self.handler()
  File "C:\Python33\lib\site-packages\cherrypy-3.2.4-py3.3.egg\cherrypy\_cprequ
est.py", line 814, in __set__
raise ValueError(self.unicode_err)
ValueError: Page handlers MUST return bytes. Use tools.encode if you wish to re
turn unicode.

So the data is succesfully send to cherrypy, but i did not get it back. Any help how to get this to work?

I do not know `Python` nor `cherrypy` but I certainly hope you use the **[Network Tab](http://stackoverflow.com/a/21617685/2191572)** for debugging — MonkeyZeus, Apr 09 '14 at 14:31

Andrew Kloos · Accepted Answer · 2014-04-09T15:10:54.917

2

Try adding @cherrypy.tools.json_out() to your switch handler...

import cherrypy
import os
import json

CURDIR = os.getcwd()

cherrypy.config.update({
    "tools.staticdir.dir" : CURDIR,
    "tools.staticdir.on" : True
    })

# Loopuoobjekt für die Templates

# Liefert das Gerenderte Template zurück
class Root(object):
    @cherrypy.expose
    def index(self):
        return """<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
    $("button").click(function() {
        $.ajax({
            url: "switch",
            type: "POST",
            data: {id: $(this).attr('id')},
            success: function(response) {
                alert(response);
                $("#test").html(response);
            } 
        });
    });
});
</script>
</head>
<body>
    <h1>Hallo Haus!</h1>
    <button id=1>Licht 1</button> </br>
    <button id=2>Licht 2</button> </br>
    <button id=3>Licht 3</button> </br>
    <button id=4>Licht 4</button>

    <div id=test></div>

</body>
</html>"""

    @cherrypy.expose
    @cherrypy.tools.json_out()
    def switch(self, id):
        print("Licht nr {} wurde geschaltet".format(id))
        return json.dumps({"text" : "schalter {} ".format(id)})

cherrypy.quickstart(Root())

Hope this helps!

edited Apr 09 '14 at 15:10

answered Apr 09 '14 at 14:04

Andrew Kloos

4,189
4
28
36

Also, you misspelled success in your ajax function. – Andrew Kloos Apr 09 '14 at 14:09
Ok, i got the @cherrypy.tools.json_out() in my code and return the dictionary directly, now im getting another error: TypeError: Chunk '{' is not of type 'bytes'. this is how i return my response: return {"text" : "schalter {} ".format(id) – knusperwurst Apr 09 '14 at 14:23
well you'll still have to keep using json.dumps... return json.dumps({"text" : "schalter {} ".format(id)}) – Andrew Kloos Apr 09 '14 at 14:27
it now ends in TypeError: Chunk '"{\\"text\\": \\"schalter 4 \\"}"' is not of type 'bytes'. – knusperwurst Apr 09 '14 at 14:33
hmmm. what version of python are you using? i'm on 3.2 and it's running correctly for me. I'll edit my answer with the code that's working. – Andrew Kloos Apr 09 '14 at 14:43
Ok, i copied your whole code above, no im getting this error again: File "C:\python33\lib\site-packages\cherrypy-3.2.4-py3.3.egg\cherrypy\_cprequest.py", line 892, in collapse_body raise TypeError("Chunk %s is not of type 'bytes'." % repr(chunk)) TypeError: Chunk '{' is not of type 'bytes'. – knusperwurst Apr 09 '14 at 14:59
weird... it runs for me under python 3.3.3 as well. I'm also on cherrypy 3.2.4 too. Trying setting "tools.encode.encoding": "utf8", in your config update statement. – Andrew Kloos Apr 09 '14 at 15:19
and again: TypeError: Chunk '{' is not of type 'bytes'. I dont understand what could cause this problem... – knusperwurst Apr 10 '14 at 07:58
Ok, i tried your solution on my linux machine and it worked perfectly, thanks you for you patience! – knusperwurst Apr 10 '14 at 09:02

Getting Data back from Python with Cherrypy and jQuery/AJAX

1 Answers1

Linked