Buscar por id EN form metodo ajax jquery post traer los datos json_encode mysql pdo

 Crear in formulario html con los sig campos id nombre precio 

ChatGPT

Aquí tienes un ejemplo básico de un formulario HTML con los campos id, nombre y precio:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Formulario</title>

</head>

<body>

    <h2>Formulario de Producto</h2>

    <form action="procesar_formulario.php" method="post">

        <div>

            <label for="id">ID:</label>

            <input type="text" id="id" name="id" required>

        </div>

        <div>

            <label for="nombre">Nombre:</label>

            <input type="text" id="nombre" name="nombre" required>

        </div>

        <div>

            <label for="precio">Precio:</label>

            <input type="number" id="precio" name="precio" step="0.01" required>

        </div>

        <div>

            <button type="submit">Enviar</button>

        </div>

    </form>

</body>

</html>

Este formulario HTML tiene tres campos:


ID: Se espera que el usuario ingrese el ID del producto. Se ha utilizado un campo de texto (<input type="text">).

Nombre: El usuario debe ingresar el nombre del producto. También es un campo de texto (<input type="text">).

Precio: Este campo permite al usuario ingresar el precio del producto. Se ha utilizado un campo numérico (<input type="number">) con el atributo step="0.01" para permitir dos decimales.

El formulario está configurado para enviar los datos a procesar_formulario.php utilizando el método POST. Debes crear un archivo PHP llamado procesar_formulario.php para manejar los datos enviados por el formulario.


User

Buscar por id atravez metodo ajax jquery  por post traer los datos atravez de json_encode de una base datos mysql metodo pdo

ChatGPT

Aquí te muestro cómo podrías realizar una búsqueda por ID utilizando AJAX con jQuery para enviar una solicitud POST a un script PHP que consulta una base de datos MySQL utilizando PDO y devuelve los resultados codificados en JSON:


HTML con jQuery AJAX: Crear un formulario simple con un campo para ingresar el ID y un botón para enviar la solicitud AJAX.

