[Flask] Help with simple example using AngularJS

Clint Olsen clint.olsen at gmail.com
Wed Jan 31 19:18:51 EST 2018


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
>
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://mail.python.org/pipermail/flask/attachments/20180131/68c3510f/attachment.html>


More information about the Flask mailing list