-1
好吧，我有两个html文件。 base.html文件和search_results.html第二个html文件上的按钮不起作用的Flask
base.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 430px;
height: 763px;
align-items: center;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
\t font-size: 45px;
font-color: #333333;
\t font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
\t font-size: 15px;
\t font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
\t font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
\t font-size: 14px;
\t font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit{
color: rgb(200, 0, 0);
}
.rank{
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table, th, td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right:#121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type = 'submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200,0,0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Add"] {
border: 3px solid #4CAF50;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
div.content {
width: 430px;
align-items: center;
}
</style>
</head>
<body>
<div class="content">
<h1>Public Playlist</h1>
<form action = '/search_results' method="POST">
<input placeholder="Artist:" type = 'text' name='artist'> </input>
<input placeholder="Album:" type = 'text' name='album'> </input>
<input placeholder="Track:" type = 'text' name='track'> </input>
<input type="submit" value="Submit!" id="search"/>
</form>
<table >
<tr>
<th><h2>Rank</h2></th>
<th><h2>Title</h2>
<h2>Author|Album</h2></th>
<th><h2>Score</h2></th>
<th><h2>Vote</h2></th>
</tr>
<tr>
<td><h3 type="bold">1</h3></td>
<td><h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3></td>
<td><h3>{{ score }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote" value="Up" id="up">
<input type="button" name= "vote" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">2</h3></td>
<td><h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3></td>
<td><h3>{{ score1 }}</h3></td>
<form action="/" method="POST">
<td>
<input type="button" name="vote1" value="Up" id="up">
<input type="button" name= "vote1" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">3</h3></td>
<td><h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3></td>
<td><h3>{{ score2 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote2" value="Up" id="up">
<input type="button" name= "vote2" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">4</h3></td>
<td><h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3></td>
<td><h3>{{ score3 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote3" value="Up" id="up">
<input type="button" name= "vote3" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">5</h3></td>
<td><h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3></td>
<td><h3>{{ score4 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote4" value="Up" id="up">
<input type="button" name= "vote4" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">6</h3></td>
<td><h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3></td>
<td><h3>{{ score5 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote5" value="Up" id="up">
<input type="button" name= "vote5" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">7</h3></td>
<td><h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3></td>
<td><h3>{{ score6 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote6" value="Up" id="up">
<input type="button" name= "vote6" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">8</h3></td>
<td><h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3></td>
<td><h3>{{ score7 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote7" value="Up" id="up">
<input type="button" name= "vote7" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">9</h3></td>
<td><h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3></td>
<td><h3>{{ score8 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote8" value="Up" id="up">
<input type="button" name= "vote8" value="Down" id="down">
</td>
</form>
</tr>
<tr>
<td><h3 type="bold">10</h3></td>
<td><h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3></td>
<td><h3>{{ score9 }}</h3></td>
<form action="/vote" method="POST">
<td>
<input type="button" name="vote9" value="Up" id="up">
<input type="button" name= "vote9" value="Down" id="down">
</td>
</form>
</tr>
</table>
<script>
setTimeout(function() {location.reload() },60000);
</script>
</div>
</body>
</html>search_results.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
font-family: sans-serif;
background-image: url('/static/Flat-Color-Gradient-Triangles.png');
width: 640px;
height: 1136px;
}
h1 {
font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 45px;
font-color: #333333;
font-weight: bold;
margin: 0;
padding: 3px;
text-align: center;
}
h2 {
font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
font-size: 15px;
font-weight: bold;
margin: 0;
padding: 3px;
border: 1.5px
}
h3 {
font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;
font-size: 14px;
font-weight: 100;
margin: 0;
border-top: 1px;
border-bottom: 1px;
padding: 3px;
}
.explicit {
color: rgb(200, 0, 0);
}
.rank {
font-weight: bold;
}
table {
border-collapse: collapse;
padding: 4px;
}
table,
th,
td {
padding: 5px;
border-bottom: 1px solid black;
color: white;
text-align: center;
}
th {
background-color: #121f1f;
border-left: #121f1f;
border-right: #121f1f;
}
td {
background-color: #253f3f;
border-left: #253f3f;
border-right: #253f3f;
}
input[type='text'] {
width: 100%;
padding: 6px 10px;
margin: 6px 0;
box-sizing: border-box;
border: 2px solid #ccc;
font-size: 14px;
border-radius: 10px;
}
input[type='text']:focus {
border: 3px solid red;
}
input[type='submit'] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
width: 100%;
}
input[value="Up"] {
background-color: #4CAF50;
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[value="Down"] {
background-color: rgb(200, 0, 0);
border: none;
color: white;
padding: 16px 32px;
text-decoration: none;
margin: 4px 2px;
}
input[name="Add"] {
border: 3px solid #4CAF50;
color: white;
background-color: #253f3f;
padding: 16px 32px;
text-decoration: none;
font-weight: bold;
margin: 4px 2px;
}
</style>
</head>
<body>
<h1>Public Playlist</h1>
<table>
<tr>
<th>
<h2>Rank</h2>
</th>
<th>
<h2>Title</h2>
<h2>Author|Album</h2>
</th>
<th>
<h2>Score</h2>
</th>
<th>
<h2>Add</h2>
</th>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">1</h3>
</td>
<td>
<h3>{{name}}</h3>
<h3>{{artist}}:{{album}}</h3>
</td>
<td>
<h3>{{ score }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add" id="Add">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">2</h3>
</td>
<td>
<h3>{{name1}}</h3>
<h3>{{artist1}}:{{album1}}</h3>
</td>
<td>
<h3>{{ score1 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add1" id="Add1">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">3</h3>
</td>
<td>
<h3>{{name2}}</h3>
<h3>{{artist2}}:{{album2}}</h3>
</td>
<td>
<h3>{{ score2 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add2" id="Add2">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">4</h3>
</td>
<td>
<h3>{{name3}}</h3>
<h3>{{artist3}}:{{album3}}</h3>
</td>
<td>
<h3>{{ score3 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add3" id="Add3">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">5</h3>
</td>
<td>
<h3>{{name4}}</h3>
<h3>{{artist4}}:{{album4}}</h3>
</td>
<td>
<h3>{{ score4 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add4" id="Add4">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">6</h3>
</td>
<td>
<h3>{{name5}}</h3>
<h3>{{artist5}}:{{album5}}</h3>
</td>
<td>
<h3>{{ score5 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add5" id="Add5">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">7</h3>
</td>
<td>
<h3>{{name6}}</h3>
<h3>{{artist6}}:{{album6}}</h3>
</td>
<td>
<h3>{{ score6 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add6" id="Add6">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">8</h3>
</td>
<td>
<h3>{{name7}}</h3>
<h3>{{artist7}}:{{album7}}</h3>
</td>
<td>
<h3>{{ score7 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add7" id="Add7">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">9</h3>
</td>
<td>
<h3>{{name8}}</h3>
<h3>{{artist8}}:{{album8}}</h3>
</td>
<td>
<h3>{{ score8 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add8" id="Add8">
</td>
</form>
</tr>
<tr>
<form action="/add" method="GET">
<td>
<h3 type="bold">10</h3>
</td>
<td>
<h3>{{name9}}</h3>
<h3>{{artist9}}:{{album9}}</h3>
</td>
<td>
<h3>{{ score9 }}</h3>
</td>
<td>
<input type="button" name="Add" value="Add9" id="Add9">
</td>
</form>
</tr>
</table>
</body>
</html>然后我甲肝e python文件projectfalcon.py相关方法如下：
@app.route('/add', methods=['GET'])
def addingSongs():
if request.method == 'GET':
btnID = request.form['btn']
if btnID == 'Add0':
songResults[0].upVote()
addedSongs.append(songResults[0])
songResults.remove(0)
if btnID == 'Add1':
songResults[1].upVote()
addedSongs.append(songResults[1])
songResults.remove(1)
return render_template('base.html')
所以base.html是加载的第一页。您输入艺术家名称搜索歌曲，然后将您带到显示结果的search_results.html。我试图让用户能够点击添加按钮，然后将歌曲添加到projectfalcon.py文件的列表中。点击它之后还会将您带回base.html文件并重新加载播放列表中的歌曲，我不确定我做错了什么。我搜索了多次，但可能没有找到正确的措辞。任何帮助表示赞赏。
所以这就是我如何解决我的问题。当我加载该网站时，它将我带到base.html。从那里我点击一个按钮，它会移动到search_results.html文件，并显示一些数据。我希望能够点击10个按钮中的1个，并根据我点击的按钮做两件事。 1）将该歌曲添加到添加的歌曲列表中2）将用户带回base.html。因此，目前每个按钮都有相同的名称“添加”，但每个值从“Add0”更改为“Add1”等。我希望能够获得按下哪个按钮，然后获取关联歌曲并将其追加到添加的歌曲列表中。 –
也不知道为什么我没有想到这一点，但我把打印（'测试'）正下方的addsSongs（）函数，当我点击一个添加按钮它不打印。因此，我认为这个方法从未被调用过。有可能我的approute有问题吗？ –
以这种方式尝试和调试相当困难。从你想做的事情，我建议了解网络的工作原理。 ajax，路由，重定向，表单如何工作。让烧瓶按照你想要的方式工作会容易得多。另外，请检查烧瓶教程，以熟悉基本概念，如'url_for'重定向，更容易的模板，基于数组的形式值，ajax调用等。我推荐[this]（https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world）教程。 – oxalorg