miércoles, 28 de noviembre de 2012

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.';

}

?>


Descargar

18 comentarios:

  1. 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.

    ResponderEliminar
  2. Como Puedo Hacer Para que me muestre los datos una vez sean ingresados...?

    ResponderEliminar
    Respuestas
    1. Si piensas un poqutín, se haría con una simple consulta:

      if($res){

      $res2=mysql_query("select * from personas",$con);

      while($fila=mysql_fetch_array($res2)){

      echo $fila['nombre'].' -';

      }

      }

      Eliminar
    2. //Esta seria otra variante....

      if($res){
      $res2 = mysql_query("select * from peronas", $con);
      while($registro = mysql_fetch_row)($res2){
      echo $registro[0];
      }
      }

      Eliminar
  3. 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

    ResponderEliminar
    Respuestas
    1. Pues no me manda ningun error, solamente no guarda, te mando como modifique el script, saludos

      <-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->

      Eliminar
    2. 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

      Eliminar
    3. Para evitar ese problema de volver a refrescar la página he mejorado el código, si quieres vuelve a descargarlo o echale un vistazo.

      Eliminar
  4. disculpen como puedo hacer que el mensaje que aparece despues de la insercion se limpie para insertar otra informacion nueva

    ResponderEliminar
  5. funciona excelente gracias

    ResponderEliminar
  6. no funciona lo probe y no inserta nada no se que sea ayuda

    ResponderEliminar
  7. chido me gusto y a mi me funciona

    ResponderEliminar
    Respuestas
    1. disculpa no se que sea lo copie tal cual en xampp y no me inserta nada que es la ibreria o que paso

      Eliminar
  8. podrian poner ejemplos para modificar es ue aun soy novato en eso

    ResponderEliminar
  9. Hola, como podria hacer para que muestre los datos todo el tiempo sin que tenga que hacerlo solo al presionar el boton?

    ResponderEliminar
  10. Muy buen aporte pero quisiera saber si sirviera o como hacer para poder modificar el registro ya ingresado para poder borrarlo.
    Ejemplo
    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);
    }});

    ResponderEliminar