Passing variable from javascript to flask using AJAX

Question

I've looked into numerous stack overflow questions, and they've gotten me halfway to a solution, however I am stuck at the moment trying to pull the data out of the request.

JAVASCRIPT

var teamData = homeTeam + "-" + awayTeam;
        $.ajax({
                url: "/teamSelected",
                type: "GET",
                data: teamData,
                success: function(response) {
                alert(response);
            },
        });

Where teamData takes the form of something like: "Chelsea-Westham"

FLASK

import csv
import time
import datetime
from selenium import webdriver
from selenium.webdriver.common.by import By
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

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

@app.route("/teamSelected")
def new():
    data = request.args.get('teamData')
    return data;

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

At the moment this is giving me a "500 (INTERNAL SERVER ERROR)".

The aim of the code will be to get the team names selected from a dropdown, which are passed via the AJAX call. The python script will then take this data, scrapes information about the given game and return live commentary updates to javascript which I'll then render to the webpage.

My knowledge here falls down at the data = request.args.get('jsdata') line. To be honest this is just something I copied form other solutions I've seen, and have tried copying other solutions with no luck.

Apologies, as I know this is a commonly asked question, but I just can't seem to figure it out. Thanks in advance though!

Edit
As far as I'm aware other solutions discuss passing form data or JSON data, while here I am simply trying to pass a single variable. If there are solutions to this I'd love to see them, but still haven't found a solution which has helped me.

score 0 · Answer 1 · answered Sep 22 '18 at 19:55

You can create an object for your key-value pair and pass it to the AJAX call in this way:

$.ajax({
  url: '/teamSelected',
  type: "GET",
  data: { teamData: 'myTeam-yourTeam'},
  success: function(){
    alert(this.url)
  }
});

When you send a GET request, the args you want to pass are encoded in the URL. In this example, the key-value pair for teamData is encoded after the question mark like so:

/teamSelected?teamData=myTeam-yourTeam

request.args holds the values in the query string. In your Flask view, you can therefore retrieve the value of teamData using request.args.get('teamData').

Have a look at this jsfiddle to better understand how it works.

Passing variable from javascript to flask using AJAX

1 Answers1