Insertar datos con jQuery y PHP en MySQL

jqueryVamos a ver otro método más para insertar datos en una base de datos MySQL, hace unos meses vímos como insertar datos en MySQL con Ajax y PHP. Todo esto viene por la necesidad de introducir datos en nuestra base de datos sin tener que recargar la página para recoger las variables de PHP o tener que ir a otra distinta, ya que podemos tener datos en la página actual que no queremos tener que volver a recargarlos, o simplemente por comodidad para el usuario.

Con el método de jQuery haremos casi lo mismo que con Ajax, vamos a recolectar los datos del formulario y los enviaremos mediante POST a una página PHP del backend que hará la inserción por nosotros.

Después nos devolverá un mensaje con el resultado de la operación. Todo esto por supuesto tendremos que hacerlo con todas las medidas de seguridad posibles, como conexión a la base de datos segura con PDO o encriptación de los datos y demás, ya que desviaríamos el objeto del artículo con medidas que nunca serían suficientes. Por supuesto este artículo va destinado a la gente que está en proceso de aprendizaje, ya que una vez que se empieza a dominar el lenguaje PHP, es recomendable utilizar POO, y para ello es bastante recomendable utilizar frameworks como CodeIgniter o Symfony2.

Una vez aclarados todos los términos, por si quedaba alguna duda, vamos a empezar con el desarrollo del ejercicio. Para el ejercicio de hoy vamos a emplear dos archivos, uno que tendrá el formulario y el código jQuery y otro que insertará un nombre y una contraseña en una base de datos.

Formulario de acceso: index.html

<html>
	<head>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">
			$('document').ready(function(){
				$('#boton').click(function(){
					if($('#nombre').val()==""){
						alert("Introduce el nombre");
						return false;
					}
					else{
						var nombre = $('#nombre').val();
					}
					if($('#pass').val()==""){
						alert("Introduce la contrasena");
						return false;
					}
					else{
						var pass = $('#pass').val();
					}
					jQuery.post("procesar.php", {
						name:nombre,
						pwd:pass
					}, function(data, textStatus){
						if(data == 1){
							$('#res').html("Datos insertados.");
							$('#res').css('color','green');
						}
						else{
							$('#res').html("Ha ocurrido un error.");
							$('#res').css('color','red');
						}
					});
				});
			});
		</script>
	</head>
<body>
	<table id="form">
		<form>
			<tr>
				<td><label>Nombre: </label><input type="text" id="nombre"/></td>
				<td><label>Contrase&ntilde;a: </label><input type="text" id="pass"/></td>
			</tr>
			<tr>
				<td colspan="2"><input type="button" id="boton" value="Insertar"/></td>
			</tr>
		</form>
	</table>
	<span id="res"></span>
 
</body>

Procesar datos: procesar.php

<?php
 
$con = mysql_connect('localhost','pruebas','12345') or die('Error en conexion a la DB');
mysql_select_db('jquery', $con) or die('Error al seleccionar la DB');
 
$nombre = $_POST['name'];
$pass = $_POST['pwd'];
 
$res = mysql_query("INSERT INTO users(nombre,pass) VALUES('$nombre','$pass')");
if(mysql_affected_rows()>0){
	echo "1";
}
else{
	echo "2";
}
 
 
?>

Como vemos en el archivo index.html cargamos la librería de Google de jQuery, y pasamos por jQuery los datos del formulario mediante POST al archivo procesar.php que será el encargado de hacer la consulta SQL que inserta los datos en la base de datos.

Ver también: Insertar datos en Mysql con PHP usando Ajax para evitar recargar la página

¿Te ha gustado? Compártelo y Comenta! Puedes darme tu opinión o consultar tus dudas, de esta forma mantendremos la blogosfera viva.

    6 Commentsto Insertar datos con jQuery y PHP en MySQL

    1. Información Bitacoras.com…

      Valora en Bitacoras.com: Vamos a ver otro método más para insertar datos en una base de datos MySQL, hace unos meses vímos como insertar datos en MySQL con Ajax y PHP. Todo esto viene por la necesidad de introducir datos en nuestra base de datos s……

    2. Jorge Gomez dice:

      Buenas tarde a todos.
      Estoy tratando de conseguir un código de ejemplo donde tenga una pantalla de logeo y que después pase a una pantalla de formulario.
      Esto lo tengo de practica por un curso que pase una semana, pero no estoy muy claro.

    3. Geno dice:

      Hola, una consulta.. como hacen para insertar los datos que estan en el jquery?? yo intente asi,
      mysqli_query($con,$query) or die(‘Error al seleccionar la DB’);

      pero no funciona….

      gracias de ante mano :)

    Deja un comentario

    Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


    *

    © 2017 Soy Autodidacta | Design Theme by: D5 Creation | Powered by: WordPress