CODEWITHSUNDEEP
javascriptpythonhtmlflask
PuffedRiceCrackers
PuffedRiceCrackers

Reputation: 785

Passing value from javascript to python with ajax

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'})

Upvotes: 0

Views: 302

Answers (1)

James
James

Reputation: 22246

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'})

Upvotes: 1

Related Questions