sending information back and forth with AJAX

Question

With $.post, you can send information to the server, but what when you need to receive information from the server?

How does information change from being of a way that can be held by a php variable to being of a way that can be held by a javascript variable and vice-versa?

Answer 1

Check out json_encode() and json_decode(). These are now part of PHP, and allow you to switch back and forth between PHP arrays and associative arrays (or stdClass objects) and javascript arrays or objects (as a JSON literal).

Essentially, instead of returning xml or html, you can do echo json_encode($all_my_php_data); and get back a javascript object.

If you pass 'json' as the type parameter of your $.post(), your success callback will contain the JSON object you have echoed in your PHP script.

$.post() documentation

Answer 2

This is more relevant to your question: http://docs.jquery.com/Ajax/jQuery.post

Alert out the results from requesting test.php (HTML or XML, depending on what was returned).

$.post("test.php", function(data){
  alert("Data Loaded: " + data);
});

Alert out the results from requesting test.php with an additional payload of data (HTML or XML, depending on what was returned).

$.post("test.php", { name: "John", time: "2pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

Gets the test.php page content, store it in a XMLHttpResponse object and applies the process() JavaScript function.

$.post("test.php", { name: "John", time: "2pm" },
  function(data){
    process(data);
  }, "xml");

Gets the test.php page contents which has been returned in json format ("John","time"=>"2pm")); ?>)

$.post("test.php", { func: "getNameAndTime" },
  function(data){
    alert(data.name); // John
    console.log(data.time); //  2pm
  }, "json");

Answer 3

Then you need to receive the content sent back from server. You simply define callback function for $.post with 'data' parameter. For example:

$.post('/index.php', { key: 'value' }, function(data) { alert(data); });

You can specify type of the returned value so that jQuery can automatically process it. If you return JSON value from the PHP script then you should add additional parameter at the end:

$.post('/index.php', { key: 'value' }, function(data) {
    alert(data.someItem);
  }, 'json');

But if you need to get data from PHP server without POSTing or GETting anything first, then you need to implement Comet. But that's a bit more work :)

Answer 4

The "callback" portion of the jQuery.post function is what you want to look at.

Answer 5

In http you perform a request from the client (javascript in web-browser) to the server and then process information returned by the latter. The choice of which way information is represented in both communications is up to you.

When using AJAX (possibly through jQuery) you can make a request to a php handler which will be in charge to return the information to the browser, usually formatted as a JSON literal (you can encode the response using json_encode(), as suggested by Brian). Eventually you will parse it on the client (e.g. using jQuery) to obtain a javascript object.

(The $.post( url, [data], [callback], [type] ) function will automatically parse the response and yield it to the callback function, whose signature should be callback(data, textStatus) where data is be the parsed object and textStatus reports success or failure status (jQuery.post).