使用jQuery中的GET请求信息通过Flask显示转换结果

时间:2015-08-17 03:02:53

标签: javascript jquery python flask get

我尝试根据他们制作的特定选择发送客户信息。我想使用GET请求,因为我没有更改服务器上的任何信息。但是,我不知道如何从GET请求中实际访问任何信息;我一直在研究使用Flask的查询字符串,但我没有多少运气。在回到javascript之后我需要对结果进行额外的操作,所以我想在成功函数中保持我的响应,因为我在下面有它,而不是使用任何形式的模板。

我真正能够承受的唯一改变是如何发送数据(如果它需要是JSON或除字符串之外的东西)以及如何在Flask中访问它。这可能吗,我该怎么做?

app.py

from flask import Flask, render_template, request, jsonify

app = Flask(__name__)

def myFunc(s):
    return str(s) + "!"

@app.route("/")
def index():
    # resp = myFunc(selectedOption)
    # return resp

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

的index.html

<!DOCTYPE html>
<html>
<head>
    <title>getTest</title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <script src="{{ url_for('static', filename='script.js')}}"></script>
</head>
<body>
    <select id="options">
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
    </select>
    <button class="btn btn-default" id="submit">Submit</button>
    <p id="demo"></p>
</body>
</html>

的script.js

$(document).ready(function() {
    $("#submit").click(function() {
        var selectedOption = $("#options").val();
        $.ajax({
            url: "/",
            method: "GET",
            data: selectedOption, //open to changing
            success: function(result) {
                $("#demo").html(result);
            }
        });
    });
});

1 个答案:

答案 0 :(得分:1)

您应该更改您的ajax调用,以便它使用命名参数而不是仅仅将数据设置为等于您的选项

    $.ajax({
        url: "/",
        method: "GET",
        data: {'selectedOption': selectedOption}, //open to changing
        success: function(result) {
            $("#demo").html(result);
        }
    });

使用request.args.get('selectedOption')

访问查询字符串
@app.route("/")
def index():
    resp = myFunc(request.args.get('selectedOption'))
    return resp