Posting JSON to flask template

Question

I've been banging my head against a wall trying to work out how to firstly get JSON data returned from my search (which I've now solved thankfully) and to then update my jinja template with the JSON data spewed out.

I've tried a few methods but I seem to be going around in circles and as I'm not very experienced with either AJAX or Flask I tend to cause more problems than I can fix.

I have an AJAX file but I don't believe it is working (if it is even correct) but I'm guessing that this needs to be instructed to take the data and put it into the correct table/area of the rendered template? my question is how can I make this happen?

Below is my app.py

from flask import request, jsonify
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_bootstrap import Bootstrap
from flask import render_template
from sqlalchemy import create_engine
from flask_marshmallow import Marshmallow
import json

app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI']='postgresql://postgres:test@localhost/postgres'
engine = create_engine('postgresql+psycopg2://postgres:test@localhost/postgres')
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

app.debug = True
app.config['SQLALCHEMY_ECHO'] = True
db=SQLAlchemy(app)
Bootstrap(app)
ma=Marshmallow(app)
# classes

class Sdctest(db.Model):
    startchass= db.Column (db.Text, primary_key=True)
    cusname= db.Column (db.Text)
    chassistype1= db.Column (db.Text)
    axleqty= db.Column (db.Integer)
    tyres= db.Column (db.Text)
    extlength= db.Column (db.Text)
    neck= db.Column (db.Text)
    stepheight= db.Column (db.Text)
    reardeckheight= db.Column (db.Text)
    siderave= db.Column (db.Text)
    steer= db.Column (db.Text)
    sockets= db.Column (db.Text)
    containerstwistlock= db.Column (db.Text)
    headboard= db.Column (db.Text)





class TableSchema(ma.Schema):
    class Meta:
        fields = ('startchass', 'cusname', 'chassistype1', 'axleqty', 'tyres', 'extlength', 'neck', 'stepheight', 'reardeckheight', 'siderave', 'steer', 'sockets', 'containerstwistlock', 'headboard')
tables = TableSchema()
tabless = TableSchema(many=True)

#routes
@app.route('/')

def index():

        return render_template('index.html')

@app.route('/platform', methods=['GET', 'POST'])

def curtainsider():
    options = db.session.query(Sdctest.chassistype1).distinct().all()
    axleopts = db.session.query(Sdctest.axleqty).distinct().all()
    # enables passing user input to the variable
    if request.method == 'POST':
        # query parameters and their corresponding database columns
        param_columns = {
            "startchass": "startchass",
            "cusname": "cusname",
            "chassistype1": "chassistype1",
            "axleqty": "axleqty",
            "tyres": "tyres",
            "siderave": "siderave",
            "steer": "steer",
            "sockets": "sockets",
            "containerstwistlock":"containerstwistlock",
            "headboard": "headboard",

        }
        param_column2 = {
            "startchass": "startchass",
            "extlength": "extlength",
            "neck": "neck",
            "stepheight": "stepheight",
            "reardeckheight": "reardeckheight",

        }
        # Get all of the column filters where the parameters aren't empty

        filters = {
            column: request.form[param]
            for param, column in param_columns.items()
            if request.form.get(param, "") != ""
        }
        filters2 = {
            column: request.form[param]
            for param, column in param_column2.items()
            if request.form.get(param, "") != ""
        }
        #filter most columns using fuzzy match
        query = Sdctest.query
        for column, value in filters.items():
            query = query.filter(getattr(Sdctest, column).ilike(f'%{value}%')) .order_by(Sdctest.startchass.desc())
        for column, value in filters2.items():
            query = query.filter(getattr(Sdctest, column).ilike(f'{value}')).order_by(Sdctest.startchass.desc())
        results2 = query.all()
        result2 = tabless.dump(results2, object)
        # renders the template
        return render_template('platform.html')
        return jsonify(result2)

    else:
        return render_template('platform.html', options=options)

    if __name__ == "__main__":
        run_server()`

and this is my template:




    
    



    
    Sales Search




ALPHA
 





    
   
    
    
    
    
    

    
    

    
    



        
    
    

    
   
    

     
   
     

     
   

     
   
    

     
   
     

     
   
    

     
   
    

    
   
    

    
   
    

 
    
    search for specific items/text here:
    



Click on a column header to exclude it from your results

{% block body %}

    


{% for item in result2 %}
  
  {% endfor %}

  
    
      Chassis Number 

      Customer name

      Chassis Type

        Axles

        Tyre

        External Length

        Neck

        Step height

        Rear Deck height

        Siderave

        Steer

        Sockets

        Twistlocks

        Headboard

    
  

{{ item.startchass }} {{ item.cusname }} {{ item.chassistype1 }} {{ item.axleqty }} {{ item.tyres }} {{ item.extlength }} {{ item.neck }} {{ item.stepheight }} {{ item.reardeckheight }} {{ item.siderave }} {{ item.steer }} {{ item.sockets }} {{ item.containerstwistlock }} {{ item.headboard }}
      


    
      Click here to show hidden columns
    

      



{% endblock %}

and lastly my (probably not working) AJAX file:

$(function() {
$('form').on('submit', function(e){
        $.ajax({
            url: '/platform',
            data: $('form').serialize(),
            type: 'POST',
            cusname:cusname,
            success: function(response) {
                console.log(response);
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

Jessi · Accepted Answer

I don't fully understand what you are trying to achieve but I'm guessing you try to take the search box inputs and use those to query the DB and return JSON into the table? If this is not what you try to achieve, please answer four questions that I've commented above. Also, I strongly recommend you use some sort of validation in your search box since it is directly going into your query (DB). You can use Flask-WTF(server side form validation- better) or even a client side form validation library (weaker).

Considering above is the case for you, below is the minimized example.

Ajax

$(function() {
// please do not use form as an ID as this may be a potential error later on.
$('#form').on('submit', function(e){
        $.ajax({
            url: '/platform', //not a good practice to use /platform, but instead use "{{url_for('.curtainsider')}}"
            data: $('form').serialize(), //removed cusname, if you need to pass cusname into the server, create a hidden input field and include it inside 
            type: 'POST',
            success: function(response) {
                var dbData = response.result;
                // do your thing here with the data that was passed from curtainsider()
            },
            error: function(error) {
                console.log(error);
            }
        });
    });
});

View

@app.route('/platform', methods=['GET', 'POST'])
def curtainsider():
    # to parse the serialized form.
    if request.method == 'POST':
        data_one = request.form['data_one']
        cusname = request.form['cusname']
        # and so on....
        # make DB queries based on your input
        return jsonify({'result': db_data})

Below is when it is CSRF protected.

If your form is CSRF protected, attach below code to the end of ajax function. And also include {{form.csrf_token}} inside your form element in HTML.

$.ajaxSetup({
    beforeSend: function (xhr, settings) {
        if (!/^(GET|HEAD|OPTIONS|TRACE)$/i.test(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", "{{ form.csrf_token._value() }}")
        }
    }
});

Posting JSON to flask template

Answers (1)

Related Questions