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:
Capturamos el valor que tiene la caja de texto con id igual a box y lo almacenamos en la variable n:
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).
Ese resultado lo mostramos en un div a través del evento html de jQuery que es el equivalente a innerHTML.
Este código oculta el mensaje dentro del div cuando se pincha sobre él.
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.';
}
?>
Descargar
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
});
$("#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.';
}
?>
Descargar
soy novato aun como puedo enviar no solo un dato si no multiples o mejor aun cargar a mysl el nombre de un archivo y subirlo en el servidor. por favor me lo pueden explicar con manzanas por que no soy tan diestro en esto de programar puesto que aun estoy aprendiendo.
ResponderBorrarComo Puedo Hacer Para que me muestre los datos una vez sean ingresados...?
ResponderBorrarSi piensas un poqutín, se haría con una simple consulta:
Borrarif($res){
$res2=mysql_query("select * from personas",$con);
while($fila=mysql_fetch_array($res2)){
echo $fila['nombre'].' -';
}
}
//Esta seria otra variante....
Borrarif($res){
$res2 = mysql_query("select * from peronas", $con);
while($registro = mysql_fetch_row)($res2){
echo $registro[0];
}
}
Excelente ejemplo, tengo una duda, ya probe tu ejemplo y sirve muy bien, pero al momento de implementarlo en mi proyecto, ya no me registra ningun campo, a que crees que se deba...saludos
ResponderBorrarQue error te dá?
BorrarPues no me manda ningun error, solamente no guarda, te mando como modifique el script, saludos
Borrar<-script->
$(document).ready(function(){
$("button").click(function(){
ideq=$("#ideq").val();
disp=$("#disp").val();
numinv=$("#numinv").val();
nums=$("#nums").val();
marca=$("#marca").val();
sistop=$("#sistop").val();
estdisp=$("#estdisp").val();
$.post("registro_equipo.php",{idequipo:ideq,dispositivo:disp,numinventario:numinv,numserie:nums,marca:marca,sistoperativo:sistop,estdispositivo:estdisp},function(result){
$("#myDiv").html(result);//html es como el innerHTML
});
});
});
<-/script->
a veces se debe con el navegador con el que estes trabajando en mi caso tengo que volver a refrescar para que me inserte,o necesitras verificar bien tu consulta hacia mysql
BorrarPara evitar ese problema de volver a refrescar la página he mejorado el código, si quieres vuelve a descargarlo o echale un vistazo.
Borrardisculpen como puedo hacer que el mensaje que aparece despues de la insercion se limpie para insertar otra informacion nueva
ResponderBorrarfunciona excelente gracias
ResponderBorrarno funciona lo probe y no inserta nada no se que sea ayuda
ResponderBorrarchido me gusto y a mi me funciona
ResponderBorrardisculpa no se que sea lo copie tal cual en xampp y no me inserta nada que es la ibreria o que paso
Borrarpodrian poner ejemplos para modificar es ue aun soy novato en eso
ResponderBorrarHola, como podria hacer para que muestre los datos todo el tiempo sin que tenga que hacerlo solo al presionar el boton?
ResponderBorrarme sirvio de mucho muchas gracias
ResponderBorrarMuy buen aporte pero quisiera saber si sirviera o como hacer para poder modificar el registro ya ingresado para poder borrarlo.
ResponderBorrarEjemplo
tengo el producto 1 y dos pero quiero eliminar el dos como seria
codigo
$("#borrar_id").click(function(){
$("#myDiv").show();//muestra el div
id_borrar=$("#id_borrar").val();
$.ajax({url:"insertar.php",cache:false,type:"POST",data:{id_borrar:id_borrar},success:function(result){
$("#myDiv").html(result);
}});