1

When getting from data in Flask, can I somehow bind html elements and their values to an object without using Jinja templating.

Or do I have to send the data via a manual HTTP Post?

pigletfly
  • 1,051
  • 1
  • 16
  • 32
Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
  • I'm not sure what you are asking, but have you looked at [`flask-wtf`](https://flask-wtf.readthedocs.org/en/latest/)? It integrates the excellent [`wtforms` library](http://wtforms.readthedocs.org/en/latest/) with Flask, making form handling a bit less of a chore. – Burhan Khalid Nov 06 '13 at 07:06
  • Yes i have but it seems you have to use Jinja templates for that – Robert Lemiesz Nov 06 '13 at 07:13
  • What is the actual problem you are trying to solve? – Burhan Khalid Nov 06 '13 at 07:14
  • I have a signup for my website. I want to be able to send that data either via a POST request, or by sometype of html databinding. However I do not want to use Jinja because it does not play nicely with bootstrap – Robert Lemiesz Nov 06 '13 at 07:21
  • 1
    Jinja has nothing to do with bootstrap - can you update your question with an example that highlights the problem you are facing? – Burhan Khalid Nov 06 '13 at 07:29
  • bootstrap and jinja2 shouldn't conflict at all. It's probably you writing bad HTML, so bootstrap can really apply on it. And you can still use flask-wtf to display forms and get the data sent from the client – Paco Nov 13 '13 at 10:36

2 Answers2

1

I think what you are really asking is "given a client-side JavaScript object, how can I serialize it so that I can easily access the data server-side". If that is your question, there are two ways to do so:

  1. The way you provided in your answer, serializing your object as JSON and submitting it as the body of your POST request:

    @app.route("/user", methods=("POST",))
def save_user():
    data = request.get_json()
    # ... etc. ...

  2. Using FormData on the client side:

    var yourUser = {
    firstname: "Joe",
    lastname: "Smith",
    email: "joe@smith.com",
    password: "12345"
};

var formData = new FormData();
Object.keys(yourUser).forEach(function(key) {
    formData.append(key, yourUser[key]);
});
// Post formData back to your controller using XHR

    combined with the normal request.form access on the server side:

    @app.route("/user", methods=("POST",))
def save_user():
    data = request.form
    # ... etc. ...
Sean Vieira
  • 155,703
  • 32
  • 311
  • 293
  • 1
    Hi, I was trying to upload a file through ajax(http://blog.teamtreehouse.com/uploading-files-ajax), then try to get data in the form. I have to set processData to false in ajax. However, the ImmutableMultiDict only contains `ImmutableMultiDict([('------WebKitFormBoundaryoQPpntEvtoR8exZF\r\nContent-Disposition: form-data; name', u'"paper_json"\r\n\r\n.......\r\n------WebKitFormBoundaryoQPpntEvtoR8exZF--\r\n')])` the keys and values are messed. request.files returns nothing. Do you have any idea? Thanks. – LeonF Oct 19 '17 at 03:17
0

Solve the issue with this 

@app.route('/post/user',methods=['POST','GET'])
def saveuser():
 data = json.loads(request.data)
 firstname = data['firstname']
 newuser = User(firstname,lastname,email,password)

 db.session.add(newuser)
 db.session.commit()

first I get the json string from request.data, then i parse it into a dict and save it to my db

Robert Lemiesz
  • 1,026
  • 2
  • 17
  • 29
  • Just FYI, `request` has a `get_json` method (or a `json` attribute pre-0.10) that will give you the equivalent of `json.loads`. So you can do: `data = request.get_json()`. – Sean Vieira Nov 06 '13 at 23:03