Hola,
Te pongo un ejemplo sencillo, que espero que te sirva:
Como puedes ver en el siguiente código, creamos un formulario con 2 campos: Nombre y mensaje más un botón con identificador contact_ok.
Código HTML:
<form name="contact_form" id="contact_form" method="POST" action="#">
<p> Tu nombre </p> <input type="text" name="nombre" id="nombre"> </p>
<p> Tu mensaje </p> <input type="text" name="msj" id="msj"> </p>
<p> <input type="button" id='contact_ok' value='Enviar'></p>
Una vez tenemos el formulario hecho en HTML, vamos a la parte de JQuery. JQuery deberá realizar la llamada a nuestro fichero PHP pasándole los datos introducidos por el usuario. (Este código lo colocamos entre <head> y </head> después de haber llamado al js de jquery)
Código:
$("#contact_ok").click(function (){
var formulario = $('#contact_form').serialize();
$.ajax({
type: "POST",
dataType: 'json',
url: "mi_pagina.php",
data: formulario,
success:function(respuesta){
alert(respuesta.mensaje);
location.reload();
}
}); // fin $.ajax
});
Lo que hemos hecho ha sido recoger los datos que el usuario ha introducido, para ello hemos utilizado serialize, después hacemos una llamada ajax, indicando que el tipo de dato será json, utilizaremos post y la página php se llama mi_pagina.php.
El respuesta.mensaje viene del siguiente fichero PHP, como ahora verás respuesta es un objeto vacio que creamos.
PHP
Código PHP:
<?php
$respuesta=new stdClass();
//Aqui recoges el valor de las variables y devuelves en un respuesta->mensaje el mensaje que se mostrara al usuario
//Por ejemplo: respuesta->mensaje="Error - el campo nombre no puede estar vacio"
echo json_encode($respuesta);
?>
Lo he ido haciendo al momento, creo que no se me ha pasado nada y está todo correcto. Espero que te sirva, si tienes cualquier duda al generar el PHP correspondiente, dímelo y te ayudo a generarlo.
Un saludo y suerte!