Como enviar dados de uma página para outra com Ajax.

Bom dia pessoal!

Tenho este formulário que carrega dois inputs do banco de dados. O primeiro lista os pacotes, e o segundo é listado em função do primeiro.

Quero enviar estas três variáveis : "servico" $serv, $price, $id , como também #date e #hour que contém os valores selecionados , pois vou precisar delas na outra página. Como enviar via Ajax ?

Script que fica dentro da pagina formulario.php

//pega o id do select pacote e manda para pagina valida.php.
$(document).ready(function(){
 $('#pacote').change(function(){
 var id_pacote = $(this).val();
 var data = 'id_pacote='+id_pacote;
 $.ajax({
 type : "POST",
 url : "assets/third_party/login/valida.php",
 data : data,
 cache : false,
 success: function(html)
 {
 $('#servico').html(html);
 }

 })

 });
});

Formulário.php

 <form id="form-order" action="booking/personal.php" method="post" class="sky-form vp-form">

 <div id="residential" class="service-list vp-form-line clearfix">
 <span class="vp-form-icon"><i class="vp-icon vp-add"></i></span>
 <label class="vp-form-item select">
 <select class="pacote" name = "pacote" id = "pacote">
 <?php
	$SQL = "SELECT * FROM tb_pacote";
	$query = mysqli_query($mysqli, $SQL);
	while ($row = mysqli_fetch_array($query)){
 $res = "<option ";
 $res .="value='".$row['id_pacote']."' >";
 $nome= $res .= $row['nome_pacote'];
 $res .="</option>";
 echo $res;

	}

	?>

 </select>
 <i></i>
 </label>
 </div>

 <div class="vp-form-line clearfix">
 <span class="vp-form-icon"><i class="vp-icon vp-supplies"></i></span>
 <label class="vp-form-item select">
 <select name="servico" class="select-service" id="servico">
 <option value="0">Cleaning Plain</option>

 </select>
 <i></i>
 </label>
 </div>
<script>

$(document).ready(function(){
 $('#servico').change(function(){
 $serv = $(this).find('option:selected').text();
 $price = $(this).find('option:selected').data("price");
 $id = $(this).find('option:selected').val();

 });
});

</script>

 <div class="vp-form-line clearfix">
 <span class="vp-form-icon"><i class="vp-icon vp-date"></i></span>
 <label class="vp-form-item input">
 <input name="date" type="text" name="date" id="date" value="Select date" />
 </label>
 </div>

 <div class="vp-form-line clearfix">
 <span class="vp-form-icon"><i class="vp-icon vp-time"></i></span>
 <label class="vp-form-item select">
 <select name="hour" id="hour">
 <option value="0">Select Time</option>
 <option value="08:00 AM">08:00 AM</option>
 <option value="08:30 AM">08:30 AM</option>
 <option value="09:00 AM">09:00 AM</option>
 <option value="09:30 AM">09:30 AM</option>
 <option value="10:00 AM">10:00 AM</option>
 <option value="10:30 AM">10:30 AM</option>
 <option value="11:00 AM">11:00 AM</option>
 <option value="11:30 AM">11:30 AM</option>
 <option value="12:00 PM">12:00 PM</option>
 <option value="12:30 PM">12:30 PM</option>
 <option value="01:00 PM">01:00 PM</option>
 <option value="01:30 PM">01:30 PM</option>
 <option value="02:00 PM">02:00 PM</option>
 <option value="02:30 PM">02:30 PM</option>
 <option value="03:00 PM">03:00 PM</option>
 <option value="03:30 PM">03:30 PM</option>
 <option value="04:00 PM">04:00 PM</option>
 <option value="04:30 PM">04:30 PM</option>
 <option value="05:00 PM">05:00 PM</option>
 <option value="05:30 PM">05:30 PM</option>
 <option value="06:00 PM">06:00 PM</option>
 <option value="06:30 PM">06:30 PM</option>
 <option value="07:00 PM">07:00 PM</option>
 <option value="07:30 PM">07:30 PM</option>
 <option value="08:00 PM">08:00 PM</option>
 </select>
 <i></i>
 </label>
 </div>

 <input type="hidden" name="cart" id="cart-input" value="" />

 <div class="vp-form-cart clearfix">
 <span class="vp-form-icon"><i class="vp-icon vp-cart"></i></span>
 <span class="vp-form-item">Cart</span>
 </div>

 <div id="cart"></div>

	</div> <!-- end: box-content -->

<script type="text/template" id="item_template">
	<span><%= this.model.get("title") %></span><span><%= this.model.get("price") %></span>
</script>

<script type="text/template" id="cart_template">
	<div class="services clearfix">
 <div id="cleaning_service" class="cart-line">
 <div class="title">Cleaning Services</div>
 <div class="price"><%= parseFloat(this.model.get("cleaning_total")).toFixed(2) %> </div>
 <ul class="cart_added" id="teste"><li><span><%= this.model.get("cleaning_name") %></span><span><%= parseFloat(this.model.get("cleaning_total")).toFixed(2) %></span></li></ul>
 </div>
 <div id="additional_service" class="cart-line">
 <div class="title"></div>
 <div class="price"></div>
 <ul id="additional_items" class="cart_added"></ul>
 </div>
 <div >
 <div></div>
 <div></div>
 </div>

 <div>
 <div></div>
 <div></div>
 <ul></ul>
 </div>
	</div>
	<div class="footer">
 <table id="price-total">
 <tr>
 <td></td>
 <td></td>
 </tr>
 <tr>
 <td>	</td>
 <td </td>
 </tr>
 <tr class="total">
 <td>TOTAL</td>
 <td class="text-right"><%= parseFloat(this.model.get("total") * 0 + +this.model.get("total")).toFixed(2) %></td>
 </tr>
 </table>
	</div>
</script>

</form>

Página valida php.

<?php
include "conexao.php";

if(isset($_POST['id_pacote']))

	$SQL = "SELECT * FROM tb_servico WHERE tb_pacote_id_pacote = '".$_POST['id_pacote'] . "'";
	$query = mysqli_query($mysqli, $SQL);
 while ($row = mysqli_fetch_array($query)){
 $res = "<option ";
 $res .="value='".$row['id_servico']."'";
 $res .="data-price='".$row['preco_servico']."' >";
 $res .= $row['nome_servico'];
 $res .="</option>";
 echo $res;
 }

}

?>