第二个html文件上的按钮不适用于Flask

时间：2016-11-15 05:11:48

标签： python html flask

好的，我有两个html文件。 base.html和search_results.html

base.html文件

＆＃13;
＆＃13; 
<!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;
    	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[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>
＆＃13;
＆＃13;
＆＃13;

search_results.html

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

然后我有一个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文件并重新加载播放列表中的歌曲我不知道我做错了什么。我已经多次搜索，但可能没有找到正确的措辞。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分：0)

我能发现的最明显的问题是您访问btn变量的方式。由于您的表单发送了GET请求，因此需要按以下方式访问：

btnID = request.args.get('btn', '')

除此之外，我不了解您如何存储addedSongs列表。 Flask上下文仅限于请求，您不应该使用python全局命名空间。您应该创建一个上下文变量（也是一个全局的瓶子），或者最简单的方法是将用户数据存储在数据库中。

您应该查看this flask教程，这是从头开始制作Web应用程序的完整指南。也许它可以用来清除基础知识，并让你找到正确的措辞＆＃39;你的问题！ ：）

干杯。

相关问题
最新问题