comensemos con algo bien sensillito .... Ummm por ejemplo validaciones aunq lo suyo seria aserlo desde el servidor pero como practicando xD...
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>AJAX</title>
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script> <!-- Jquery -->
<script type="text/javascript">
/* ============================================= */
$(function() {
$('#nuevo').click(function() { //> CLICK AL BOTON CON ID [nuevo]
var campo1 = $('#idioma1').val(); //> VARIABLES A ENVIAR [Esto es como hacer un document.getElementById('nombre del ID')]
var campo2 = $('#idioma2').val();
var campo3 = $('#tipo').val();
//> PROCESAR DATOS
if ( campo1 == "" ){ //> COMPARACION SIMPLE SI EL CAMPO ES VACIO
$('#mensaje').append('<p id="cargando">No deben de haber espacios en blanco</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
$('#cargando').fadeOut(3500, function(){ // Oculta el mensaje
$(this).remove(); // Quita el mensaje
});
}
else if ( campo1.length > 100 ){ //> COMPARACION SIMPLE SI SON MAS DE 100 CARACTERES
$('#mensaje').append('<p id="cargando">Los caracteres de Idioma 1 deben de ser menor que 100</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
$('#cargando').fadeOut(3500, function() { // Oculta el mensaje
$(this).remove(); // Quita el mensaje
});
}
else if ( campo2.length > 100 ){ //> COMPARACION SIMPLE SI SON MAS DE 100 CARACTERES
$('#mensaje').append('<p id="cargando">Los caracteres de Idioma 2 deben de ser menor que 100</p>'); //> Creas un nuevo tag en el div con ID='MENSAJE'
$('#cargando').fadeOut(3500, function() { // Oculta el mensaje
$(this).remove(); // Quita el mensaje
});
}
else{
$.ajax ({
url: "./listaCPMotivo!nuevoMotcp", //> URL
type: 'POST', //> lo puedes cambiar por GET si quieres .....
data: 'campo_de_tu_php_1=' + campo1 + '&campo_de_tu_php_2=' + campo2 , //> VARIABLES A ENVIAR
success: function(result){ //> Si todo a ido bien lo envia
alert("Datos Guardados");
//> encaso de querer redirigir despues de enviar datos quita los comentarios de esta dos lineas
/*
var go = "listaCPMotivo";
location.href = go;
*/
}
});
}
return false;
});
});
/* ============================================= */
</script>
<body>
<h2>EJEMPLO AJAX</h2>
<P>Inserte los nuevos datos:</P>
<div id='mensaje'></div> <!-- AQUI SE MOSTRARAN LOS MENSAJES EN CASO DE HABER ERROR A LA HORA DE ENVIAR LOS DATOS-->
<form id='formMotcp' namespace="/" action='TU_PHP' >
<BR/>
CAMPO 1 <input name='idioma1' id='idioma1' />
<BR/>
CAMPO 2 <input name='idioma1' id='idioma2' />
<BR/><BR/>
<input type='submit' id='nuevo' value='Guardar Nuevo' title='Guardar Nuevo Registro'/>
</form>
</body>
</html>
Ojala te sirva