Question

我正在尝试让Flask处理一个简单的AJAX请求，但是在将请求发送到正确的地址时遇到了问题。

我使用这个简单的路由和函数与app.py文件一起定义如何处理对URL / HelloWorld的请求：

@app.route('/HelloWorld', methods=['GET', 'POST'])
def HelloWorldRouted():
    return "Hello World!"

我正在使用此jQuery函数尝试向URL / HelloWorld发送请求：

$.ajax({
        type: "POST",
        url: "/HelloWorld",
        headers: {"Content-Type": "application/json"},
        success: function(response)
        {
            console.log('Response:\t', response)
        }
    });

当我启动Flask服务器并通过浏览器向URL：5000 / HelloWorld发送请求时，我可以看到预期的“Hello World”消息，以及服务器输出中的请求日志：

"GET /HelloWorld HTTP/1.1" 200

但是，当我尝试通过该网页提交请求时，我在控制台中收到以下错误：

POST URL / HelloWorld 404（未找到）

所以我的问题是我需要做什么才能使应用程序处理来自URL /而不是URL的请求：5000 /。如果重要的话，我将在AWS EC2 Amazon Linux实例上托管网页和服务器。

Answer 1

我举一个例子，将JSON数据发送到Flask路由并操纵模板中的响应。

app.py：

from flask import Flask, render_template, request, url_for, redirect

app = Flask(__name__)

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

@app.route('/HelloWorld', methods=['GET', 'POST'])
def HelloWorldRouted():
    if request.method == "POST":
        try:
            username = str(request.json['username'])
            return "Hello "+username+"!"
        except Exception as e:
            return "error: "+str(e)
if __name__ == '__main__':
    app.run(debug=True)

ajax_simple.html模板包含一个jquery cdn：

<!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="author" content="Ahmedur Rahman Shovon">
    <title>Ajax Example</title>
</head>
<body>
    <div id="result"></div>
<!-- jQuery -->
<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function () {
    user_data = JSON.stringify({"username": "shovon"});
    console.log(user_data);
    $.ajax({
        type: "POST",
        url: "/HelloWorld",
        data: user_data,
        headers: {"Content-Type": "application/json"},
        success: function(response)
        {
            $("#result").html(response);
        },
        error: function(response)
        {
            console.log(response);
        }        
    });
})
</script>

</body>
</html>

输出：

N.B。：我不知道您的云配置。这是在本地环境中测试的，也应该在AWS中运行。

Answer 2

我只使用像这样的 URL 将我所有的 ajax 请求发送到我的烧瓶应用

$.ajax({url: '/boxtimes/3/',});

你甚至可以像这样添加一个变量来传递

$.ajax({url: '/boxtimes/3/'+window.time3,});

这是flask 中的函数，如果它对我有帮助的话，它有一些额外的东西，但可能会清楚地说明如何最好地使用它。

@app.route("/boxtimes/<boxnumber>/<time>")
def timerbtns(boxnumber,time):
    global time3
    global time2
    global time1
    global timeset

    timeset = time
    if boxnumber == '3':
        time3 = timeset
    if boxnumber == '2':
        time2 = timeset
    if boxnumber == '1':
        time1 = timeset

    TemplateData = {
              'lc1'  : lc1,
              'lc2'  : lc2,
              'lc3'  : lc3,
              'lc4'  : lc4,
              'lc5'  : lc5,
              'lc6'  : lc6,
              'lc7'  : lc7,
              'lc8'  : lc8,
              'crnttime'  : crnttime,
              'timerstatus'  : timerstatus,
              'time1'  : time1,
              'time2'  : time2,
              'time3'  : time3,
    }

    return render_template('index.html', **TemplateData)

来自AJAX请求的Flask 404响应

2 个答案: