我在JavaScript中使用$。（get）請求Flask應用程序中的問題

您好：我是編程中的新手，所以這個問題可能變得微不足道。

我編寫了一個骰子游戲（稱爲10,000）來教自己的蟒蛇。我現在想製作一個簡單的Web應用程序，重新使用一些Python代碼。我正在使用Flask框架（+ Pythonanywhere作爲我的web開發人員）。我能夠將一個簡單的CSS網格和一個CSS樣式表放在一起，並插入一對JS按鈕和幾個HTML對象。我向該按鈕添加了一個Jquery GET請求，以從python代碼中獲取一些值。到現在爲止還挺好。

當我單擊按鈕時，網格被複制（即頁面上的所有內容都會出現兩次）;奇怪的是，只有其中一個按鈕似乎工作並返回隨機值。

現在我不知道我在做什麼錯了。我沒有看到在開發者工具中出現任何錯誤，我看到隨機數字出現在屏幕上。你能幫我找到我搞亂的地方嗎？

我燒瓶應用：

import random 
from flask import Flask, render_template, request 

app = Flask(__name__) 

@app.route('/') 
def hello(): 
    data = random.randint(1,6) 
    if request.method == "GET": 
     return render_template('main.html',data=data) 

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

HTML模板：在HTML中使用

from flask import Flask, render_template, request, jsonify 
#       add jsonfy to ipmport ^^^^^^^ 

def hello(): 
    data = random.randint(1, 6) 
    # add next two line 
    if request.is_xhr: 
     return jsonify(data=data) 
    if request.method == "GET": 
     return render_template('main.html', data=data)

：

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to- fit=no"> 
     <meta name="description" content=""> 
     <meta name="author" content=""> 
     <link rel="stylesheet" linkhref="/static/css/styles.css"> 
    </head> 
    <body> 
     <div class="grid"> 
      <div class="title"> 
       <h1>10,000</h1> 
      </div> 
      <div class="dice"> 
       <div class="card" id="card1"> 
        <p>{{ data }}</p> 
       </div> 
      </div> 
      <div class="roll"> 
       <div class="round-button" id="roll-button"> 
        <div class="round-button-circle"> 
         <a class="round-button">Save</a> 
        </div> 
       </div> 
      </div> 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
      <script> 
       $(function() { 
        $('#roll-button').click(function() { 
         $.get('/', function(data){ 
          var data = data; 
          document.getElementById("card1").innerHTML = data; 
         }); 
        }); 
       }); 
      </script>

來源

2017-09-17 Cam

使用按鈕而不是'div'或參見https://stackoverflow.com/questions/7034342/jquery-onclick-on-div。 –

在您需要添加檢查阿賈克斯，並返回JSON應用

data.data

document.getElementById("card1").innerHTML = data.data 
             <!--  ^^^^^^ -->

來源

2017-09-17 21:19:07

這個技巧謝謝你。那麼，這是否意味着我應該總是使用Json進行GET和POST請求？ – Cam

很高興爲您提供幫助（不要忘記接受答案），這意味着您需要了解您使用的請求類型，並以適當的格式返回請求。 –

我在JavaScript中使用$。（get）請求Flask應用程序中的問題

回答

相關問題