Passing value from javascript to python with ajax

Question

From function pass_values() is copy pasted from one of answers from this post except for data part.

What I'm trying to do with this code below is get the current location of the client (variable pos) , store the location data to variable clientPosition and send it to python code through pass_values.

I would have been surprised if it worked as I just squeezed in a variable clientPoisiton without any knowledge on javascript but the function getPosition() wasn't even called.

javascript (edited)

// some setting for google maps
var clientPoisiton;
if (navigator.geolocation) 
{
  navigator.geolocation.getCurrentPosition(function(position){
    var pos = {lat: position.coords.latitude,lng: position.coords.longitude};
    clientPosition=pos;
  }
  // some exception handling
}

function pass_values()
{
  $.ajax
  (
    {
      type:'POST',
      contentType:'application/json;charset-utf-08',
      dataType:'json',
      url:'http://127.0.0.1:5000/getPosition',
      data: JSON.stringify(clientPosition),
      success:function (data) {
        var reply=data.reply;
        if (reply=="success") {return;}
        else {alert("some error ocured in session agent")}
      }
    }
  );
}

pass_values.call(clientPosition);

Python

@app.route('/getPosition',methods=['POST'])
def getPosition():
    data = request.get_json()
    print(data)
    return jsonify({'reply':'success'})

I know it sounds weird but I didn't call it because I've seen multiple functions was called without being called in google api such as initMap() and thought maybe that was how javascript works. If it was just that, I'll look up how to call a function in javascript. — PuffedRiceCrackers, Dec 07 '18 at 13:42

score 1 · Answer 1 · answered Dec 07 '18 at 14:06

pos aka clientPosition isn't a simple value, it's an object with lat and long properties. You won't be able to jam it on to the end of your url like that. You will either need to accept a JSON representation of an object in your python script, or have ajax send two numeric values (lat and long) and receive them appropriately.

You're not calling pass_values - So, where would you want to call that? The place that makes most sense to me is in the geolocation success function. You might as well pass in your lat/long values as a parameter to pass_values, and avoid using a global variable.

Since you are using POST, you might as well POST the data. Currently you use post and add the data to the URL string (the technique used with GET requests). That defeats the purpose of using POST.

So:

// some setting for google maps
if (navigator.geolocation) 
{
  navigator.geolocation.getCurrentPosition(function(position){
    pass_values(position.coords.latitude, position.coords.longitude);
  });
  // some exception handling
}

function pass_values(lat, long)
{
  $.ajax
  (
    {
      type:'POST',
      contentType:'application/json;charset-utf-08',
      dataType:'json',
      url:'http://127.0.0.1:5000/getPosition',
      data: {
        lat: lat,
        long: long
      },
      success:function (data) {
        var reply=data.reply;
        if (reply=="success") {return;}
        else {alert("some error ocured in session agent")}
      }
    }
  );
}

Now, I don't really do python so this part is sort of a guess - it must accept a json post and retrieve the two values stored inside.

@app.route('/getPosition',methods=['POST'])
def getPosition():
    data=request.get_json()
    lat = data.get('lat', '')
    long = data.get('long', '')
    return jsonify({'reply':'success'})

Passing value from javascript to python with ajax

1 Answers1