procesar formulario con ajax sin recargar la pagina

[jandrogdz]

Intente lo que me comentaste pero me manda al archivo y ahi se queda, segun yo deberia de mostrar los datos en el div que yo le mando. ¿Necesito alguna libreria para que funcione?

Código Javascript:

<script>
            $("#nuevo").click(function(e){
                e.preventDefault();
                if ($("#agregar").validationEngine("validate")) {
                var form_data = {       
                    //Recuperar los valores de los campos del formulario
                    productoID:$("#productoID").val(),  //para acceder al valor de los campos input       
                    cantidad:$("#cantidad").val(),
                    servicio:$("servicio").val()          
 
                };
                $.ajax({
                    type: "POST",
                    url: "procesos_pedido.php",
                    data: form_data,
                    beforeSend: function(){
                        $("#nuevo").attr("value","Agregando...");
                        $("#nuevo").attr("disabled",true);
                    },
                    success: function(response){
                            $("#response").html(response);
                            $("#nuevo").attr("value","Agregar");
                            $("#nuevo").attr("disabled",false);
 
                    }
                });
                }
            }
      </script>
 

Y este es el archivo PHP:

Código PHP:

echo $_POST['productoID']."<br />";
        echo $_POST['servicio']."<br />";
        echo $_POST['cantidad']."<br />";
 

Estoy haciendo algo mal?