admin管理员组

文章数量:1335608

I want to render json file to html script part. In the tornado part, No1 is sendering json data to html. And, No2 part is received the json data from No1. However this code is not working. I found that html script doesn't allow the form of {{ }}. How I send the json data to part of html ?

[ python - tornado part ]

import tornado.web
import tornado.httpserver
import tornado.ioloop
import os.path
from tornado.options import define, options
define("port", default=3000, help="run on the given port", type=int)

class Application(tornado.web.Application):
    def __init__(self):
        base_dir = os.path.dirname(__file__)
        settings = {
        }
        tornado.web.Application.__init__(self, [
            tornado.web.url(r"/", MainHandler, name="main"),
        ], **settings)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        data = {"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}

        self.render("index.html", data=data)                        #No1

def main():
    tornado.options.parse_mand_line()
    Application().listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":
    main()

[ html part ]

<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
/* var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}'; */

var text = '{{data}}';                                          /*No2*/
var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>

I want to render json file to html script part. In the tornado part, No1 is sendering json data to html. And, No2 part is received the json data from No1. However this code is not working. I found that html script doesn't allow the form of {{ }}. How I send the json data to part of html ?

[ python - tornado part ]

import tornado.web
import tornado.httpserver
import tornado.ioloop
import os.path
from tornado.options import define, options
define("port", default=3000, help="run on the given port", type=int)

class Application(tornado.web.Application):
    def __init__(self):
        base_dir = os.path.dirname(__file__)
        settings = {
        }
        tornado.web.Application.__init__(self, [
            tornado.web.url(r"/", MainHandler, name="main"),
        ], **settings)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        data = {"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}

        self.render("index.html", data=data)                        #No1

def main():
    tornado.options.parse_mand_line()
    Application().listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":
    main()

[ html part ]

<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
/* var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}'; */

var text = '{{data}}';                                          /*No2*/
var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>

</body>
</html>
  • javascript
  • python
  • html
  • json
  • tornado
Share Improve this question edited Jul 27, 2016 at 2:12 Christian Ternus 8,48226 silver badges39 bronze badges asked Jul 27, 2016 at 1:15 spritecodejspritecodej 4591 gold badge4 silver badges13 bronze badges 2
  • What is the error message or output you are getting? – Michael Robellard Commented Jul 27, 2016 at 1:42
  • @MichaelRobellard Just output is not appear. ): – spritecodej Commented Jul 27, 2016 at 2:03
Add a ment  | 

2 Answers 2

Reset to default 5

The {{ }} in your index.html template will be autoescaped for html. You want raw output because in this case you're outputting javascript rather than html. You also want to make sure you're actually letting python convert your data object to correctly formatted json.

Import the json library and add a call to json.dumps to get correctly formatted JSON:

import tornado.web
import tornado.httpserver
import tornado.ioloop
import os.path
import json

from tornado.options import define, options
define("port", default=3000, help="run on the given port", type=int)

class Application(tornado.web.Application):
    def __init__(self):
        base_dir = os.path.dirname(__file__)
        settings = {
        }
        tornado.web.Application.__init__(self, [
            tornado.web.url(r"/", MainHandler, name="main"),
        ], **settings)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        data = {"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}

        self.render("index.html", data=json.dumps(data))

def main():
    tornado.options.parse_mand_line()
    Application().listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":
    main()

And use raw to prevent the html auto-escaping output in your template:

<!DOCTYPE html>
<html>
<body>
<h2>JSON Object Creation in JavaScript</h2>
<p id="demo"></p>
<script>
/* var text = '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}'; */

var text = '{% raw data %}';
var obj = JSON.parse(text);

document.getElementById("demo").innerHTML =
obj.name + "<br>" +
obj.street + "<br>" +
obj.phone;
</script>
<body>
</body>
</html>

The key point is that string will be autoescaped by template engine. So we need to decode it before parsing it as a json.

{% raw %} directive mentioned by @clockwatcher is one solution. But it may cause error if the variable text is double-quoted since json.dumps(data) will use double quotation marks in its output.

Therefore, a possible better solution is to unescape text.

import tornado.web
import tornado.httpserver
import tornado.ioloop
import os.path
import json
from tornado.options import define, options

define("port", default=3000, help="run on the given port", type=int)

class Application(tornado.web.Application):
    def __init__(self):
        base_dir = os.path.dirname(__file__)
        settings = {
        }
        tornado.web.Application.__init__(self, [
            tornado.web.url(r"/", MainHandler, name="main"),
        ], **settings)

class MainHandler(tornado.web.RequestHandler):
    def get(self):
        data = {"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}
        self.render("index.html", data=json.dumps(data))

def main():
    tornado.options.parse_mand_line()
    Application().listen(options.port)
    tornado.ioloop.IOLoop.instance().start()

if __name__ == "__main__":
    main()

<!DOCTYPE html>
<html>
  <body>
    <h2>JSON Object Creation in JavaScript</h2>
    <p id="demo"></p>
    <script>
      String.prototype.unescapeHtml = function () {
          var temp = document.createElement("div");
          temp.innerHTML = this;
          var result = temp.childNodes[0].nodeValue;
          temp.removeChild(temp.firstChild);
          return result;
      }

      var text = '{{data}}';
      var obj = JSON.parse(text.unescapeHtml());

      document.getElementById("demo").innerHTML =
          obj.name + "<br>" +
          obj.street + "<br>" +
          obj.phone;
    </script>
  </body>
</html>

The snippet of function unescapeHTML es from JavaScript: how to unescape HTML entities.

本文标签： javascriptpython tornado json render to html scriptStack Overflow

版权声明：本文标题：javascript - python tornado json render to html script - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742392656a2466296.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。