[Flask] Help with simple example using AngularJS

Wed Jan 31 18:32:15 EST 2018

Hi Adil:

I did try adding JSON.stringify() as you suggested, but this didn't seem to
have an effect on the behavior of the post contents.

Thanks,

-Clint

On Wed, Jan 31, 2018 at 3:11 PM, Adil Hasan <paradox2005 at gmail.com> wrote:

> Hello Clint,
> I wasn't using Flask one one of my backends (just plain cgi python), but I
> had to pass the JSON object as a string. Could you try out
>
>          $http.post('/', JSON.stringify(data), config)
>
> and see if that gives you what you want?
>
> hth
> adil
>
> On Mon, Jan 29, 2018 at 04:52:08PM -0800, Clint Olsen 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/20180131/24f98595/attachment-0001.html>