explain how this jquery ajax passes data - php

Question

I have the following class in a php file:
function calcTotal(){
var productID = <?php echo $product_info['products_id'];?>;
var sizeID = 0;
$(".mine_sizes").each(function() {
if ($(this).is(':checked')) sizeID = $(this).val();
});
//alert(sizeID);
var colorID = 0;
$(".mine_color").each(function() {
if ($(this).is(':checked')) colorID = $(this).val();
});
$.ajax({
type: "POST",
url: 'get_product_price.php',
data: "product_id="+ productID +"&color_id="+ colorID +"&size_id="+ sizeID,
success: function( response ) {
$("#price_container").html(response);
;
}
});
}
and the php file get_product_price.php:
if($_POST){
$product_info_query = tep_db_query("select products_price, products_tax_class_id from " . TABLE_PRODUCTS . " where products_id = '" . (int)$_POST['product_id']."'");
$pricePrice = tep_db_fetch_array($product_info_query);
$productPrice = $pricePrice['products_price'];
$sizesPrices = tep_db_query("select options_values_price from products_attributes where products_id='".$_POST['product_id']."' and options_values_id='".$_POST['size_id']."'");
// echo "select options_values_price from products_attributes where products_id='".$_POST['product_id']."' and options_values_id='".$_POST['size_id']."'";
// exit;
if(mysql_num_rows($sizesPrices)>0){
$priceRow = tep_db_fetch_array($sizesPrices);
$productPrice = $productPrice + $priceRow['options_values_price'];
}
$sizesPrices2 = tep_db_query("select price from product_attributes_color_relation where product_id='".$_POST['product_id']."' and color_id='".$_POST['color_id']."' and color_size_option_id='".$_POST['size_id']."'");
if(mysql_num_rows($sizesPrices2)>0){
$priceRow2 = tep_db_fetch_array($sizesPrices2);
$productPrice = $productPrice + $priceRow2['price'];
}
//echo $productPrice; exit;
echo $currencies->display_price($productPrice, tep_get_tax_rate($product_info['products_tax_class_id']));
//echo $productPrice;
}
The function is called on a radio button click and is currently working but I am trying to understand how it works for myself (and to possibly recreate a similar function)
What I am not really understanding is the data parameter from the ajax api. How is that data parameter used?
another question I have is the success parameter. Is the "response" parameter a standard or can in be called anything?
Thanks for any help explaining this to me. I don't think any other information is necessary, there is a div with a class id #price_container which is where the price is echo'd.

Answer 1

The data parameter passes the information the same way an HTML form will. At least that's the easiest way to think of it. So that "data" will come through as $_POST or $_GET arrays. I always setup my data as JSON format:
data: { "product_id": productID,"color_id": colorID, "size_id": sizeID },
With your type set as "POST" that would come through as:
$_POST['product_id']
$_POST['color_id']
$_POST['size_id']
You can specify any variable name for the response - but 'response' is nice and easy to remember and work with. :)

Answer 2

from the ajax documentation
data
[Object, String]
Data to be sent to the server. It is converted to a
query string, if not already a string. It's appended to the url for
GET-requests. See processData option to prevent this automatic
processing. Object must be Key/Value pairs. If value is an Array,
jQuery serializes multiple values with same key based on the value of
the traditional setting (described below).
Basically if you set the data variable to a query string, it sends it to the server as is, other wise it will generate a query string from the key value pairs that you set. Once the php server receives the query string it is parsed and you can access your values using
$_POST['key']