Javascript 使用flask打印从python对象转换的JSON字符串_Javascript_Python_Json_Flask

Javascript 使用flask打印从python对象转换的JSON字符串

javascript python json flask

Javascript 使用flask打印从python对象转换的JSON字符串,javascript,python,json,flask,Javascript,Python,Json,Flask,我让这个flask服务器运行，我制作了这个html文件，其中有一个脚本，当我点击按钮时，它将返回一个JSON字符串。然而，它一直给我未定义的相反。我有这个app.py代码，它给了我一个python dict，我将它转换成JSON @app.route('/') def helloworld(): #result = jsonify(student) html_item = json.dumps(Marks, indent=2, separators=(', ', ': '))

我让这个flask服务器运行，我制作了这个html文件，其中有一个脚本，当我点击按钮时，它将返回一个JSON字符串。然而，它一直给我未定义的相反。我有这个app.py代码，它给了我一个python dict，我将它转换成JSON

@app.route('/')
def helloworld():
    #result = jsonify(student)
    html_item = json.dumps(Marks, indent=2, separators=(', ', ': '))
    return render_template('test1.html',data = html_item)

在此之后，在test1.html上我有了一个脚本

<!DOCTYPE html>  
<html>  
    <head>  
        <title>  
            JavaScript | Print content of object 
        </title> 
    </head>  

    <body style = "text-align:center;" id = "body">  

        <h1 style = "color:rgb(0, 2, 128);" >  
           {{data}}
        </h1> 

        <p> 
            Print JavaScript Object. 
        </p> 

        <button onclick = "gfg_Run()">  
            print object 
        </button> 

        <p id = "GFG_DOWN" style 
                = "color:rgb(0, 2, 128); font-size: 20px; font-weight: bold;"> 
        </p> 

        <script> 
            var el_down = document.getElementById("GFG_DOWN"); 

            var GFG_object = { 
                prop_1: 'val_11', 
                prop_2: 'val_12',  
                prop_3: 'val_13' 
            }; 

            function gfg_Run(data) {  
                el_down.innerHTML = data;
                //el_down.innerHTML = JSON.stringify(GFG_object); 
            } 

        </script>  
    </body>  
</html>


JavaScript |打印对象的内容
{{data}}

打印JavaScript对象。

打印对象


var el_down=document.getElementById（“GFG_down”）；
var GFG_object={
第1号提案：“val_11”，
第2号提案：“val_12”，
第3号提案：“val_13”
}; 
函数gfg_运行（数据）{
el_down.innerHTML=数据；
//el_down.innerHTML=JSON.stringify（GFG_对象）；
}

在这里，我已经测试过它可以按照我注释的行打印出一个js对象。

我应该如何打印一个JSON字符串，在我的例子中，

数据

正确吗？

我假设您应该知道如何检索JSON数据
如果没有，请访问：

现在，您已经知道如何检索以json格式存储的数据，并且应该将值直接放入内部html中，如：

el_down.innerhtml = data['val']

或者，您的json结构可能是

我认为您访问json数据的方式是不正确的。尝试此解决方案后请告诉我

您没有在html模板中呈现json字符串

仅仅使用单词

data

不会从python脚本中获取

data

变量并用json替换它。您需要将它用大括号括起来

{{}

//incorrect
myobject = data;
//correct
myobject = {{ data|safe }};

所以为了让你的例子发挥作用，你可以

var GFG_object = {{data|safe}};

//took out the "data" from the parameter list
//since you aren't passing anything to gfg_Run()
function gfg_Run() {  
  //prints your object as a json string
  el_down.innerHTML = JSON.stringify(GFG_object);
}

//if you are wanting print some property of your object
function gfg_Run() {  
  el_down.innerHTML = GFG_object["val"];
}

什么让你没有定义？如果你试图在你的html模板中呈现json字符串，那就展示你的尝试。假设

render\u-template

应该用

html\u-item

中的内容替换

test1.html

中的内容，我看不出您在哪里尝试使用

html\u-item

。例如，在一个flask模板中，我希望在单击我得到的按钮后看到类似于

GFG_object={{html_item}}

@DanielRoseman的东西undefined@PatrickEvans在flask模板中，在python文件中执行

GFG_object={{html_item}}

是什么意思？您甚至没有显示按钮。你也没有说你在哪里“没有定义”。你到底看到了什么？我试着测试我的数据是否是一个JSON字符串，方法是像

data

一样将其放入，所以这不表明我的数据已经是一个JSON字符串了吗？不，这不是它的工作方式。如果要检查数据类型，请输入

type（data）

。这将显示数据的类型。但如果要将其渲染到模板上。这行不通。要在模板上进行渲染，需要将

{{type（data）}}

放在模板上，但我认为

el_down.innerhtml=data['val']

不起作用。你能解释一下为什么我的JSON字符串没有打印出来吗？我试过你的建议，但现在我点击按钮后，它什么也没有显示，我有没有遗漏什么？@weisuxiang这两个例子都不起作用？例如JSON.stringify（）或其他？您是否检查了javascript控制台中的错误？如果没有错误，那么您是否使用了正确的属性名称？我只使用了

“val”

作为示例。你可以使用你想要使用的任何属性的名称。是的，我会找到一种方法来检查js控制台中的错误，因为我还是新手。我只尝试了第一个，因为我打算打印我的对象中的所有内容。我的数据看起来像这样``{“George”：“0095”、“Kelly”：“0100”、“Mike”：“0087”、}```@WeisuXiong用于检查错误只需按F12键，它将在浏览器中打开开发人员工具并点击控制台选项卡。错误将显示为红色。错误如下

（索引）：19未捕获引用错误：未在HTMLButtonElement.onclick（（索引）：19）onclick@（索引）：19定义gfg_运行