燒瓶傳遞json和render_template

Question

我是一個新開發人員，我有一個帶有數據的Json對象，我正在嘗試使用render_template將其傳遞到某個頁面

我已經看到了一些答案，但是由於某種原因，它們都沒有為我工作

我知道Javascript和Flask之間的連接是牢固的，因為我可以在JS的Onload函數中使用console.log（“ string”），但是它似乎無法識別我通過渲染模板傳遞的任何內容

到目前為止我嘗試過的事情

將json對象保存為變量，並將其與渲染模板一起傳遞。

    x = {"Success": True , "Msg":" lets try to get jinja to work - email {{ current_user.email }} " , "displayname":current_user.name}
    t = "test"
    return render_template("index.html", x=x ,t=t)

在JS上

document.addEventListener('DOMContentLoaded' , function () {
console.log("loaded");


const onStay = new XMLHttpRequest();
onStay.open('post' , "stay" , true);
onStay.send(null);

onStay.onload = ()=>{

console.log("i got response from flask ... onstay.onload , cheers !");
//console.log(x);
var  rt = t;
console.log(rt);
var resStay = JSON.parse(x.responseText);
var tt = JSON.parse('{{ x | tojson | safe}}');

所以我也在測試是否可以傳遞jinja2代碼或flask_login代碼，將其實際保存在某種變量中，並使用JS對其進行響應

第二次嘗試是嘗試對方法進行jsonify解析

在python上：

X = jsonify({"Success": True , "Msg":" lets try to get jinja to work - 
email {{ current_user.email }} " , "displayname":current_user.name})
return render_template("index.html", X=X)

在JS端：

 onStay.onload = ()=>{
 var res = JSON.parse(reqSignup.responseText);
 console.log("res  === " , "\n" , res );

---

我得到的輸出是

JavaScript.js:11 i got response from flask ... onstay.onload , cheers !
JavaScript.js:13 Uncaught ReferenceError: t is not defined
    at XMLHttpRequest.onStay.onload (JavaScript.js:13)
onStay.onload @ JavaScript.js:13
load (async)


JavaScript.js:191 qwe@qwe.qwe 
 qwe
JavaScript.js:313 DATA   =  FormData {}

Answer 1

問題是您試圖直接從JavaScript訪問變量。 您需要做的是使用Jinja在Flask模板中使用這些變量，然后在其中調用您的JavaScript。

一個經典的示例是放置一個按鈕，並帶有onclick = YourFunction（x）。 調用函數時，它將傳遞變量中具有的值。

您應該使用默認的Flask模板引擎Jinja ，但是如果您更喜歡我為方便起見而開發的模板引擎， 例如Sucuri 。

希望這可以幫助。