Using jquery, what is the simplest function to post some json data and process a returned json response?

Question

When users click on an element in my webpage, I would like to call a javascript function that reads the values of a few text boxes on the page, wraps their contents as json where the keys are the ids for the text boxes and the values are the contents of each text box, and then posts the resulting json to a url.

I would then like the same function to expect back a json response and call another javascript function with the returned json data.

Question: What is the best way to write the javascript function to create a json structure from html elements, post the json with jquery, and call another javascript function with the resulting json response from the server?

Answer 1

There are some json related options in $.ajax()

Check them out: http://api.jquery.com/jQuery.ajax/

Answer 2

You can use json2 to marshall the data to json format and send it using ajax. Once you got the response back, you can use the result to call other javascript in your success callback. I would recommend using a decent javascript framework for ajax calls to make things a little bit easy.

Answer 3

I use malsup's jQuery form plugin. http://malsup.com/jquery/form/

As he says himself "The jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX."

Answer 4

Check out this question: How can I post an array of string to ASP.NET MVC Controller without a form?

The accepted answer is pretty simple. But to make it even more simple, make postData a string, and have the SaveList method take in a single string. I just tried it and it works. Just a single statement on each the client and the server!