如何将flask的JSON传递给Javascript_Javascript_Python_Flask

如何将flask的JSON传递给Javascript

javascript python flask

如何将flask的JSON传递给Javascript,javascript,python,flask,Javascript,Python,Flask,我有一个索引页面，其中包含一个表单，填写表单并将数据发送到URL，URL捕获输入，并在数据库中进行搜索，返回JSON。我如何获得这个JSON，并使用Javascript将它放在另一个HTML页面上索引形式： <form action="{{ url_for('returnOne') }}", method="GET"> <p>Nome: <input type="text" name="nome" /></p> <input type="

我有一个索引页面，其中包含一个表单，填写表单并将数据发送到URL，URL捕获输入，并在数据库中进行搜索，返回JSON。我如何获得这个JSON，并使用Javascript将它放在另一个HTML页面上

索引形式：

<form action="{{ url_for('returnOne') }}", method="GET">
<p>Nome: <input type="text" name="nome" /></p>
<input type="submit" value="Pesquisar">
</form>

使用ajax请求。将HTML表单中的提交按钮转换为Ajax提交

<script> 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function(response) { 
            var result = jQuery.parseJSON(response);
            $('#someDiv').innerHTML = result.res
        }); 
    }); 
</script>


$（文档）.ready（函数（）{
//绑定“myForm”并提供一个简单的回调函数
$（'#myForm'）.ajaxForm（函数（响应）{
var result=jQuery.parseJSON（响应）；
$（'#someDiv'）。innerHTML=result.res
}); 
});

使用正确的表单Id使用ajax请求。将HTML表单中的提交按钮转换为Ajax提交

<script> 
    $(document).ready(function() { 
        // bind 'myForm' and provide a simple callback function 
        $('#myForm').ajaxForm(function(response) { 
            var result = jQuery.parseJSON(response);
            $('#someDiv').innerHTML = result.res
        }); 
    }); 
</script>


$（文档）.ready（函数（）{
//绑定“myForm”并提供一个简单的回调函数
$（'#myForm'）.ajaxForm（函数（响应）{
var result=jQuery.parseJSON（响应）；
$（'#someDiv'）。innerHTML=result.res
}); 
});

提交表单后，请在HTML页面上使用正确的表单Id。我们称之为

response.html

<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
</head>
<body>
    <p id="test"></p>
    <p id="test1"></p>


    <script>
        var b = JSON.parse('{{ a | tojson | safe}}');
        document.getElementById('test').innerHTML = b.test;
        document.getElementById('test1').innerHTML = b.test1;
        console.log(b);
    </script>

</body>
</html>

@app.route('/userQuery', methods=["POST", "GET"])
def returnOne():
        a = {
        "test": "abcd",
        "test1": "efg"
        }
        return render_template("response.html", a=a)

提交表单后，将显示HTML页面。我们称之为

response.html

<!DOCTYPE html>
<html>
<head>
    <title>hello</title>
</head>
<body>
    <p id="test"></p>
    <p id="test1"></p>


    <script>
        var b = JSON.parse('{{ a | tojson | safe}}');
        document.getElementById('test').innerHTML = b.test;
        document.getElementById('test1').innerHTML = b.test1;
        console.log(b);
    </script>

</body>
</html>

@app.route('/userQuery', methods=["POST", "GET"])
def returnOne():
        a = {
        "test": "abcd",
        "test1": "efg"
        }
        return render_template("response.html", a=a)

您可以使用jQuery的

$.get（'http://localhost:8080/userQuery');

将JSON存储到一个局部变量。我该怎么做？调用另一个页面html？我在哪里调用该页面作为回报？我需要获取json并调用另一个页面html，我可以使用一个路由来实现这一点？您可以使用jQuery的

$.get（'http://localhost:8080/userQuery');

将JSON存储到一个局部变量。我该怎么做？调用另一个页面html？我在哪里调用该页面作为回报？我需要获取json并调用另一个页面html，我可以通过一个路径来实现这一点？在我将返回的页面中，如何获取该json并传递到html？@MatheusAlc–ntara假设您已经理解了我上面的示例，如果您有以下内容：

var user=json.parse（{user | tojson | safe}}）

只需执行

document.getElementById（'elementId'）.innerHTML=user.firstname

即可设置名字。除非我遗漏了什么。对不起，我不明白这段代码，当我得到函数的返回时？我尝试使用以下代码：$.getJSON（{url_for（'returnOne'）}}），函数（json）{var data=

Atualizado em:${json.Atualizado_em}
Criado em:${json.id}
Idade:${json.Idade}
Nome:${json.Nome}
Senha:${json.Senha}

$（“.data”）.html（data）；}）；在我将返回的页面中，如何获取这个json并传递到html？@MatheusAlc–ntara假设您已经理解了上面的示例，如果您有以下内容：

var user=json.parse（“{user | tojson | safe}”）

只需执行

document.getElementById（'elementId'）.innerHTML=user.firstname

Atualizado em:${json.Atualizado_em}
Criado em:${json.id}
Idade:${json.Idade}
Nome:${json.Nome}
Senha:${json.Senha}

$（“.data”）.html（data）；}）@太棒了！！如果答案对你有效，你能接受吗？@MatheusAlc–ntara Great！！如果这个答案适合你，你能接受吗？