Question

I am trying to use a $.post() in the following way:

$.post("file.php", { file_id: $(this).val()}, function(data){...}
The file.php then does a database query and returns an array with a title, description and image reference.

What I want to do then is be able to update the .val() for form fields for each. I understand how to do this on a single variable, it would just be the following:

$.post("file.php", { file_id: $(this).val()}, function(data){ 
   $('#title').val(data);
}

But, how do I get the data returned to be recognizable in jquery as either separate variables or as an array?

Thanks in advance

Answer 1

See the docs for $.post. The fourth parameter is the dataType. You can set this to JSON for your return data to be parsed into a JavaScript object or array.

$.post(
   "file.php", 
   { file_id: $(this).val() }, 
   function(data){ $('#title').val(data.title); $('#para').val(data.paragraph); },
   'json');

In your file.php file, you can do something like

<?php
$return_data=array('title'=>'Fishes Go To Market','paragraph'=>'Lots of stuff');

header('Content-Type: application/json');
echo json_encode($return_data);
exit();

Be sure to include the header() so jQuery knows your data is supposed to be JSON, and to use json_encode so it is formatted properly.

See the json_encode docs for more info on that, and the docs on header. Remeber you can’t have any other output come before your header() and printing the json_encoded data, or the header as well as the JSON will be invalid.