Sending data from browser to server with javascript and JSON

This is some code I wrote to send data from a javascript object (on a browser) to a Rails application on a server.

[My aim was to use the Google AJAX search API and a Google local search controller to search for and select business locations that I then wanted to store away in a database on my server.]

The approach I used was to encode the object’s data into a string using JSON, stash it inside a hidden form field, then POST the form to the server. The Rails app on the server would then receive this form, grab the hidden form field data out of params[] and decode the JSON string into a hash.

1. User clicks submit button.
2. Submit button’s onclick function converts the javascript object data to a string using the toJSONString() function of the json.js library.
3. The onclick function sets the value of the hidden field to this string.
4. The browser sends the contents of the form (including the contents of the hidden field) to the server.
5. The server receives the HTTP POST and sees that it is for controller ‘places’, action ‘add_from_map’ of my Rails app.
6. The add_from_map action finds the hidden form data in params.
7. The action parses the data using JSON.parse from the json ruby gem (on Linux use “sudo gem install json” to install the gem).

Let’s step through that in more detail as we look at the code.

First, in the .rhtml file for the page with which my browser constructs the data, I included the json.js file:

<%= javascript_include_tag 'json' %>

I then added a form (note that it should really be written using Rails form helpers – any pointers on how to convert this example would be gratefully received).

<form action=”/place/add_from_map” method=”post”>
<input type=”text” id=”loc-data” name=”loc-data” value=””>
<input type=”submit” id=”save” name=”save” value=”Save” onclick=”SubmitAll()”>
</form>

This form provided:

• A hidden field called “loc-data”
• A submit button that calls “SubmitAll()” when clicked.

My page already included placeholders for various Google search objects that ended up populating an object called gLocalSearch.

The data I needed was held in “gLocalSearch.results” (incidentally, these are the results of a Google ‘local search’ executed using a GlocalSearch object as described here).

Here’s the SubmitAll() function:

function SubmitAll() {
document.getElementById(“loc-data”).value = gLocalSearch.results.toJSONString();
return true;
}

When the submit button was pressed, this function used the toJSONString() method added by the json.js library to convert the data to a JSON string.

The return value of “true” resulted in the form being submitted to the server.

On the server, I needed to include the json code in the “place” controller:

require ‘json’

The “add_from_map” action extracted the JSON string and decoded it, putting the result into an easily-accessible hash:

def add_from_map
@place_rows = JSON.parse(params[:loc-data])

for place_row in @place_rows
@place = Place.new(:name => place_row[‘titleNoFormatting’])
end
end

(Ignore the nonsensical loop here. Just notice how you can use [ ] to access a field in the hash that is created by JSON.parse.)

That’s about it. As it happens, the Google map search tool I was planning to use doesn’t currently support UK searches so my little application will have to wait. Or maybe I’ll do a French version :-)

Happy mapping!