CODEWITHSUNDEEP
pythonjquerypython-3.xflask
silverhash
silverhash

Reputation: 919

How to send html data to flask without form

i know you can easily send form data to flask using calls like $.ajax() in jquery but what I need is a way to send data to a flask server using an element, say a <p> tag.

For example: test.html

<p data-rep='testentry' class='qtemp'>Entry00</p>
<p data-rep='testentry01' class='qtemp'>Entry01</p>

index.js

$(document).ready(function(){
    $('.qtemp').on('click',function(){
        var layout = $(this).data('rep');

        $.ajax({
            url: 'workstation',
            type: 'POST',
            data: layout
        });     
    });
});

main.py

@app.route('/workstation',methods=['GET','POST'])
def workstation(data):
    layout = data

    return render_template('station.html',target=layout)

Running This App:

  1. Doesn't render the template station.html
  2. Doesn't print the layout variable which contains the data sent (I added a print statement and it didn't work,even tried writing it to file)

What i've Tried:

  1. In index.js, replace data: layout with data: JSON.stringify(layout) then in .main.py , replace layout = data with layout = request.args.get('data').

needless to say, all of this doesn't work

NB: Using an html form is not an option

Upvotes: 0

Views: 9254

Answers (1)

Ajax1234
Ajax1234

Reputation: 71451

You need to modify your ajax to ensure that you are receiving JSONified results from the Python route. Also, in order to store data returned from an ajax call, you must access the values by key name using flask.request.args:

In index.js:

$(document).ready(function(){
   $('.qtemp').on('click',function(){
    var layout = $(this).data('rep');
     $.ajax({
      url: "/workstation",
      type: "get",
      data: {layout: layout},
      success: function(response) {
        var new_html = response.html;
      },
     });     
  });
});

In main.py:

@app.route('/workstation')
def workstation():
  layout = flask.request.args.get('layout')
  return flask.jsonify({'html':flask.render_template('station.html',target=layout)})

Edit: you can store the value garnered from the ajax request in flask.session, and redirect to the desired page. To do so, create an additional route to save the value, and then utilize window.location.replace in the body of the ajax success function:

In index.js:

$(document).ready(function(){
  $('.qtemp').on('click',function(){
    var layout = $(this).data('rep');
    $.ajax({
      url: "/update_layout",
      type: "get",
      data: {layout: layout},
      success: function(response) {
        window.location.replace('/workstation');
      },
    });     
  });
});

In main.py

import string, random

app.secret_key = ''.join(random.choice(string.printable) for _ in range(20))
#secret_key needed for session implementation

@app.route("/update_layout")
def update_layout():
  flask.session['layout'] = flask.request.args.get('layout')
  return flask.jsonify({'success':'True'})

@app.route('/workstation', methods=['GET'])
def workstation():
  return flask.render_template('station.html',target = flask.session['layout'])

Upvotes: 4

Related Questions