Passing variables from python to javascript

Question

I am working on a web page with Google App Engine. It involves html, python, javascript and Ajax.

The workflow would be like this:

when someone introduces a value in an html box, it calls a javascript function:

 INPUT type="text" id="busca" name="busca" onblur="SacarMapa()"

That will call this function:

  function SacarMapa()
  {
  var lugar=document.getElementById("busca").value;
    $.ajax("/mapa",
    { "type": "get",
        "data": {busca:lugar},
        // usualmente post o get
        "success": function(result) {
            initMap(RESULT-A, RESULT-B);
            },
        "error": function(result) {
            console.error("Se ha producido un error: ", result);},
        "async": true,})};

What i would need is RESULT-A and RESULT-B. This would come from the server side, where python is used:

class MapHandler(SessionModule.BaseSessionHandler):
   def get(self):
      #Obtencion de datos
      serviceurl = 'http://maps.googleapis.com/maps/api/geocode/json?'
      address=self.request.get('busca')
      self.response.out.write("Busca es "+address)
      url = serviceurl + urllib.urlencode({'address': address})
      uh = urllib.urlopen(url)
      data = uh.read()
      js = json.loads(str(data))
      resultado = js['status']
     if not resultado == "ZERO_RESULTS":
        location = js['results'][0]['formatted_address']
        latitud = js['results'][0]['geometry']['location']['lat']
        longitud = js['results'][0]['geometry']['location']['lng']

So i would need to send "latitud" and "longitud" from the python code to javascript so that latitud would be RESULT-A and longitud RESULT-B

What would be the way to do this?

Thanks.

Why not just supply an application/json response with body of json.dumps of the appropriate dict, e.g {'RESULT-A': latitud, 'RESULT-B': longitud}? — Alex Martelli
– Alex Martelli, Commented Dec 23, 2015 at 0:26
Could you be more precise please? I am not really used to python. I know answer involves json formating and retrieving information in the js, but i do not really now how it works. Could you tell what should i change in my code? — Maiser
– Maiser, Commented Dec 23, 2015 at 0:38
Yep, I was suggesting exactly what you posted as a self-answer. — Alex Martelli
– Alex Martelli, Commented Dec 25, 2015 at 23:52

Maiser · Accepted Answer · 2015-12-23 17:18:46Z

SOLVED:

I finally did it this way:

(Python/server side)

class MapHandler(webapp2.RequestHandler):
def get(self):
    #Obtencion de datos
    serviceurl = 'http://maps.googleapis.com/maps/api/geocode/json?'
    address=self.request.get('busca')
    url = serviceurl + urllib.urlencode({'address': address})
    uh = urllib.urlopen(url)
    data = uh.read()
    js = json.loads(str(data))
    try:
            location = js['results'][0]['formatted_address']
            latitud = js['results'][0]['geometry']['location']['lat']
            longitud = js['results'][0]['geometry']['location']['lng']
            self.response.headers['Content-Type'] = 'application/json'
            self.response.out.write (json.dumps({"exito": 1, "lat": latitud, "long": longitud}))

    except Exception as e:
            self.response.out.write (json.dumps({"exito":0}))

Javascript:

function SacarMapa()
{
var lugar=document.getElementById("busca").value;
alert("Buscaremos "+lugar);
debugger;
$.ajax("/mapa",
    { "type": "get",
        "data": {busca:lugar},
        "dataType": "json",
        "success": function(datos) {
            if (datos['exito'] == "1")
            {
                initMap(datos['lat'], datos['long']);
            }
        },

        "error": function(datos) {
            debugger;
            console.error("Se ha producido un error: ", datos);},
        "async": true,})};

I got pretty crazy with this, because i forgot putting the webapp2.RequestHandler in the header of the python class.

Collectives™ on Stack Overflow

Passing variables from python to javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related