Jquery Flask404对AJAX请求的响应_Jquery_Python_Ajax_Flask

Jquery Flask404对AJAX请求的响应

jquery python ajax flask

Jquery Flask404对AJAX请求的响应,jquery,python,ajax,flask,Jquery,Python,Ajax,Flask,我试图获得一个简单的AJAX请求，由Flask处理，但是在将请求发送到正确的地址时遇到了问题我在app.py文件中使用这个简单的路由和函数来定义如何处理对URL/HelloWorld的请求： @app.route('/HelloWorld', methods=['GET', 'POST']) def HelloWorldRouted(): return "Hello World!" $.ajax({ type: "POST", url: "/Hello

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

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

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

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

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

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

$.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实例上，如果这有任何关系的话。

我将给出一个示例，将JSON数据发送到Flask route并在模板中操作响应

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\u 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>


Ajax示例
$（文档）.ready（函数（）{
user_data=JSON.stringify（{“username”：“shovon”}）；
console.log（用户_数据）；
$.ajax({
类型：“POST”，
url:“/HelloWorld”，
数据：用户数据，
标题：{“内容类型”：“应用程序/json”}，
成功：功能（响应）
{
$（“#结果”）.html（回复）；
},
错误：函数（响应）
{
控制台日志（响应）；
}        
});
})

输出：

注意：我不知道你的云配置。这是在本地环境中测试的，也应该在AWS中运行。

我给出了一个示例，将JSON数据发送到Flask route并在模板中操作响应

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\u 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>


Ajax示例
$（文档）.ready（函数（）{
user_data=JSON.stringify（{“username”：“shovon”}）；
console.log（用户_数据）；
$.ajax({
类型：“POST”，
url:“/HelloWorld”，
数据：用户数据，
标题：{“内容类型”：“应用程序/json”}，
成功：功能（响应）
{
$（“#结果”）.html（回复）；
},
错误：函数（响应）
{
控制台日志（响应）；
}        
});
})

输出：

注意：我不知道你的云配置。这是在本地环境中测试的，也应该在AWS中运行。

我只使用如下URL将所有ajax请求发送到flask应用程序

$.ajax（{url:'/boxtimes/3/'，}）；

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

$.ajax（{url:'/boxtimes/3/'+window.time3，}）；

这是flask中的函数，如果它有助于我的工作，但可能会让我清楚地知道如何最好地使用它

@app.route（“/boxtimes/”）
def timerbtns（箱号、时间）：
全球时间3
全球时间2
全球时间1
全球时间集
时间集=时间
如果boxnumber='3'：
时间3=时间集
如果boxnumber==“2”：
时间2=时间集
如果boxnumber='1'：
时间1=时间集
TemplateData={
“lc1”：lc1，
“lc2”：lc2，
“lc3”：lc3，
“lc4”：lc4，
“lc5”：lc5，
“lc6”：lc6，
"立法会七题":立法会七题,，
"立法会八题":立法会八题,，
“crnttime”：crnttime，
“timerstatus”：timerstatus，
“time1”：time1，
“time2”：time2，
“time3”：time3，
}
返回呈现模板（'index.html'，**TemplateData）

我只使用如下URL将所有ajax请求发送到我的flask应用程序

$.ajax（{url:'/boxtimes/3/'，}）；

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

$.ajax（{url:'/boxtimes/3/'+window.time3，}）；

这是flask中的函数，如果它有助于我的工作，但可能会让我清楚地知道如何最好地使用它

@app.route（“/boxtimes/”）
def timerbtns（箱号、时间）：
全球时间3
全球时间2
全球时间1
全球时间集
时间集=时间
如果boxnumber='3'：
时间3=时间集
如果boxnumber==“2”：
时间2=时间集
如果boxnumber='1'：
时间1=时间集
TemplateData={
“lc1”：lc1，
“lc2”：lc2，
“lc3”：lc3，
“lc4”：lc4，
“lc5”：lc5，
“lc6”：lc6，
"立法会七题":立法会七题,，
"立法会八题":立法会八题,，
“crnttime”：crnttime，
“timerstatus”：timerstatus，
“time1”：time1，
“time2”：time2，
“time3”：time3，
}
返回呈现模板（'index.html'，**TemplateData）

在您的路线中，它应该是

methods=['GET'，'POST']

。你刚才忘记了“s”在我的代码中是正确的，我只是在这里输入了错误。在你的路线中应该是

methods=['GET'，'POST']

。你只是忘记了“s”在我的代码中是正确的，我只是在这里打错了。