0
私のコードを実行すると、テンプレートに読み込まれていますが、すべての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>