FORMULARIO BARD ACTUALIZAR JQUERY AJAX JSON POST PHP MYSQL

Hacer codigo de formulario para actualizar nombre precio y foto con php mysql metodo pdo ajax jquery que se actualiza con type json por post



Archivo connect.php


PHP

<?php


$host = "localhost";

$dbname = "mi_base_de_datos";

$username = "root";

$password = "";


try {

    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);

    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

} catch (PDOException $e) {

    echo "Error de conexión: " . $e->getMessage();

}


?>

Usa el código con precaución. Más información

Archivo update.php


PHP

<?php


$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_POST['foto'];


$consulta = "UPDATE productos SET nombre = '$nombre', precio = '$precio', foto = '$foto' WHERE id = '$id'";


$resultado = $conn->query($consulta);


if ($resultado) {

    echo "Producto actualizado correctamente";

} else {

    echo "Error al actualizar el producto";

}


?>

Usa el código con precaución. Más información

Archivo actualizar.php


HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Actualizar producto</title>

</head>

<body>


<h1>Actualizar producto</h1>


<form action="update.php" method="post" enctype="multipart/form-data">

    <input type="hidden" name="id" value="<?php echo $id; ?>">

    <input type="text" name="nombre" placeholder="Nombre" value="<?php echo $nombre; ?>">

    <input type="number" name="precio" placeholder="Precio" value="<?php echo $precio; ?>">

    <input type="file" name="foto">

    <input type="submit" value="Actualizar">

</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>

$(document).ready(function() {

    // Cuando se envíe el formulario, enviar los datos por AJAX

    $("form").submit(function(event) {

        event.preventDefault();


        // Obtener los datos del formulario

        var id = $("input[name='id']").val();

        var nombre = $("input[name='nombre']").val();

        var precio = $("input[name='precio']").val();

        var foto = $("input[name='foto']")[0].files[0];


        // Enviar los datos por AJAX

        $.ajax({

            url: "update.php",

            type: "post",

            data: {

                id: id,

                nombre: nombre,

                precio: precio,

                foto: foto

            },

            contentType: "multipart/form-data",

            success: function(respuesta) {

                if (respuesta == "Producto actualizado correctamente") {

                    alert("Producto actualizado correctamente");

                    location.reload();

                } else {

                    alert("Error al actualizar el producto");

                }

            }

        });

    });

});

</script>


</body>

</html>

Usa el código con precaución. Más información

Explicación del código


El archivo connect.php crea una conexión a la base de datos MySQL.


El archivo update.php recibe los datos del formulario y los actualiza en la base de datos.


El archivo actualizar.php muestra el formulario de actualización. El formulario incluye un campo oculto para el ID del producto, que se utiliza para identificar el producto que se va a actualizar. Los otros campos del formulario permiten al usuario actualizar el nombre, el precio y la foto del producto.


El código JavaScript del archivo actualizar.php se utiliza para enviar los datos del formulario por AJAX. El método ajax() de jQuery se utiliza para enviar los datos al archivo update.php. El archivo update.php procesa los datos y devuelve una respuesta. El código JavaScript comprueba la respuesta y, si es correcta, muestra un mensaje de éxito.


Fuentes

stackoverflow.com/questions/30643078/ask-jquery-datepicker-keep-selected-date-in-text-input

github.com/Zuzeido/API

github.com/egosumscientia/Various-courses

foto de perfil

Usar un actualiza.php de forma json respuesta



1

Para usar un update.php de forma JSON respuesta, necesitamos modificar el código de la siguiente manera:


En el archivo update.php, debemos cambiar el tipo de respuesta de text/html a application/json.

También debemos devolver un objeto JSON en lugar de un texto. El objeto JSON debe contener los siguientes campos:

exito: true si la actualización se realizó correctamente, false si no.

mensaje: Un mensaje que indica el resultado de la actualización.

El código modificado del archivo update.php quedaría de la siguiente manera:


PHP

<?php


$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_POST['foto'];


$consulta = "UPDATE productos SET nombre = '$nombre', precio = '$precio', foto = '$foto' WHERE id = '$id'";


$resultado = $conn->query($consulta);


