Ir al contenido principal

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

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.

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

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

      }

      }

      Borrar
    2. //Esta seria otra variante....

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

      Borrar
  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

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

      Borrar
    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

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

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

    ResponderBorrar
  5. funciona excelente gracias

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

    ResponderBorrar
  7. chido me gusto y a mi me funciona

    ResponderBorrar
    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

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

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

    ResponderBorrar
  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);
    }});

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Buscador en tiempo real con AJAX, PHP y MySQL

Buscador realizado en HTML utilizando como lenguaje de programación PHP , la tecnología AJAX y a MySQL como motor de base de datos.

Funciones (subprocesos) en PSeInt

A partir de la version 20121010 (10/Octubre/2012) PSeInt permite la posibilidad de definir funciones al que el creador del mismo bautizó como subprocesos , en este tutorial explicaremos brevemente cómo se tratan dichas funciones. Para empezar una función no es más que un bloque de código con un determinado fin o propósito, podemos definir más de una y nos permiten ahorrar líneas código si nuestros programas son muy extensos o hay codificación redundante.

Convertir un decimal a binario en PSeInt

Utilizaremos el siguiente método para convertir números decimales a binarios (números que se sólo se componen de unos y ceros). El método es sencillo, consiste en dividir el número decimal entre dos, despues su cociente entre el mismo número y así sucesivamente hasta que finalmente el cociente (que se convierte en un divisor) sea igual a uno. Despúes organizamos los residuos desde el último al primero para obtener el número binario que buscamos.