Joey Orlando Joey Orlando - 1 year ago 279
Python Question

Flask - Getting JavaScript and Python to Communicate

I'm building a rather simple CRM using the Flask Python framework. I have a database of companies that we are interested in contacting. The user first inputs how many companies they would like to contact. The user is then redirected to this page:

CRM First Screen

Essentially for each row/company on this page, the user will click either the contact or don't contact radio button.

What I am trying to accomplish

Once the user clicks the 'Let the Magic Happen' button at the bottom, JavaScript runs through each row and sees which button is clicked. It then appends the database unique ID to one of two arrays, 'contact' and 'remove'. This information then gets passed along to python via getJSON, python captures the json data using request.args.get.

Finally, Python does one of two things:

  • for the companies in the remove array, it changes a bool value in the respective database instance

  • for the companies in the contact array, it runs a separate function which uses SMTP to email that company

Where I am getting hung up

I can't seem to retrieve the json data in Python, I am trying to just do a simple print statement as of right now to show that I can pull in the data.

Also, would it be more efficient in terms of performance to have the javascript send each row to python individually or all at once in an array?


def send_emails():
contact = request.args.get('contact')
remove = request.args.get('remove')

print contact
print remove

return ('', 204) #No need to return anything


$('#batch-page .magic-button').click( function() {

//Iterate over each company row
$('#batch-page table').each(function(i, company){
company = $(company);
company_id = company.attr('class').split(' ')[1];

//Assign arrays for emailing and removing comapnies
var contact = [];
var remove = [];

//Check to see whether the contact or don't contact checkbox is checked
if(company.children('').children('input').is(':checked')) {
} else if (company.children('td.remove-company').children('input').is(':checked')) {

//Pass the data along to Python
$.getJSON('/send_emails', {
contact: contact,
remove: remove
$('div#batch-page').html('<p>Be patient, contacting companies!</p>');


{% for company in companies %}
<tr class="company-row {{ }}">
<td class="company-name">
<p>{{ company.company_name }}</p>
<td class="company-website">
<a href="{{ }}" target="blank_">{{ }}</a>
<td class="company-email">
<p>{{ company.email_address }}</p>
<td class="contact-company">
<input type="checkbox" class="contact" for='{{ }}'>
<td class="remove-company">
<input type="checkbox" class="dont-contact" for='{{ }}'></td>
<a class="btn btn-primary" data-toggle="collapse" data-target="#{{ }}-info">Change Company Information</a>
<tr class="company-info-row">

<td colspan="6" class="hiddenRow">
<div class="accordion-body collapse" id="{{ }}-info">
<form action="" id="{{ }}-edit-form" method="POST" class="update-company-form">
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
<div class="col-md-4">
<div class="form-group">
<label for="{{ }}-company-name">Company Name</label>
<input type="text" value="{{ company.company_name }}" id="{{ }}-company-name" class="form-control" name="company-name">
<label for="{{ }}-company-website">Company Website</label>
<input type="text" value="{{ }}" id="{{ }}-company-website" class="form-control" name="company-website">
<div class="col-md-4">
<div class="form-group">
<label for="{{ }}-email-address">Company Email</label>
<input type="text" value="{{ company.email_address }}" id="{{ }}-email-address" class="form-control" name="company-email">
<div class="form-group">
<input type="submit" form="{{ }}-edit-form" class="btn btn-default" value="Update">
<div class="col-md-4 ajax-message">
<i class="fa fa-clock-o fa-2x"></i>
<p style="display: inline-block;">Date scraped on: {{ company.scraped_on }}</p>
{% endfor %}

Update #1

Tried using the loads method from the json module to load in the request, I am getting the following error message:

Traceback (most recent call last):
File "/Library/Python/2.7/site-packages/flask/", line 1836, in __call__
return self.wsgi_app(environ, start_response)
File "/Library/Python/2.7/site-packages/flask/", line 1820, in wsgi_app
response = self.make_response(self.handle_exception(e))
File "/Library/Python/2.7/site-packages/flask/", line 1403, in handle_exception
reraise(exc_type, exc_value, tb)
File "/Library/Python/2.7/site-packages/flask/", line 1817, in wsgi_app
response = self.full_dispatch_request()
File "/Library/Python/2.7/site-packages/flask/", line 1477, in full_dispatch_request
rv = self.handle_user_exception(e)
File "/Library/Python/2.7/site-packages/flask/", line 1381, in handle_user_exception
reraise(exc_type, exc_value, tb)
File "/Library/Python/2.7/site-packages/flask/", line 1475, in full_dispatch_request
rv = self.dispatch_request()
File "/Library/Python/2.7/site-packages/flask/", line 1461, in dispatch_request
return self.view_functions[rule.endpoint](**req.view_args)
File "/Users/wyssuser/Desktop/dscraper/", line 82, in send_emails
content = json.loads(request.json)
File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/", line 338, in loads
return _default_decoder.decode(s)
File "/System/Library/Frameworks/Python.framework/Versions/2.7/lib/python2.7/json/", line 365, in decode
obj, end = self.raw_decode(s, idx=_w(s, 0).end())
TypeError: expected string or buffer

Answer Source

First of all jQuery.getJSON() issues a GET request using the JSON object you pass it as query parameters.

The problem here is that jQuery.getJSON() serializes the lists in a non traditional way. So if you looked at the request received sent by the browser it would look something like:[]=me&contact[]=others&contact[]=hr&remove[]=you&remove[]=doug

Now, Flask will parse that querystring into an args dict that has the keys contact[] and remove[] but since you're doing `request.args.get('contact'), you get nothing

The solution is to create the query parameters yourself before passing to jQuery.getJSON() like this. This can be done using jQuery.param():

//Assign arrays for emailing and removing companies
var contact = ["me", "others", "hr"];
var remove = ["you", "doug"];

//Pass the data along to Python
    $.param({ contact: contact, remove: remove }, true)

Note the true passed to jQuery.param(), it returns the querystring in the traditional format which looks like this:


Now, you can retrieve your parameters in Flask using

contacts = request.args.getList('contact')
print(contacts) # ['me', 'others', 'hr'] 
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download