Insertar datos en MySQL a través de jQuery

Vamos a utilizar el método $.ajax() de jQuery para enviar una petición al servidor y que éste nos de una respuesta sin necesidad de recargar la página entera. Lo que haremos es insertar un registro a la base de datos, en este caso un nombre a la tabla personas, compuesto por los campos codigo (autoincrement) y nombre. Para ello necesitamos los siguientes archivos:

El archivo conexion para conectarse a MySQL.

conexion.php

< ?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>

El archivo principal: index.php, donde creamos el código HTML (caja de texto, boton...) y el siguiente código jQuery:

Cuando se hace click en el boton:

$("button").click(function(){

Capturamos el valor que tiene la caja de texto con id igual a box y lo almacenamos en la variable n:

n=$("#box").val();

Invocamos al método $.ajax y le pasamos como parámetros el archivo que procesa la información (insertar.php), el segundo parámetro es para que no almacene en caché las páginas solicitadas, el tercer parámetro es que la peticion va a ser de tipo POST, el cuarto parámetro es una variable que vamos a enviar junto con la solicitud (nom) que contiene lo que trae n, el ultimo parámetro es una función que se ejecuta cuando la solicitud se realiza correctamente (la respuesta del servidor).

$.ajax({url:"insertar.php",cache:false,type:"POST",data:{nom:n},success:function(result){

Ese resultado lo mostramos en un div a través del evento html de jQuery que es el equivalente a innerHTML.

$("#myDiv").html(result);

Este código oculta el mensaje dentro del div cuando se pincha sobre él.

$("#myDiv").click(function(){

$("#myDiv").hide(1000);//oculta el div cuando se hace clic sobre el mismo
});

index.php

< !DOCTYPE html>

< html>

< head>

< script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

< script>

$(document).ready(function(){

$("button").click(function(){

$("#myDiv").show();//muestra el div

n=$("#box").val();

$.ajax({url:"insertar.php",cache:false,type:"POST",data:{nom:n},success:function(result){
$("#myDiv").html(result);
}});

});

$("#myDiv").click(function(){

$("#myDiv").hide(1000);//oculta el div cuando se hace clic sobre el mismo
});

});

< /script>

< /head>

< body>

< p>Insertar datos en MySQL con jQuery</p>

Digite nombre:

< input type="text" id="box" />

< button>Agregar</button>

< div style="background-color:#8FBC8F;" id="myDiv"></div>

< /body>

< /html>

Por ultimo capturamos a través del método $_POST la variable nom que nos enviaron y la insertamos a la base de datos.

insertar.php

< ?php

include 'conexion.php';

$con=conexion();

$nombre=$_POST['nom'];

$res=mysql_query("insert into personas (nombre) values('".$nombre."')",$con);

if($res){

echo 'Accion exitosa.';

}

?>