我在Flask应用程序中使用$（get）请求的JavaScript问题

2024-06-02 05:39:54 发布

您现在位置：Python中文网/ 问答频道 /正文
3036 3

你好：我是一个编程新手，所以这个问题可能会变得很小。你知道吗

我编写了一个骰子游戏（称为10000）来自学python。我现在想制作一个简单的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模板：

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

Tags： namedivappflaskdatahtmlscriptfunction
1条回答
网友
1楼 · 发布于 2024-06-02 05:39:54

在应用程序中，您需要添加对ajax的检查，并返回json:

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)

在html中使用data.data

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

相关问题 更多 >

    编程相关推荐