Flask - 收听POST请求

时间:2017-03-19 23:53:25

标签: javascript python flask geolocation

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

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 finished loading: POST "http://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发送给其他一些脚本?

修改

完全追溯(在PJ回答之后我做了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'

1 个答案:

答案 0 :(得分:3)

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

所以,你真正希望做的是在Javascript和amp;之间来回发送信息(JSON)。烧瓶

以下是如何实现这一目标。您需要直接使用$.post()方法而不是jQuery $.ajax()方法。

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

关于链接和管理异步调用流的另一个问题是Promise库。

<强>的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调用。

<强>的Python:

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