模板無法通過燒瓶正確渲染

Question

當我運行我的代碼時，它正在讀取我的模板，但是所有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()

這是我的template文件夾中的japan.html，我使用“ Japan”按鈕來調用它。

<!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>

Answer 1

問題出在這里（index.html中的第23行）：

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

jQuery的.text將轉義所有HTML（因此它只是文本），因此您需要在此處使用.html 。

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

模板無法通過燒瓶正確渲染

問題描述

1 個解決方案

解決方案1
2 2016-11-21 13:21:51

模板無法通過燒瓶正確渲染

問題描述

1 個解決方案

解決方案1 2 2016-11-21 13:21:51

解決方案1
2 2016-11-21 13:21:51