$respuesta = [

    'exito' => $resultado ? true : false,

    'mensaje' => $resultado ? 'Producto actualizado correctamente' : 'Error al actualizar el producto'

];


header('Content-Type: application/json');


echo json_encode($respuesta);


?>

Usa el código con precaución. Más información

Para recibir la respuesta JSON en el archivo actualizar.php, debemos modificar el código de la siguiente manera:


En el archivo actualizar.php, debemos cambiar el atributo dataType de la llamada a ajax() a json.

También debemos cambiar el código del evento success() para procesar la respuesta JSON.

El código modificado del archivo actualizar.php quedaría de la siguiente manera:


HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Actualizar producto</title>

</head>

<body>


<h1>Actualizar producto</h1>


<form action="update.php" method="post" enctype="multipart/form-data">

    <input type="hidden" name="id" value="<?php echo $id; ?>">

    <input type="text" name="nombre" placeholder="Nombre" value="<?php echo $nombre; ?>">

    <input type="number" name="precio" placeholder="Precio" value="<?php echo $precio; ?>">

    <input type="file" name="foto">

    <input type="submit" value="Actualizar">

</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>

$(document).ready(function() {

    // Cuando se envíe el formulario, enviar los datos por AJAX

    $("form").submit(function(event) {

        event.preventDefault();


        // Obtener los datos del formulario

        var id = $("input[name='id']").val();

        var nombre = $("input[name='nombre']").val();

        var precio = $("input[name='precio']").val();

        var foto = $("input[name='foto']")[0].files[0];


        // Enviar los datos por AJAX

        $.ajax({

            url: "update.php",

            type: "post",

            data: {

                id: id,

                nombre: nombre,

                precio: precio,

                foto: foto

            },

            contentType: "multipart/form-data",

            dataType: "json",

            success: function(respuesta) {

                if (respuesta.exito) {

                    alert("Producto actualizado correctamente");

                    location.reload();

                } else {

                    alert(respuesta.mensaje);

                }

            }

        });

    });

});

</script>

</body>

</html>

Usa el código con precaución. Más información

Con este código, cuando se envía el formulario, se envía una solicitud AJAX al archivo update.php. El archivo update.php devuelve una respuesta JSON. El archivo actualizar.php recibe la respuesta JSON y, si es correcta, muestra un mensaje de éxito.


Fuentes

github.com/egosumscientia/Various-courses

foto de perfil

En update.php guarda la imagen con move_uploaded_file agregar el codigo


Para guardar la imagen con move_uploaded_file() en el archivo update.php, debemos modificar el código de la siguiente manera:


Antes de actualizar el producto en la base de datos, debemos guardar la imagen en el servidor.

Para ello, utilizamos la función move_uploaded_file().

La función move_uploaded_file() recibe dos parámetros:

El primer parámetro es la ruta del archivo subido.

El segundo parámetro es la ruta a la que se desea mover el archivo.

El código modificado del archivo update.php quedaría de la siguiente manera:


PHP

<?php


$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_POST['foto'];


// Guardar la imagen

if ($foto) {

    $ruta_archivo = $foto['tmp_name'];

    $ruta_destino = "imagenes/" . basename($foto['name']);


    move_uploaded_file($ruta_archivo, $ruta_destino);

}


$consulta = "UPDATE productos SET nombre = '$nombre', precio = '$precio', foto = '$ruta_destino' WHERE id = '$id'";


$resultado = $conn->query($consulta);


$respuesta = [

    'exito' => $resultado ? true : false,

    'mensaje' => $resultado ? 'Producto actualizado correctamente' : 'Error al actualizar el producto'

];


header('Content-Type: application/json');


echo json_encode($respuesta);


?>

Usa el código con precaución. Más información

Con este código, cuando se envía el formulario, se guarda la imagen en la carpeta imagenes con el nombre original. La ruta a la imagen se almacena en la base de datos.


Para evitar que se suban imágenes con extensiones peligrosas, podemos utilizar la función exif_imagetype() para comprobar la extensión del archivo. Si la extensión no es una extensión de imagen válida, podemos cancelar la subida del archivo.


El código modificado quedaría de la siguiente manera:


PHP

<?php


$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_POST['foto'];


// Comprobar la extensión de la imagen

$extension = strtolower(pathinfo($foto['name'], PATHINFO_EXTENSION));


