[Flask] Help with simple example using AngularJS
Clint Olsen
clint.olsen at gmail.com
Thu Feb 1 12:51:47 EST 2018
When I got the exception, I do see the following in the browser console:
Possibly unhandled rejection: {"data":"<!DOCTYPE HTML PUBLIC \"-//W3C//DTD
HTML 3.2 Final//EN\">\n<title>400 Bad Request</title>\n<h1>Bad
Request</h1>\n<p>The browser (or proxy) sent a request that this server
could not
understand.</p>\n","status":400,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json,
text/plain, */*"},"url":"/","data":{"first_name":"asdfaasdfasdf"}},"statusText":"BAD
REQUEST","xhrStatus":"complete"}
This would imply that the JS code is sending a sensible JSON fragment,
correct?
-Clint
On Thu, Feb 1, 2018 at 9:45 AM, Gergely Polonkai <gergely at polonkai.eu>
wrote:
> 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/059090a8/attachment.html>
More information about the Flask
mailing list