从 Python Bottle 用 Javascript 显示 JSON答案

【问题标题】：Display JSON in Javascript from Python Bottle从 Python Bottle 用 Javascript 显示 JSON
【发布时间】：2013-08-01 12:48:40
【问题描述】：

我正在尝试访问 javascript 函数中的 mongodb 记录以在网页上显示文档。使用带有 pymongo 的 Bottle 框架，我尝试首先将 mongodb 文档编码为 JSON 对象以传递给我的 javascript 函数。

@bottle.route('/view/<_id>', method = 'GET')
def show_invoice(_id):
    client = pymongo.MongoClient("mongodb://localhost")
    db = client.orders
    collection = db.myorders
    from bson.objectid import ObjectId
    result = collection.find_one({'_id': ObjectId(_id)})
    temp = json.dumps(result,default=json_util.default)
    print "temp: " + temp

    return bottle.template('invoice', rows = temp)

当我尝试使用 javascript 函数在我的 HTML 页面中显示文档时，没有任何反应。但是，当我调用变量 rows 时，我试图在它显示的 HTML 正文中作为 {{rows}} 传递。似乎只有 JS 函数不显示任何内容。

    <!DOCTYPE html>
 <html>
  <head>
    <head>
    <title>Invoice Report</title>
    <script type="text/javascript">
    function fillTable()
    {
      var obj = {{rows}};
      document.write(obj);

    }
    </script>
   </head>
  </head>
  <body onload="fillTable()">
     <div class="invoice">
     </div>
     <h4>Rows from body</h4> {{rows}}

  </body>
 </html>

我尝试使用jQuery通过函数反序列化JSON对象行

jQuery.parseJSON(rows);

甚至作为 jQuery.parseJSON({{rows}});

我还尝试使变量在任何地方都尽可能不转义为 {{!rows}} 那么有人看到我做错了吗？如何使用 pymongo 获取 mongodb 文档，并使用瓶子将其显示在网页上？我意识到有人问过类似的问题，但我似乎无法找到适合我的特定情况的任何东西。

【问题讨论】：

JSON，如果评估为 javascript 是一个对象。您可以：1）将其放在单引号中并反序列化它或 2）只说 var obj = {{rows}};
发送到浏览器的 HTML 页面中有什么内容？如果您执行“查看源代码”，fillTable 函数的外观如何？
function fillTable() {document.write({"item1": "tees", "name": "Steve", "phone": "(890) 908- 8228”、“qyt2”：“180”、“quote”：“250.75”、“qyt1”：“90”、“qty”：“90”、“color1”：“ “white”、“color”：“black”、“color3”：“red”、“color2”：“grey”、“created”：{“$date”：1374668193935}、“ “item”：“衬衫”，“item2”：“}）； }
@DanLecocq 我刚刚尝试将我的 fillTable 函数更新为 var obj = {{rows}};然后是 document.write(obj);但仍然没有任何显示
也许最好使用更新的信息重新编辑问题以进行格式化。

标签： javascript python mongodb bottle

【解决方案1】：

问题不在于瓶子渲染您的 json，而在于使用 document.write()。

在浏览器中打开一个新选项卡，并将其指向 url：'about:blank'。这将为您提供一个空白网页。现在，右键单击并打开您的开发人员工具。尝试从该上下文运行document.write('Stuff');。您不应该看到页面有任何变化。

改为尝试：

var body = document.getElementsByTagName("body")[0];
body.innerHTML = "Stuff";

并注意区别。

当然，还有很多其他的方法可以达到这个效果，但这是最简单的，不需要外部的javascript库。

【讨论】：

【解决方案2】：

您不能在同一个标记中同时包含“src”属性和 javascript 代码。将 fillTable 函数放在一个新的脚本标签中。

【讨论】：

对不起，这是我尝试使用 JQuery 时留下的，但删除 src 属性后它仍然无法工作。