jquery 通过 AJAX POST将按钮值从HTML发送到Flask时为空数据

hkmswyz6 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(112)

我试图通过 AJAX POST将HTML中单击的按钮的值发送到Flask函数。
我花了几个小时试图找到POST到Flask的最小工作示例，但我没有找到任何真正最小的东西。这是我在多次堆栈溢出后创建的最小工作示例。这是我的HTML内容：

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
        <div>
            <button value="btn1">Button1</button>
            <button value="btn2">Button2</button>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            $(this).on('click', function(event) {
                var value = $(this).val();
                $.ajax({
                    type : 'POST',
                    url : '/process',
                    contentType: 'application/json',
                    data : {'search' : value}
                });
                event.preventDefault();
            });
        });
    </script>
</html>

字符串
这是我的Flask应用程序：

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route('/process', methods=['GET', 'POST'])
def process():
    value = request.get_json()
    print(value)
    return render_template('index.html')

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

型
我使用 print（value） 作为调试检查。当我点击按钮时，我在终端中收到一个错误400 127.0.0.1 - - [15/Jul/2023 03:04:49] "POST /process HTTP/1.1" 400 -，但如果我尝试使用request.form，我得到一个空值，但正确的关键字ImmutableMultiDict([('search', '')])
我做错了什么？

jquery

来源：https://stackoverflow.com/questions/76691977/empty-data-when-sending-a-button-value-from-html-to-flask-through-ajax-post

1条答案

按热度按时间

piah890a1#

在JavaScript代码中，您使用$this.val()检索所单击按钮的值。但是，$this指的是当前文档，而不是单击的按钮本身。若要修正这个问题，请更新您的事件行程常式，以正确地定位按钮项目。完成版本：

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
    <div>
        <button class="my-button" value="btn1">Button1</button>
        <button class="my-button" value="btn2">Button2</button>
    </div>
</body>
<script>
    $(document).ready(function() {
        $('.my-button').on('click', function(event) {
            var value = $(this).val();
            $.ajax({
                type: 'POST',
                url: '/process',
                contentType: 'application/json',
                data: JSON.stringify({'search': value}), // Convert to JSON string
                success: function(response) {
                    console.log(response);
                }
            });
            event.preventDefault();
        });
    });
</script>
</html>

字符串
在修改后的代码中，我将类"my-button"添加到按钮中，以便在jQuery中更容易地定位它们。然后，我更新了事件处理程序，使用$'.my-button'来选择按钮，并将click事件绑定到它们。
在Flask应用中，您可以使用request.form['search']访问从HTML页面发送的值。下面是更新后的Flask代码：

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route("/")
def index():
    return render_template('index.html')

@app.route('/process', methods=['POST'])
def process():
    value = request.form['search']
    print(value)
    return jsonify({'message': 'Success'})

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

型
我还在响应中添加了jsonify，以便将其转换为JSON格式。这是可选的，但是在处理 AJAX 请求时发送JSON响应是一个很好的做法。JSON在数据方面也被大量使用。
现在应该能用了。

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 通过 AJAX POST将按钮值从HTML发送到Flask时为空数据

1条答案

相关问题

热门标签

最新问答