Flask - 收听POST请求 [英] Flask - Listen to POST request

查看:89
本文介绍了Flask - 收听POST请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用 Flask 来检索使用 javascript 生成的坐标值。烧瓶代码:

I'm using Flask in order to retrieve a coordinate value generated with javascript. Flask code:

from flask import Flask, request, session, g, redirect, url_for, abort, \
     render_template, flash, jsonify


@app.route('/geo', methods= ['GET', 'POST'])
def geo():
    return render_template('geo.html')


@app.route('/postmethod', methods = ['GET', 'POST'])
def get_post_location():
    where = request.form['location']
    return where

控制台日志:

XHR已完成加载:POSThttp://127.0.0.1:5000/postmethod\".

JAVASCRIPT

<!DOCTYPE html>
<html>
  <head>
    <title>Geolocation</title>

    <meta charset="utf-8">

     <!--jquery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>

  <body>

    <div id="map"></div>

    <script>

      function initMap() {
        var pos;
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 6
        });
        var infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };
            console.log(pos)

            infoWindow.setPosition(pos);
            infoWindow.setContent('You are here.');
            map.setCenter(pos);
          }, function() {
            handleLocationError(true, infoWindow, map.getCenter());
          });

          $.ajax({
            type: "POST",
            url: "/postmethod",

            // set content type header to use Flask response.get_json()
            contentType: "application/json",

            // convert data/object to JSON to send
            data: JSON.stringify({location: pos}),

            // expect JSON data in return (e.g. Flask jsonify)
            dataType: "json",

            // handle response
            success: function(response) {
                console.log(response);
            },
            error: function(err) {
                console.log(err);
            }
          });

        } else {
          // Browser doesn't support Geolocation
          handleLocationError(false, infoWindow, map.getCenter());

        }
      }

      function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBr8V0XkaNFYkNXcP6eJc76b6YutvizwNw&callback=initMap">
    </script>
    <form action="/postmethod", method="post">
    </form>
  </body>
</html>

问题

我该怎么听这个,所以我可以将 where 发送到其他一些脚本?

how do I listen to this, so I can send where to some other script?

编辑:

完全追溯(在PJ回答之后我做了 get_json(无声=假)

full traceback (after PJ's answer and I did get_json(silent=False)

127.0.0.1 - - [19/Mar/2017 23:20:26] "GET /geo HTTP/1.1" 200 -
data: {}
127.0.0.1 - - [19/Mar/2017 23:20:27] "POST /postmethod HTTP/1.1" 500 -
Traceback (most recent call last):
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1836, in __call__
    return self.wsgi_app(environ, start_response)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1820, in wsgi_app
    response = self.make_response(self.handle_exception(e))
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1403, in handle_exception
    reraise(exc_type, exc_value, tb)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1817, in wsgi_app
    response = self.full_dispatch_request()
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1477, in full_dispatch_request
    rv = self.handle_user_exception(e)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1381, in handle_user_exception
    reraise(exc_type, exc_value, tb)
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1475, in full_dispatch_request
    rv = self.dispatch_request()
  File "/Library/Python/2.7/site-packages/flask/app.py", line 1461, in dispatch_request
    return self.view_functions[rule.endpoint](**req.view_args)
  File "/Users/vitorpatalano/Documents/Code/Apps/App/app/app.py", line 134, in get_post_location
    where = data['location']
KeyError: 'location'


推荐答案

此问题与您从中发送数据的方式有关javascript到Flask。编码的位置信息不是字符串值,而是一个对象,或JSON。

The issue is related to the way you are sending the data from javascript to Flask. The encoded "location" information is not a string value, but it an object, or JSON.

所以,你真正要做的是发送信息(JSON)在Javascript和&之间来回传递烧瓶

So, really what you're looking to do is send information (JSON) back and forth between Javascript & Flask

以下是如何完成此操作。而不是jQuery $ .post() 方法,而不是直接使用 $。ajax() 方法。

Here is how to accomplish this. Instead of the jQuery $.post() method you need to use the $.ajax() method directly.

更新:将我的代码更新为本地计算机上的完整工作示例。 $ .ajax()方法过早被调用...需要将其移动到地理定位服务的调用范围内。

UPDATE: Updating my code to a full working example on my local machine. The $.ajax() method was being called too early...needed to move it inside the scope of the call to the geolocation service.

另一件需要考虑的事情关于链接和管理异步调用的流程是 承诺 库。

Another thing to look into regarding chaining and managing the flow of asynchronous called is the Promise library.

Javascript / HTML:

<!DOCTYPE html>
<html>
<head>
    <title>Geolocation</title>
    <meta charset="utf-8">
    <!--jquery-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <style>
        #map {height: 100%;}
        html, body {height: 100%;margin: 0;padding: 0;}
    </style>
</head>
<body>
    <div id="map"></div>
    <script>

    function initMap() {
        var pos = {},
            map = new google.maps.Map(document.getElementById('map'), {
                center: {lat: -34.397, lng: 150.644},
                zoom: 6
            }),
            infoWindow = new google.maps.InfoWindow({map: map});

        // Try HTML5 geolocation.
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
            pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
            };

            infoWindow.setPosition(pos);
            infoWindow.setContent('Smells like coffee...');
            map.setCenter(pos);

            $.ajax({
                type: "POST",
                url: "/postmethod",
                contentType: "application/json",
                data: JSON.stringify({location: pos}),
                dataType: "json",
                success: function(response) {
                    console.log(response);
                },
                error: function(err) {
                    console.log(err);
                }
            });

            }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
            });
        } else {
            // Browser doesn't support Geolocation
            handleLocationError(false, infoWindow, map.getCenter());
        }
    }

    function handleLocationError(browserHasGeolocation, infoWindow, pos) {
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
        'Error: The Geolocation service failed.' :
        'Error: Your browser doesn\'t support geolocation.');
    }

    </script>
    <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBr8V0XkaNFYkNXcP6eJc76b6YutvizwNw&callback=initMap">
    </script>
</body>
</html>

在Flask中,您现在可以使用 get_json() 方法将重现您在python中用javascript编码的数据结构。你应该使用Flask jsonify() 将回复返回给您的javascript电话。

Within Flask you can now use the get_json() method which will reproduce the data structure you've encoded in javascript in python. You should use Flask jsonify() to return a response back to your javascript call.

Python:

@app.route('/postmethod', methods=['POST'])
def postmethod():
    data = request.get_json()
    print data
    return jsonify(data)

这篇关于Flask - 收听POST请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