if (!in_array($extension, ['jpg', 'jpeg', 'png'])) {

    echo "Error: La extensión de la imagen no es válida";

    exit();

}


// Guardar la imagen

if ($foto) {

    $ruta_archivo = $foto['tmp_name'];

    $ruta_destino = "imagenes/" . basename($foto['name']);


    move_uploaded_file($ruta_archivo, $ruta_destino);

}


$consulta = "UPDATE productos SET nombre = '$nombre', precio = '$precio', foto = '$ruta_destino' WHERE id = '$id'";


$resultado = $conn->query($consulta);


$respuesta = [

    'exito' => $resultado ? true : false,

    'mensaje' => $resultado ? 'Producto actualizado correctamente' : 'Error al actualizar el producto'

];


header('Content-Type: application/json');


echo json_encode($respuesta);


?>

Usa el código con precaución. Más información

foto de perfil

Al ultimo update.php agregar el limite de 3 megabytes de la foto a actualizar


Para agregar un límite de 3 megabytes a la foto a actualizar en el archivo update.php, debemos modificar el código de la siguiente manera:


Comprobamos el tamaño del archivo subido.

Si el tamaño del archivo es superior a 3 megabytes, cancelamos la subida del archivo.

El código modificado quedaría de la siguiente manera:


PHP

<?php


$id = $_POST['id'];

$nombre = $_POST['nombre'];

$precio = $_POST['precio'];

$foto = $_POST['foto'];


// Comprobar el tamaño de la imagen

$tamaño_archivo = $foto['size'];


if ($tamaño_archivo > 3145728) {

    echo "Error: El tamaño de la imagen no debe superar los 3 megabytes";

    exit();

}


// Comprobar la extensión de la imagen

$extension = strtolower(pathinfo($foto['name'], PATHINFO_EXTENSION));


if (!in_array($extension, ['jpg', 'jpeg', 'png'])) {

    echo "Error: La extensión de la imagen no es válida";

    exit();

}


// Guardar la imagen

if ($foto) {

    $ruta_archivo = $foto['tmp_name'];

    $ruta_destino = "imagenes/" . basename($foto['name']);


    move_uploaded_file($ruta_archivo, $ruta_destino);

}


$consulta = "UPDATE productos SET nombre = '$nombre', precio = '$precio', foto = '$ruta_destino' WHERE id = '$id'";


$resultado = $conn->query($consulta);


$respuesta = [

    'exito' => $resultado ? true : false,

    'mensaje' => $resultado ? 'Producto actualizado correctamente' : 'Error al actualizar el producto'

];


header('Content-Type: application/json');


echo json_encode($respuesta);


?>

Usa el código con precaución. Más información

Con este código, cuando se envía el formulario, se comprueba el tamaño del archivo subido. Si el tamaño del archivo es superior a 3 megabytes, se muestra un mensaje de error y se cancela la subida del archivo.


foto de perfil

Hacer el html para el ultimo update.php

Ver otras versiones
















1

El código HTML para el último update.php quedaría de la siguiente manera:


HTML

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Actualizar producto</title>

</head>

<body>


<h1>Actualizar producto</h1>


<form action="update.php" method="post" enctype="multipart/form-data">

    <input type="hidden" name="id" value="<?php echo $id; ?>">

    <input type="text" name="nombre" placeholder="Nombre" value="<?php echo $nombre; ?>">

    <input type="number" name="precio" placeholder="Precio" value="<?php echo $precio; ?>">

    <input type="file" name="foto">

    <input type="submit" value="Actualizar">

</form>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>


<script>

$(document).ready(function() {

    // Cuando se envíe el formulario, enviar los datos por AJAX

    $("form").submit(function(event) {

        event.preventDefault();


        // Obtener los datos del formulario

        var id = $("input[name='id']").val();

        var nombre = $("input[name='nombre']").val();

        var precio = $("input[name='precio']").val();

        var foto = $("input[name='foto']")[0].files[0];


        // Comprobar el tamaño de la imagen

        var tamaño_archivo = foto.size;


        if (tamaño_archivo > 3145728) {

            alert("Error: El tamaño de la imagen no debe superar los 3 megabytes");

            return false;

        }


        // Enviar los datos por AJAX

        $.ajax({

            url: "update.php",

            type: "post",

            data: {

                id: id,

                nombre: nombre,

                precio: precio,

                foto: foto

            },

            contentType: "multipart/form-data",

            dataType: "json",

            success: function(respuesta) {

                if (respuesta.exito) {

                    alert("Producto actualizado correctamente");

                    location.reload();

                } else {

                    alert(respuesta.mensaje);

                }

            }

        });

    });

});

</script>


</body>

</html>

Usa el código con precaución. Más información

Este código HTML es el mismo que el del último update.php, con la única diferencia de que se ha añadido el siguiente código al evento submit() del formulario:


JavaScript

// Comprobar el tamaño de la imagen

var tamaño_archivo = foto.size;


if (tamaño_archivo > 3145728) {

    alert("Error: El tamaño de la imagen no debe superar los 3 megabytes");

    return false;

}

Usa el código con precaución. Más información

Este código comprueba el tamaño del archivo subido. Si el tamaño del archivo es superior a 3 megabytes, se muestra un mensaje de error y el formulario no se envía.


Fuentes

github.com/egosumscientia/Various-courses 

Comentarios

Publicar un comentario

Entradas populares de este blog

Como proteger una api json con php al pasar el parametro POST[id] de los ataques sql injection y xss

 Como proteger una api json con php al pasar el parametro POST_[id] de los ataques sql injection y xss ChatGPT Para proteger una API JSON en PHP contra ataques de inyección SQL y XSS al pasar parámetros como POST[id], puedes seguir algunas prácticas de seguridad: Validación de entrada: Antes de usar cualquier dato recibido del usuario, valida y filtra la entrada para asegurarte de que cumple con los requisitos esperados. Puedes utilizar funciones como filter_input() o filter_var() para validar y sanitizar los datos. Preparación de consultas SQL: Si estás realizando consultas SQL directamente en tu base de datos, utiliza sentencias preparadas (prepared statements) y parámetros vinculados (bound parameters) en lugar de construir consultas SQL concatenando cadenas de texto. Las sentencias preparadas ayudan a prevenir la inyección SQL al separar los datos de las instrucciones SQL. Escape de salida: Cuando devuelvas datos a través de la API JSON, asegúrate de escapar apropiadamente los ...
Leer más

Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6

  Copia de Seguridad de Archivo MS Access (.mdb) a Pendrive con VB6   Para crear una copia de seguridad de un archivo MS Access (.mdb) a un pendrive cuando se hace clic en un botón en un formulario VB6, puedes usar el siguiente código: vb Private Sub cmdBackup_Click ()     On Error GoTo ErrorHandler         Dim ArchivoOrigen As String     Dim ArchivoDestino As String     Dim UnidadPendrive As String     Dim FSO As Object     Dim Drv As Object     Dim Existe As Boolean         ' Ruta del archivo de origen (base de datos Access)     ArchivoOrigen = "C:\Ruta\A\Tu\BaseDeDatos.mdb" ' Cambiar por tu ruta real         ' Verificar si el archivo de origen existe     If Dir(ArchivoOrigen) = "" Then         Ms...
Leer más

NUMEROS SERIE DE DISCO RIGIDO Y PENDRIVER USB CON PHP

 Para listar todos los dispositivos USB conectados y obtener su número de serie en PHP usando wmic, necesitas ajustar el comando wmic. El comando que tienes está intentando filtrar las unidades basadas en una letra de unidad, lo cual no funcionará para todos los dispositivos USB. En su lugar, puedes usar el siguiente enfoque:     Usa wmic diskdrive para obtener todos los dispositivos conectados, y luego puedes filtrarlos por MediaType o DeviceID para identificar cuáles son dispositivos USB. Aquí tienes el código corregido: php // Ejecutar el comando para listar todas las unidades de disco, incluyendo USB $output2 = shell_exec('wmic diskdrive where "MediaType=\'Removable Media\'" get DeviceID,SerialNumber,Model'); // Ver la salida completa (para depuración) echo "<pre>$output2</pre>"; Explicación:     wmic diskdrive where "MediaType='Removable Media'" get DeviceID,SerialNumber,Model: Este comando obtiene todas las unidade...
Leer más