模板不能正确渲染通过烧瓶

问题描述：

当我运行我的代码时，它正在阅读我的模板，但所有的html标签都显示在我的div与看起来很糟糕，我会寻找添加和形象下一个它会工作它只会显示我为它编写的代码。模板不能正确渲染通过烧瓶

这就是所谓的webapp.py

from flask import Flask, render_template, request 

app = Flask(__name__) 

@app.route("/") 
def root(): 
    return app.send_static_file('index.html') 

@app.route("/london") 
def name():   
    return "London is the capital and most populous city of England and the United Kingdom." 

@app.route("/paris") 
def paris(): 
    return "Paris is the captial of France and the most populated in France " 

@app.route("/japan") 
def japan(): 
    return render_template('japan.html') 

if __name__ == "__main__":  
    app.run()

我的网页这是我在我的模板文件夹japan.html这我叫与日本按钮。

<!doctype html> 
<title>Japan</title> 
<h1>Japan </h1> 
<p>Japan is an island nation in the Pacific Ocean with dense cities, imperial palaces, mountainous national parks and thousands of shrines and temples. </p> 
<p>Shinkansen bullet trains connect the main islands of Kyushu (with Okinawa's subtropical beaches), Honshu (home to Tokyo and Hiroshima’s atomic-bomb memorial) and Hokkaido (famous for skiing).</p> 
<p> Tokyo, the capital, is known for skyscrapers, shopping and pop culture.</p>

最后我的index.html这是我的静态文件夹：

<!DOCTYPE html> 
<html> 
<head> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script> 
$(document).ready(function(){ 
$("#londonbutton").click(function(){ 
    $.get("/london", function(data, status){ 
    $("#city").text(data); 
    }); 
}); 
}); 
$(document).ready(function(){ 
    $("#parisbutton").click(function(){ 
    $.get("/paris", function(data, status){ 
    $("#city").text(data); 
    }); 
    }); 
}); 
$(document).ready(function(){ 
    $("#japanbutton").click(function(){ 
    $.get("/japan", function(data, status){ 
    $("#city").text(data); 
}); 
}); 
}); 

</script> 
</head> 
<body> 

<input type="submit" name="London" id="londonbutton" value="Update London"> 
<input type="submit" name="Paris" id="parisbutton" value="Update Paris"> 
<input type="submit" name="Japan" id="japanbutton" value="Update Japan"> 
<h2> Capital City</h2> 
<div id = "city"> 
<h2>city name</h2> 
<p>Some text about a city</p> 
</div> 



</body> 
</html>

答

的问题是在这里（index.html中第23行）：

$("#city").text(data);

jQuery的.text会转义所有的HTML（所以它只显示为文本），您需要在这里使用.html。

$("#city").html(data);

模板不能正确渲染通过烧瓶

相关推荐