Question

在 const message = JSON.parse(message);行中有问题。该消息是来自python flask后端的JSON。如果我通常在HTML标记中写<span>{{message}}</span>，这会打印出JSON文件。但是由于某种原因我无法解析它？

<!doctype html>
<html lang="en">
    <head>
        <title>{{ title }} - Status Checker</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/styles.css') }}">
      
        

<script>

    const message = JSON.parse(message);
</script>
    
    </head>
    <body>

        <ul>
            <li>
             <span>TestDrive</span>
             <span class="badge badge-pill badge-success">Operational</span>
            </li>
         </ul>

        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
           <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
           <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    </body>
</html>

Python方法：

@app.route('/index')
def index():
    user = {'username': 'Me'}
 
------------------------------------------------DATA--------------------


    message=json.dumps(dicts)
    return render_template('index.html', title='Home', user=user, message = message)

JSON：

{"thing":"value",
  "more":"stuff"}

Answer 1

看来，您需要这样解析：

let message = {{ message }} 
JSON.parse(message)

问题是服务器会解析模板变量，但是您正在尝试将其传递给JS（浏览器）

Answer 2

您必须在执行json.dumps之后加载json对象。

message = json.dumps(dicts)
message_dump = json.loads(message)
return render_template('index.html', title='Home', user=user, message=message_dump)

现在，您可以直接使用json对象，而无需在script标签中进行解析，而可以通过对其进行迭代来解析键值。

现在，您可以像使用{{ message["things"] }}一样以HTML格式打印"value"了。

Answer 3

在JSON.parse中使用消息之前先对其进行定义。

ReferenceError：未定义“消息”

3 个答案: