2016-07-27 11 views
0

jsonファイルをhtmlスクリプトパートにレンダリングしたい。トルネード部分ではNo1がjsonデータをhtmlに送信しています。 No2からjsonデータがNo2の部分に渡されます。しかし、このコードは機能しません。私はhtmlスクリプトが{{}}の形式を許さないことを発見しました。 jsonデータをhtmlの一部にどのように送信するのですか?python tornado jsonレンダリングhtmlスクリプト

[パイソン - 竜巻部]

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_command_line() 
    Application().listen(options.port) 
    tornado.ioloop.IOLoop.instance().start() 

if __name__ == "__main__": 
    main() 

[HTML部分]

<!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> 
+0

エラーメッセージや出力は何ですか? –

+0

@MichaelRobellardただ出力は表示されません。 ): – spritecodej

答えて

2

{{}}あなたのindex.htmlをテンプレートでは、HTMLのためautoescapedします。この場合、htmlではなくjavascriptを出力しているので、raw出力が必要です。また、実際にPythonがデータオブジェクトを正しい形式のjsonに変換させるようにしたいとします。

インポートJSONライブラリーと正しくフォーマットJSONを取得するjson.dumpsへの呼び出しを追加します。

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_command_line() 
    Application().listen(options.port) 
    tornado.ioloop.IOLoop.instance().start() 

if __name__ == "__main__": 
    main() 

をそして、あなたのテンプレートのHTMLの自動出力エスケープを防ぐために生を使用します。

<!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> 
+0

ありがとう。私はこの問題を解決しました。 (: – spritecodej

0

重要なポイントは、文字列がテンプレートエンジンによって自動でキャスクされることです。だから私たちはjsonとしてそれを解析する前にそれを解読する必要があります。

{% raw %} @clockwatcherに記載されている指示が1つの解決策です。しかし、変数textが二重引用符で囲まれているとエラーが発生する可能性があります。json.dumps(data)はその出力に二重引用符を使用します。

したがって、より良い解決策は、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_command_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> 

機能unescapeHTMLのスニペットはJavaScript: how to unescape HTML entitiesから来ています。

関連する問題