Jquery 通过 Ajax POST 将按钮值从 HTML 发送到 Flask 时出现空数据

发布于07月15日

我正在try 通过AJAX POST将在HTML中单击的按钮的值发送到Flask值函数.

我花了几个小时试图找到发布到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 -，但如果我try 使用request.form，我得到一个空值，但正确的键ImmutableMultiDict([('search', '')])

我做错了什么？

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

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)

Jquery 通过 Ajax POST 将按钮值从 HTML 发送到 Flask 时出现空数据

推荐答案

Jquery相关问答推荐

通过 Ajax POST 将按钮值从 HTML 发送到 Flask 时出现空数据

如何向父元素添加类？

为什么我的 toFixed() 函数不起作用？

递归循环遍历对象(树)

如何使用 jQuery 获取所有 ID？

jQuery - 获取 ajax POST 的表单值

如何使用 jQuery 将分钟转换为小时/分钟并添加各种时间值？

jQuery JSON到字符串？

页面滚动后，jQuery可拖动在错误的位置显示助手

如何在我的 WordPress 插件中包含 CSS 和 jQuery？

如何将参数传递给 JavaScript 中的匿名函数？

您如何处理 jQuery 中的表单更改？

用 Javascript 加载 jQuery 并使用 jQuery

虽然未定义变量 - 等待

消除移动 Safari 中点击事件的 300 毫秒延迟

.append 之后的 jQuery 函数

jQuery DataTables：控制表格宽度

如何复制 pinterest.com 的绝对 div 堆叠布局

将变量的值复制到另一个

textarea 的 val() 与 text()