What format is a jQuery ajax post request sending the data in and how can it be accessed through Flask's request object?

Question

I am creating a web page that sends an XHR AJAX request using jQuery's $.post() object. The post is being received by a Flask app that is on another domain. The Javascript is below:

$.post('http://myurl.com/create', {
     'title': sender.title,
      'url': sender.url
});

The applicable Flask router code is:

@app.route('/create', methods=['GET', 'POST'])
@crossdomain(origin='*')
def create():
    print(request.args.get('title'))
    if request.method == 'POST':
        title = request.form['title']
        url = request.form['url']

        new_mark = Mark(
            title=title,
            url=url
        )
        new_mark.save()

        return redirect(url_for('index'))

The Python is working great when a form is submitted to the url, but not when I POST through jQuery's AJAX object. It throws a 400 error every time I try to make the AJAX request. I looked at Flask's request.args object, but that has nothing in it when the request is made.

Any ideas?

You can check the logged requests in your browser's network tab — Alexander, Dec 25 '12 at 20:48
To post cross-domain, your Flask app needs to implement CORS. CORS requests from IE are not supported by jQuery because IE implements it's own object for cross-domain requests. There are jQuery extensions that try to implement it though. — Kevin B, Dec 25 '12 at 20:56
Ok... @KevinB I found https://gist.github.com/1346220 and tried implementing that like '@app.route('/createcross', methods=['POST']) def createcross(data): response = make_response(data)` but when I try that it throws an error that createcross() takes exactly one argument, but 0 are given... any ideas? — chromedude, Dec 25 '12 at 21:08
The jQuery side of it looks fine, i don't know enough about python or flask to help with that side of it. — Kevin B, Dec 25 '12 at 21:26

Haythem Tlili · Answer 1 · 2012-12-25T20:53:50.193

0

The problem is that your Ajax request is not configured to target cross domain requests. I suggest the use of $.ajax instead of $.post for more flexibility and to set crossDomain: true in your request configuration.

$.ajax({
  type: 'POST',
  url: 'http://myurl.com/create',
  crossDomain: true,
  data: '{'title': sender.title, 'url': sender.url}',
  dataType: 'jsonp',
  success: function(responseData, textStatus, jqXHR) {
    // Success Callback
  },
  error: function (responseData, textStatus, errorThrown) {
    // Error Callback
  }
});

Hope this will help.

edited Dec 25 '12 at 20:53

answered Dec 25 '12 at 20:47

Haythem Tlili

566
3
10

1

setting cross-domain to true alone doesn't make cross-domain requests work. In the documentation, that option is for making a *same domain* request perform as if it were cross-domain, for example, a same-domain jsonp request. Since it is a cross-domain request, it already is true. – Kevin B Dec 25 '12 at 20:50

score 0 · Answer 2 · answered Dec 25 '12 at 23:26

0

I am stupid. I was not actually sending any data because sender.url and sender.title did not contain any values -_-.

answered Dec 25 '12 at 23:26

chromedude

4,246
16
65
96

What format is a jQuery ajax post request sending the data in and how can it be accessed through Flask's request object?

2 Answers2