Question

现在，我正在开发一个简单的应用程序，只显示用户输入的内容。我有一个标准的Flask布局，如下所示：

/flaskTest
  main.py
  /static
    script.js
  /templates
    calculation.html

我正在努力将一个将用户创建的图表解析为JSON的应用程序，将该JSON发送到python文件以进行处理，然后发回该图表中的图像。网页。我完成了大部分工作，但由于我不熟悉Web开发，因此在集成客户端和服务器端组件方面遇到了很多麻烦。

我尝试使用jQuery和Flask来做这件事，但我一直在回复计算（）是用GET而不是POST来调用的，我不知道为什么。这是我的代码：

main.py

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=['GET','POST'])
def calculation():
    result = ''
    error = ''
    if request.method=='POST':
        result = request.data
    else:
        error= request.method
    return render_template('calculation.html', result=result, error=error)

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

calculation.html

<!DOCTYPE html>
<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../static/script.js"></script>
</script>
</head>

<body>
<h1>Calculation</h1>
<form>
    <input id="userInput" value="">
</form>
<button id="submit">Submit</button>
    {% if result %}
    <p>
        <label name='result'>Result: {{ result }}</label>
    </p>
    {% endif %}
    {% if error %}
    <p>
    <label name="error">{{ error }}</label>
    </p>
    {% endif %}
</body>
</html>

的script.js

$(document).ready(function(){
    $("#submit").click(function(){
        userInput = $("#userInput").val();
        $.post("main.py",userInput);
    });
});

我知道，对于我正在完成的简单任务，可能更容易将整个事情作为一个表单来完成，但我的最终项目将没有表单 - 只是一个用户可以创建图表的画布和一个提交的按钮要处理的图表，所以我希望保持这种实现不变。

Answer 1

变化：

$.post("main.py",userInput);

到

$.post("/",userInput);

该参数应该是URL而不是文件。

还应该注意，这不会更新页面上的任何内容。如果你想更新一些东西，你将不得不写一些JS来处理你的Flask应用程序的响应。另外，在查看构建calculation()视图的方式时，我不确定AJAX是否是您想要使用的。

更新：由于您希望这是异步的，因此您需要进行一些更改：

<强> main.py

import json
from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

@app.route("/", methods=['GET','POST'])
def calculation():
    if request.method=='POST':
        results = json.loads(request.data)
        # do stuff to result here
        # you will need to pass a dictionary back into jsonify()
        return jsonify(results)
    return render_template('calculation.html')

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

您需要创建一个新字典以传回jsonify()，以便进行所需的任何计算并从中创建新字典。我的建议是为此创建一个单独的函数并保存结果：

def some_calculation(a_dict):
    # MATH!
    return {'new_key': a_number}

然后在你看来：

response = some_calculation(result)
return jsonify(response)

我从模板中删除了多余的代码：

<强> calculation.html

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="../static/script.js"></script>
    </head>
    <body>
        <h1>Calculation</h1>
        <input id="userInput" value="" name="userInput">
        <button id="submit">Submit</button>
        <ul id="results">
        </ul>
    </body>
</html>

JSON响应将附加到新的<ul>。

<强>的script.js

$(document).ready(function(){
    $("#submit").click(function(){
        userInput = $("#userInput").val();
        $.ajax({
          type: "POST",
          url: '/',
          data: JSON.stringify({input: userInput}),
          contentType: 'application/json;charset=UTF-8',
          success: function(response){
            // console.log(response);
            $("#results").append("<li>" + response.input + "</li>");
          },
        });
    });
});

我更喜欢使用长格式$.ajax()方法，但可以随意使用post()。请注意，在您的应用中，您可能需要将response.input更改为response.whatever_your_new_key_is。我只是在我的示例中回复相同的JSON对象，所以我使用了我发送到服务器的相同密钥。如果您需要查看console.log()对象中的内容，如果您对其进行更多更改，则可以取消注释response行。因此，如果您的新词典看起来像{"answer": 42}，则会将其更改为response.answer。

Flask Requests问题 - 在任何操作之前返回GET

main.py

calculation.html

的script.js

1 个答案: