Ingreso a base de datos sin recargar la página con AJAX - ejemplo práctico

Para obtener los códigos clickeá aquí y no olvides revisar a nuestros anunciantes :)

Instrucciones

Hacer click en cualquiera de los dos cuadros de texto gris ubicados por debajo de este texto. Modificar el contenido a gusto y luego clickear fuera del cuadro. Los datos modificados son enviados a la base de datos sin necesidad de realizar una recarga de la página. El código fuente viene en dos archivos ".php" muy ordenado y fácilmente entendible para aquellos que están dando sus primeros pasos con AJAX.

aaa
we3786

Funcionamiento

Al clickear sobre una de las dos filas punteadas, se captura el evento onClick y una función de JavaScript se encarga de transformar el texto contenido en esta fila en un campo input cuyo atributo value es igual a ese texto. A este input se le asigna también un ID que luego lo indetificará con la base de datos. Al quitar el foco de este nuevo input recientemente creado (haciendo clic en alguna otra parte de la página) otra función es la encargada de capturar el valor ingresado por el usuario y el ID de la fila en la cual lo ingresó y validar estos datos en el cliente mediante una expresion regular. Si la validación es correcta, se informa al servidor de manera asincrónica cuales son esos datos recogidos; en caso contrario se informa al usuario mediante un mensaje de error. El servidor simplemente valida que la información recibida no contenga caracteres no permitidos (se valida tambián en el servidor debido a que no podemos confiar en que la información siempre provenga filtrada desde JavaScript) y luego la guarda mediante un INSERT en la tabla correspondiente.

Para obtener los códigos clickeá aquí.

Actualización

Los últimos cambios realizados son:

  • Añadida posibilidad de incremento en la cantidad de inputs únicamente desde código HTML.
  • Nuevos comentarios destinados al mejor entendimiento del código.
  • Corrección de un pequeño error en la validación en servidor.
  • Código eficientizado y más claro.