Как отправить ajax запрос и вывести в нужных местах результаты запроса?

Question

[Valentina]

Имеется форма в ней три input с числовыми значениями, запрос считает сразу несколько значений.
Вопрос: Как создать запрос без перезагрузки страницы и вывести в нужных местах результаты запроса.
Именно не вывести сплошняком, а чтобы подставились значение туда, куда бы они подставлялись, если бы я отправлял просто post запрос. Спасибо.

Answer 1

[Bob Smily]

В коде HTML:

<div>Общая стоимость...<span id="all_cost">0</span> руб</div>
<div>Высота:<span id="height">0</span> см</div>
<div>Ширина:<span id="width">0</span> см</div>

В коде Javascript:

$( '#submit_button' ).click( function() {
  $.post( 'calc.php', {
    'modules_width': $( '#modules_width' ).val(),
    'modules_height': $( '#modules_height' ).val(),
    'color': $( '#color' ).val()
  }, function( data ) {
    data = JSON.parse( data );
    $( '#all_cost' ).html( data.allcost );
    $( '#height' ).html( data.height );
    $( '#width' ).html( data.width );
  }
 );
} );

В коде PHP:

$width = $_POST[ 'modules_width' ];
$height = $_POST[ 'modules_height' ];
$color = $_POST[ 'color' ];
// дальше рассчитываем $allcost, $width, $height
echo json_encode( array( 'allcost' => $allcost, 'width' => $width, 'height' => $height ) );

Возможно, где-то опечатался, но смысл должен быть понятен

Answer 2

[legati]

Нужно в результате вернуть json объект, примерно так выглядит запрос:

$('.calc-btn').click(function(){
      $.ajax({
           url:"...",
           data: params, //объект с параметрами запроса,
           success:function(data){
                  $('.price').text(data.price);
                  $('.height').text(data.height);
                  //и так далее
           }});
});