代码之家 › 专栏 › 技术社区 › JesusChrist441

数据未从Python发送到JavaScript

ajax python javascript

JesusChrist441 · 技术社区 · 3 年前

这是我的Python文件

import random
from flask import Flask, render_template
from captcha.image import ImageCaptcha
from captcha.audio import AudioCaptcha

app = Flask(__name__)


@app.route('/')
def generateCaptcha():
    return render_template('main.html')

@app.route('/getCaptcha', methods=['POST'])
def getCaptcha():
    result_str_image = ''.join(
        (random.choice('ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789') for i in range(5)))
    image = ImageCaptcha(width=280, height=90)
    imageData = image.generate(result_str_image)
    image.write(result_str_image, result_str_image + '.png')
    return result_str_image

if __name__ == "__main__":
    app.run(debug=True)

还有我的HTML文件

<!DOCTYPE HTML>
<html>
    <head>
        <title> Example </title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <link rel="shortcut icon" href="#">
    </head>
    <body>
        <h1> Captcha Example </h1>
        <div id="Captcha"></div>
        <label> Enter the text from Captcha above </label>
        <input type="text" id="CaptchaInput">
        <br> <br>
        <input type="button" value="Enter" id="CaptchaSubmit">
        <input type="button" value="Reset" id="CaptchaReset">
        <input type="button" value="Audio" id="CaptchaAudio">
        <script>
            var captchaValue;
            $.ajax({
                type: "POST",
                url: "/getCaptcha",
                data: captchaValue,
                contentType:"application/text; charset=utf-8", // Declare the type of the data we're sending. Without this, Flask will misinterpret it as some other kind of data.
                success: function(data){
                    console.log(captchaValue);
                }
            });
        </script>
    </body>
</html>

然而,captchaValue总是未定义的,我在哪里搞砸了?这是我第一次尝试这个。我正在使用Github的一段代码来帮助他们,但由于他们在做其他事情,我不知道我在哪里搞砸了。

我期待着

data: captchaValue

更新captchaValue的值。

0 回复 | 直到 3 年前

Diego Serrano Gómez 3 年前

首先,你没有捕捉到你在输入中输入的值,所以请看一下 https://flask.palletsprojects.com/en/2.0.x/quickstart/ 特别阅读请求对象部分。基本上,你在Flask应用程序中输入的所有数据都可以通过请求捕获。form对象(这是一种只读dict)。然而,在完成这项工作之前,您必须首先将所有输入包含在一个表单标记中,如下所示:

<label> Enter the text from Captcha above </label>Â´
<form method="POST">
<input type="text" id="CaptchaInput">
...
</form>

注意:您应该添加方法参数,使其尽可能以最简单的方式工作。

然后必须在所有输入中添加名称参数,您可以使用与您在id中使用的名称相同的名称

 <input type="text" id="CaptchaInput" name="CaptchaInput">

然后在Python代码中可以调用request。表单['CaptchaInput'](别忘了在顶部导入请求库!)在烧瓶中捕捉价值。

根据Javascript代码,您从未从输入中读取值,因此必须执行以下操作: var captchavue=文档。getElementById(“CaptchaInput”)。价值