html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

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

    <script>

        $(document).ready(function(){

            $("#buscar").click(function(){

                var id = $("#id").val();

                $.ajax({

                    type: "POST",

                    url: "buscar_producto.php",

                    data: { id: id },

                    dataType: "json",

                    success: function(data){

                        $("#resultado").html("<p>Nombre: " + data.nombre + "</p><p>Precio: " + data.precio + "</p>");

                    }

                });

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div id="resultado"></div>

</body>

</html>

Script PHP para manejar la búsqueda (buscar_producto.php): Este script recibirá el ID enviado por AJAX, consultará la base de datos y devolverá los resultados codificados en JSON.

php

Copy code

<?php

// Conexión a la base de datos

$dsn = 'mysql:host=localhost;dbname=nombre_basedatos';

$username = 'usuario';

$password = 'contraseña';


try {

    $conexion = new PDO($dsn, $username, $password);

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

} catch (PDOException $e) {

    echo 'Error al conectarse a la base de datos: ' . $e->getMessage();

    exit;

}


// Verificar si se recibió un ID válido

if (isset($_POST['id'])) {

    $id = $_POST['id'];


    // Consultar la base de datos por el ID

    $consulta = "SELECT nombre, precio FROM productos WHERE id = :id";

    $stmt = $conexion->prepare($consulta);

    $stmt->bindParam(':id', $id);

    $stmt->execute();


    // Obtener los resultados

    $producto = $stmt->fetch(PDO::FETCH_ASSOC);


    // Devolver los resultados codificados en JSON

    echo json_encode($producto);

} else {

    // Si no se recibió un ID válido

    echo json_encode(array('error' => 'ID no válido'));

}

?>

Asegúrate de reemplazar nombre_basedatos, usuario y contraseña con la información de tu base de datos MySQL. Además, ajusta la consulta SQL y la estructura de tu base de datos según sea necesario.


User

Mostrar el resultado en 2 inputs dentro del mismo formulario al buscar por id

ChatGPT

Para mostrar los resultados de la búsqueda en dos campos de entrada dentro del mismo formulario, puedes modificar el manejo de la respuesta AJAX y actualizar los valores de los campos de entrada con los datos obtenidos. Aquí tienes una versión actualizada del código:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

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

    <script>

        $(document).ready(function(){

            $("#buscar").click(function(){

                var id = $("#id").val();

                $.ajax({

                    type: "POST",

                    url: "buscar_producto.php",

                    data: { id: id },

                    dataType: "json",

                    success: function(data){

                        $("#nombre").val(data.nombre);

                        $("#precio").val(data.precio);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div>

        <label for="nombre">Nombre:</label>

        <input type="text" id="nombre" readonly>

    </div>

    <div>

        <label for="precio">Precio:</label>

        <input type="text" id="precio" readonly>

    </div>

</body>

</html>

En este código, después de que la solicitud AJAX tenga éxito, los valores nombre y precio recibidos del servidor se establecen como valores de los campos de entrada correspondientes con los ID nombre y precio. Estos campos están configurados como de solo lectura (readonly) para evitar que el usuario modifique los valores directamente.


User

Mostrar el resultado de la consulta pero con una table html

ChatGPT

Claro, puedes mostrar los resultados de la consulta en una tabla HTML. Aquí te muestro cómo hacerlo:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

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

    <script>

        $(document).ready(function(){

            $("#buscar").click(function(){

                var id = $("#id").val();

                $.ajax({

                    type: "POST",

                    url: "buscar_producto.php",

                    data: { id: id },

                    dataType: "json",

                    success: function(data){

                        var table = "<table border='1'><tr><th>Nombre</th><th>Precio</th></tr>";

                        table += "<tr><td>" + data.nombre + "</td><td>" + data.precio + "</td></tr></table>";

                        $("#resultado").html(table);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div id="resultado"></div>

</body>

</html>

En este código, se agrega una tabla HTML dentro del div con el ID resultado. Cuando se realiza la búsqueda exitosamente, se crea una fila de tabla con los datos del producto y se actualiza el contenido del div con la nueva tabla que contiene los resultados de la búsqueda.


User

Mostrar el resultado en una lista ul li de html 

ChatGPT

Claro, puedes mostrar los resultados de la consulta en una lista <ul> con elementos <li> en HTML. Aquí te muestro cómo hacerlo:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

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

    <script>

        $(document).ready(function(){

            $("#buscar").click(function(){

                var id = $("#id").val();

                $.ajax({

                    type: "POST",

                    url: "buscar_producto.php",

                    data: { id: id },

                    dataType: "json",

                    success: function(data){

                        var lista = "<ul>";

                        lista += "<li><strong>Nombre:</strong> " + data.nombre + "</li>";

                        lista += "<li><strong>Precio:</strong> " + data.precio + "</li>";

                        lista += "</ul>";

                        $("#resultado").html(lista);

                    }

                });

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div id="resultado"></div>

</body>

</html>

En este código, se agrega una lista <ul> dentro del div con el ID resultado. Cuando se realiza la búsqueda exitosamente, se crea una lista de elementos <li> con los datos del producto y se actualiza el contenido del div con la nueva lista que contiene los resultados de la búsqueda.


User

Hacer el $.ajax({

                    type: "POST",  pero con el metodo fetch de javascript vanilla

ChatGPT

Claro, puedes realizar la solicitud POST utilizando el método fetch() de JavaScript. Aquí te muestro cómo hacerlo:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

    <script>

        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById("buscar").addEventListener("click", function() {

                var id = document.getElementById("id").value;

                fetch("buscar_producto.php", {

                    method: "POST",

                    body: JSON.stringify({ id: id }),

                    headers: {

                        "Content-Type": "application/json"

                    }

                })

                .then(response => response.json())

                .then(data => {

                    var lista = "<ul>";

                    lista += "<li><strong>Nombre:</strong> " + data.nombre + "</li>";

                    lista += "<li><strong>Precio:</strong> " + data.precio + "</li>";

                    lista += "</ul>";

                    document.getElementById("resultado").innerHTML = lista;

                })

                .catch(error => console.error("Error:", error));

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div id="resultado"></div>

</body>

</html>

En este código, se utiliza fetch() para realizar la solicitud POST a buscar_producto.php. La información del formulario se envía en el cuerpo de la solicitud como un objeto JSON utilizando JSON.stringify(). Luego, se maneja la respuesta JSON y se actualiza el contenido del elemento div con el ID resultado con los datos recibidos.


User

Hacer code con fetch javascript con la table html

ChatGPT

Claro, aquí te dejo cómo puedes usar el método fetch() de JavaScript para realizar una solicitud POST y mostrar los resultados en una tabla HTML:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

    <script>

        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById("buscar").addEventListener("click", function() {

                var id = document.getElementById("id").value;

                fetch("buscar_producto.php", {

                    method: "POST",

                    body: JSON.stringify({ id: id }),

                    headers: {

                        "Content-Type": "application/json"

                    }

                })

                .then(response => response.json())

                .then(data => {

                    var table = "<table border='1'><tr><th>Nombre</th><th>Precio</th></tr>";

                    table += "<tr><td>" + data.nombre + "</td><td>" + data.precio + "</td></tr></table>";

                    document.getElementById("resultado").innerHTML = table;

                })

                .catch(error => console.error("Error:", error));

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div id="resultado"></div>

</body>

</html>

Este código JavaScript realiza una solicitud POST a buscar_producto.php y espera una respuesta en formato JSON. Luego, crea una tabla HTML con los datos recibidos y la inserta en el elemento <div> con el ID resultado. Asegúrate de ajustar buscar_producto.php para manejar la solicitud y devolver los datos correspondientes.


User

Hacer code pero mostrar resultado en el mismo formulario con 2 inputs con el metodo fetch

ChatGPT

Claro, aquí tienes cómo hacer una solicitud utilizando el método fetch() de JavaScript y mostrar los resultados en dos campos de entrada en el mismo formulario:


html

Copy code

<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Buscar Producto por ID</title>

    <script>

        document.addEventListener("DOMContentLoaded", function() {

            document.getElementById("buscar").addEventListener("click", function() {

                var id = document.getElementById("id").value;

                fetch("buscar_producto.php", {

                    method: "POST",

                    body: JSON.stringify({ id: id }),

                    headers: {

                        "Content-Type": "application/json"

                    }

                })

                .then(response => response.json())

                .then(data => {

                    document.getElementById("nombre").value = data.nombre;

                    document.getElementById("precio").value = data.precio;

                })

                .catch(error => console.error("Error:", error));

            });

        });

    </script>

</head>

<body>

    <h2>Buscar Producto por ID</h2>

    <div>

        <label for="id">ID del Producto:</label>

        <input type="text" id="id">

        <button id="buscar">Buscar</button>

    </div>

    <div>

        <label for="nombre">Nombre:</label>

        <input type="text" id="nombre" readonly>

    </div>

    <div>

        <label for="precio">Precio:</label>

        <input type="text" id="precio" readonly>

    </div>

</body>

</html>

En este código, se captura el valor del campo de entrada id, luego se realiza una solicitud POST utilizando fetch(). Una vez que se recibe la respuesta del servidor en formato JSON, se actualizan los valores de los campos de entrada nombre y precio con los datos recibidos. Los campos de entrada están marcados como de solo lectura (readonly) para evitar que el usuario modifique los valores directamente. Asegúrate de ajustar buscar_producto.php para manejar la solicitud y devolver los datos correspondientes.


User

Hacer codigo para buscar_producto.php para el metodo fetch de javascript 

ChatGPT

Claro, aquí te muestro cómo podrías estructurar el archivo buscar_producto.php para manejar la solicitud POST enviada desde el código JavaScript utilizando el método fetch():


php

Copy code

<?php

// Conexión a la base de datos

$dsn = 'mysql:host=localhost;dbname=nombre_basedatos';

$username = 'usuario';

$password = 'contraseña';


try {

    $conexion = new PDO($dsn, $username, $password);

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

} catch (PDOException $e) {

    echo json_encode(array('error' => 'Error al conectarse a la base de datos: ' . $e->getMessage()));

    exit;

}


// Verificar si se recibió un ID válido

if (isset($_POST['id'])) {

    $id = $_POST['id'];


    // Consultar la base de datos por el ID

    $consulta = "SELECT nombre, precio FROM productos WHERE id = :id";

    $stmt = $conexion->prepare($consulta);

    $stmt->bindParam(':id', $id);

    $stmt->execute();


    // Obtener los resultados

    $producto = $stmt->fetch(PDO::FETCH_ASSOC);


    // Devolver los resultados codificados en JSON

    echo json_encode($producto);

} else {

    // Si no se recibió un ID válido

    echo json_encode(array('error' => 'ID no válido'));

}

?>

Este archivo PHP manejará la solicitud POST enviada desde el código JavaScript utilizando fetch(). Realiza una conexión a la base de datos MySQL utilizando PDO y ejecuta una consulta para obtener los datos del producto correspondiente al ID proporcionado. Luego, devuelve los resultados codificados en JSON para que el JavaScript los pueda manejar. Asegúrate de ajustar nombre_basedatos, usuario y contraseña con la información de tu base de datos MySQL.





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