求助：如何将JS变量传入Python代码？实现HTML5地理定位坐标复用

Hey there! I totally get where you're coming from—getting frontend JavaScript data into Python can feel tricky if you're new to the client-server flow. Let's walk through a straightforward, working solution using a simple Python web server (Flask) and vanilla JavaScript (no jQuery needed, though we can cover AJAX too if you prefer).

Step 1: Frontend (HTML + JavaScript) #

First, we'll write an HTML file that uses the Geolocation API to grab the user's coordinates, then sends that data to your Python backend via an HTTP POST request. We'll handle success cases and common errors (like user denying location access) too.

<!DOCTYPE html>
<html>
<head>
    <title>Send Location to Python</title>
</head>
<body>
    <h3>Fetching your location...</h3>
    <p id="status-message"></p>

    <script>
        // Check if the browser supports Geolocation
        if ("geolocation" in navigator) {
            navigator.geolocation.getCurrentPosition(sendCoordsToPython, handleLocationError);
        } else {
            document.getElementById("status-message").textContent = "Geolocation isn't supported by your browser.";
        }

        // Success callback: Send coordinates to Python backend
        function sendCoordsToPython(position) {
            const lat = position.coords.latitude;
            const lon = position.coords.longitude;

            // Use modern Fetch API to send data (replaceable with AJAX if you prefer)
            fetch("http://localhost:5000/receive-coords", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify({ latitude: lat, longitude: lon }),
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById("status-message").textContent = `Location sent! Python received: Lat ${data.lat}, Lon ${data.lon}`;
            })
            .catch(err => {
                document.getElementById("status-message").textContent = `Failed to send data: ${err}`;
            });
        }

        // Handle Geolocation errors
        function handleLocationError(error) {
            switch(error.code) {
                case error.PERMISSION_DENIED:
                    document.getElementById("status-message").textContent = "You denied location access—we can't get your coordinates.";
                    break;
                case error.POSITION_UNAVAILABLE:
                    document.getElementById("status-message").textContent = "Location data is unavailable right now.";
                    break;
                case error.TIMEOUT:
                    document.getElementById("status-message").textContent = "Request timed out—please try again.";
                    break;
                default:
                    document.getElementById("status-message").textContent = "An unknown error occurred.";
            }
        }
    </script>
</body>
</html>

Step 2: Backend (Python + Flask) #

We'll use Flask, a lightweight Python web framework, to create an endpoint that receives the coordinates from the frontend. First, install Flask and the CORS package (to fix cross-origin request issues):

pip install flask flask-cors

Then save this code as app.py:

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # Allow cross-origin requests (critical for local testing)

@app.route('/receive-coords', methods=['POST'])
def receive_coords():
    # Parse the JSON data sent from the frontend
    location_data = request.get_json()
    lat = location_data.get('latitude')
    lon = location_data.get('longitude')

    # Now you can use these coordinates in your Python code!
    print(f"Got coordinates: Latitude = {lat}, Longitude = {lon}")
    
    # Example: Add your custom logic here (save to DB, call an API, etc.)
    # ... your code ...

    # Send a response back to the frontend
    return jsonify({
        "lat": lat,
        "lon": lon,
        "message": "Coordinates received successfully!"
    })

if __name__ == '__main__':
    app.run(debug=True)

Step 3: Run the Code #

1. Save the HTML file as index.html and the Python file as app.py.
2. Start the Flask server: python app.py.
3. Open index.html in your browser. You'll be asked to allow location access—grant it, and your coordinates will be sent to the Python server! Check the terminal running Flask to see the printed coordinates.

Why Your Previous AJAX/JQuery Attempt Might Have Failed #

• CORS Issues: If you opened the HTML file directly (using the file:// protocol), browsers block requests to a local server unless CORS is enabled. That's why we added flask-cors in the example.
• Incorrect Request Format: You might have forgotten to set the Content-Type header to application/json or didn't stringify the JSON data properly.
• Backend Endpoint Misconfiguration: Your Python server might not have been set up to handle POST requests, or didn't parse incoming JSON correctly.

If You Prefer JQuery AJAX #

Replace the sendCoordsToPython function in the HTML with this, and add the JQuery CDN to your <head>:

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

function sendCoordsToPython(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;

    $.ajax({
        url: "http://localhost:5000/receive-coords",
        type: "POST",
        contentType: "application/json",
        data: JSON.stringify({ latitude: lat, longitude: lon }),
        success: function(data) {
            document.getElementById("status-message").textContent = `Location sent! Python received: Lat ${data.lat}, Lon ${data.lon}`;
        },
        error: function(err) {
            document.getElementById("status-message").textContent = `Failed to send data: ${err.responseText}`;
        }
    });
}

内容的提问来源于stack exchange，提问作者Trey Thomas