[Flask] Help with simple example using AngularJS

Gergely Polonkai gergely at polonkai.eu
Thu Feb 1 12:45:51 EST 2018


Yes, I see that, but my guess was thatʼs the result of JSON.Stringifying
the form data.

If not, it would help a lot if OP could check (eg. in the browser's
development console) what is actually sent.

On Thu, Feb 1, 2018, 18:42 Clint Olsen <clint.olsen at gmail.com> wrote:

> Actually, you can't. Writing the code fragment you've shown results in an
> exception. The key in the immutable dict is actually a key *AND* value
> pair:
>
> ImmutableMultiDict([('{"nonstringify":"Cl","stringy":"foo"}', '')])
>
> If I ask for the keys for this object, I get:
>
> ['{"first_name":"asdfasdf"}']
>
> Which doesn't make sense to me how I get this extra level of indirection...
>
> Thanks,
>
> -Clint
>
>
>
> On Wed, Jan 31, 2018 at 9:22 PM, Gergely Polonkai <gergely at polonkai.eu>
> wrote:
>
>> Hello,
>>
>> request.form is an ImmutableMultiDict. You can simply subscript it like
>>
>> first_name = request.form['first_name']
>>
>> given the name of the HTML form field is first_name. No to_dict() or
>> other black magic is needed (well, not unless you have multiple fields with
>> the same name).
>>
>> Best,
>> Gergely
>>
>> On Thu, Feb 1, 2018, 01:19 Clint Olsen <clint.olsen at gmail.com> wrote:
>>
>>> Hi:
>>>
>>> I should probably add that before I tried messing around with decoding
>>> the form, I just blurted out the object on the receiving side and got:
>>>
>>> from flask import Flask, request, send_file
>>>
>>> app = Flask(__name__)
>>>
>>> @app.route('/', methods=['GET', 'POST'])
>>> def index():
>>>     print('Request: %s' % request.method)
>>>     if request.method == 'POST':
>>>         data = request.form #.to_dict()
>>>         print('First name from form is %s' % data)
>>>         return 'OK'
>>>     else:
>>>         return send_file("static/index.html")
>>>
>>> if __name__ == "__main__":
>>>     app.run(host='0.0.0.0', debug=True)
>>>
>>> First name from form is
>>> ImmutableMultiDict([('{"non-stringify":"asdfasdf"}', '')])
>>>
>>> So, even prior to attempt digging the info out of this structure I see
>>> the issue.
>>>
>>> Thanks,
>>>
>>> -Clint
>>>
>>> On Mon, Jan 29, 2018 at 4:52 PM, Clint Olsen <clint.olsen at gmail.com>
>>> wrote:
>>>
>>>> Hi:
>>>>
>>>> I'm new to Flask and Angular and only done a little web-based
>>>> programming, so please forgive my lack of understanding. I've just cobbled
>>>> together examples from Flask as well as some examples online to come up
>>>> with the following.
>>>>
>>>> I am interested in the most basic functionality of modifying a web form
>>>> and capturing that in the back-end to prove I can get data at least in one
>>>> direction:
>>>>
>>>> *static/app.js*:
>>>>
>>>> var app = angular.module('myApp', []);
>>>>
>>>> app.controller('formCtrl', function($scope, $log, $http) {
>>>>     $scope.firstName = "John";
>>>>
>>>>     $scope.SendData = function () {
>>>>         var data = { 'foo': $scope.firstName };
>>>>
>>>>         var config = {
>>>>             headers : {
>>>>                 'Content-Type':
>>>> 'application/x-www-form-urlencoded;charset=utf-8;'
>>>>             }
>>>>         }
>>>>
>>>>         $http.post('/', data, config)
>>>>             .success(function(results) {
>>>>             $log.log(results);
>>>>         })
>>>>         .error(function(error) {
>>>>             $log.log(error);
>>>>         });
>>>>     };
>>>> });
>>>>
>>>> *static/index.html*:
>>>>
>>>> <!doctype html>
>>>> <html>
>>>>     <head>
>>>>         <script src="
>>>> https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js
>>>> "></script>
>>>>                 <script src="
>>>> http://code.angularjs.org/1.5.3/angular-route.min.js"></script>
>>>>                 <script src="/static/app.js"></script>
>>>>                 <link rel="stylesheet" href="/static/style.css" />
>>>>     </head>
>>>>     <body>
>>>>         <div ng-app="myApp" ng-controller="formCtrl">
>>>>         <form>
>>>>             First Name: <input type="text" ng-model="firstName">
>>>>
>>>>             <button data-ng-click="SendData()">
>>>>                 Send
>>>>             </button>
>>>>         </form>
>>>>
>>>>         <h1>You entered: {{firstName}}</h1>
>>>>
>>>>         <div>
>>>>     </body>
>>>> </html>
>>>>
>>>> *app.py*:
>>>>
>>>> from flask import Flask, request, send_file
>>>>
>>>> app = Flask(__name__)
>>>>
>>>> @app.route('/', methods=['GET', 'POST'])
>>>> def index():
>>>>     print('Request: %s' % request.method)
>>>>     if request.method == 'POST':
>>>>         data = request.form.to_dict()
>>>>         print('First name from form is %s' % data)
>>>>         return 'OK'
>>>>     else:
>>>>         return send_file("static/index.html")
>>>>
>>>> if __name__ == "__main__":
>>>>     app.run(host='0.0.0.0', debug=True)
>>>>
>>>> This code (sort of) works, but the message I get from index() is kind
>>>> of weird, so maybe I'm not packaging the data payload correctly? In this
>>>> example I just populate the form with a "C":
>>>>
>>>> Flask log:
>>>>
>>>> Request: GET
>>>> 127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /? HTTP/1.1" 200 -
>>>> 127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /static/app.js HTTP/1.1" 200 -
>>>> 127.0.0.1 - - [29/Jan/2018 16:40:11] "GET /static/style.css HTTP/1.1"
>>>> 200 -
>>>> Request: POST
>>>> First name from form is {'{"foo":"C"}': ''}
>>>> 127.0.0.1 - - [29/Jan/2018 16:40:16] "POST / HTTP/1.1" 200 -
>>>>
>>>> I'm not not quite sure why the key/value pair is embedded in a
>>>> dictionary as the key with an empty value.
>>>>
>>>> Any pointers would be much appreciated!
>>>>
>>>> Thanks,
>>>>
>>>> -Clint
>>>>
>>>>
>>> _______________________________________________
>>> Flask mailing list
>>> Flask at python.org
>>> https://mail.python.org/mailman/listinfo/flask
>>>
>>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/flask/attachments/20180201/a1228b26/attachment-0001.html>


More information about the Flask mailing list