CODEWITHSUNDEEP
javascriptjquerypythonflaskget
Chandler Squires
Chandler Squires

Reputation: 407

Using info from GET request in jQuery to display transformed result through Flask

I'm trying to send the client info based on a certain selection that they make. I'd like to use a GET request since I'm not changing any info on the server. However, I don't know how to actually access any info from a GET request; I've been researching using querystrings with Flask but I haven't had much luck. I need to do extra manipulation to the result after it comes back to the javascript, so I'd like to keep my response in the success function as I have it below rather than use any sort of templating.

The only things that I could really afford to change are how the data gets sent (if it needs to be a JSON or something besides a string) and how it gets accessed in Flask. Is that possible and how would I do it?

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);
            }
        });
    });
});

Upvotes: 1

Views: 66

Answers (1)

DGS
DGS

Reputation: 6025

You should alter your ajax call so that it uses a named parameter rather than just setting the data equal to your options

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

Access the querystring with request.args.get('selectedOption') Like

@app.route("/")
def index():
    resp = myFunc(request.args.get('selectedOption'))
    return resp

Upvotes: 1

Related Questions