Return data from html/js to python

Question

I have an html form which is populated by javascript functions. I have another javascript function which gets the values of all of the form elements, and currently just uses an alert to display them back to the user. The html page is diplayed via python with the following code:

import webbrowser
new = 2 #open new tab if possible
url = "form.html"
webbrowser.open(url, new=new)

This all works well, but instead of displaying the data using an alert, I would like to pass the data back to python, but dont know how. All of the data is stored in a javascript array, so I essentially just need to pass this one piece of data.

EDIT: I cannot use any external libraries.

Adorne

I'm not very familiar with Python but there has to be a way you could send a JSON structure using a get or post request. – Mosby

docs.python.org/2/library/json.html – Ide

Answer 1

>>> import json
>>> weird_json = '{"x": 1, "x": 2, "x": 3}'
>>> x = json.loads(weird_json)
>>> x
{u'x': 3}
>>> y = json.loads('["foo", {"bar":["baz", null, 1.0, 2]}]')
>>> y
[u'foo', {u'bar': [u'baz', None, 1.0, 2]}]

You can take the HTML data, and convert it into a dictionary, enabling you to do: print x['x']

This is the starting point, create a socket in Python which listens to a port. Then have it recieve data.

In Javascript, open a socket which can connect to a port (the one Python listens to). Use, say: http://socket.io/

This is a pure socket-to-socket related issue?

A working relationship between Python and Javascript (on port 80):

from socket import *
import json
s = socket()
s.bind(('', 80))
s.listen(4)
ns, na = s.accept()

while 1:
    try:
        data = ns.recv(8192)
    except:
        ns.close()
        s.close()
        break

    data = json.loads(data)
    print data

There you got a socket listening to 80, connect to that and send whatever you want.

function callPython()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","Form-data",true);
xmlhttp.send();
}

For instance, where you can send the form data as a string, replacing "Form-data" and the response from Python can be put into "myDiv" :)

Ide

He does not want to use JSON, he wants to know how to let the javascript running in the webbrowser communicate with the python script – Havre

Myt point is still valid, the jason.loads can take a JavaScript array just as it is and convert it into a working Python list ("array"). – Ide

The data is stored in the javascript, not the html. So my problem right now is getting that data from javascript (in any form). Once I get the javascript array into python this will be helpful though, thanks. EDIT: Just saw that you've added to your answer, I will try it out – Adorne

Just AJAX? It's done every day, you can use AJAX to send data back to Python in any form you'd like. :) – Ide

Answer 2

Something like Ghost.py should be able to do what you want.

This allows evaluation of JavaScript.

result, resources = ghost.evaluate(
    "document.getElementById('my-input').getAttribute('value');")

Which should help.

I've used PhantomJS the JS headless webkit browser and this is a port and/or reworking of that using Python.

---

In my use case I just called PhantomJS from subprocess.call as I couldn't be bothered to install the Ghost dependencies.

I just emitted JSon to stdout and json.loads on it.

Osmo

Ah sorry, I should've added to my OP that I cannot use any external libraries :( – Adorne

Mmm that's an issue - There's nothing to my knowledge that's baked in that can actually run javascript in the way you'd want to - as javascript in your case is client side processing which is usually done by a browser. It sounds like you'd need to drive a proper browser somehow and that's what PhantomJS gives you. I hope someone else has a very cunning way of tackling your problem. – Osmo