BUSCAR CallAPIJavaScript CHATGPT

 Aquí tienes el código para implementar un formulario de búsqueda por nombre utilizando el método POST en index.php, así como una adaptación en api_json.php para manejar la búsqueda:

index.php:

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 Productos</title>
</head>
<body>

<form id="searchForm">
    <input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
    <button type="submit">Buscar</button>
</form>

<div id="lista"></div>

<script>
    const form = document.getElementById('searchForm');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        const searchTerm = document.getElementById('searchTerm').value;

        const xhr = new XMLHttpRequest();
        xhr.open('POST', 'api_json.php', true);
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.onload = function() {
            if (xhr.status === 200) {
                const response = JSON.parse(xhr.responseText);
                let registros = '<ul>';
                response.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            }
        };
        xhr.send('searchTerm=' + searchTerm);
    });
</script>

</body>
</html>
api_json.php:

php
Copy code
<?php

$pdo = new PDO('mysql:host=localhost;dbname=tienda', 'root', 'root');

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $searchTerm = $_POST['searchTerm'];
    $statement = $pdo->prepare('SELECT * FROM productos WHERE nombre LIKE ?');
    $statement->execute(["%$searchTerm%"]);
} else {
    $statement = $pdo->prepare('SELECT * FROM productos');
    $statement->execute();
}

$productos = $statement->fetchAll(PDO::FETCH_ASSOC);

$response = array();
foreach ($productos as $prod) {
    $response[] = array(
        'id' => $prod['id'],
        'nombre' => $prod['nombre'],
        'precio' => $prod['precio'],
        'estado' => $prod['estado'],
        'fotos' => $prod['fotos']
    );
}

// Devolver los datos en formato JSON
header('Content-Type: application/json');

echo json_encode($response);
?>
En este código, he agregado un formulario de búsqueda en index.php que envía los datos mediante el método POST a api_json.php. Luego, en api_json.php, se realiza una consulta SQL condicional para buscar productos según el término de búsqueda recibido. Finalmente, se devuelve la respuesta en formato JSON como antes.

User
hacer codigo donde se cargue la lista ul cuando se carga la pagina al incio con javascript puro
ChatGPT
Claro, puedes cargar la lista <ul> cuando la página se carga inicialmente utilizando JavaScript puro. Aquí tienes el código modificado para lograr eso:

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>Lista de Productos</title>
</head>
<body>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        const xhttpr = new XMLHttpRequest();

        xhttpr.open('GET', 'api_json.php', true);

        xhttpr.send();

        xhttpr.onload = () => {
            if (xhttpr.status === 200) {
                const response = JSON.parse(xhttpr.response);
                let registros = '<ul>';
                response.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            } else {
                // Manejar errores aquí
            }
        };
    });
</script>

</body>
</html>
En este código, he envuelto todo el código de carga dentro de un event listener que escucha el evento DOMContentLoaded. Esto asegura que el código se ejecuta una vez que la estructura DOM de la página está completamente cargada y lista para manipularse. De esta manera, la lista se cargará automáticamente cuando la página se abra por primera vez.

User
tener encuenta el boton con el input y se cargue la lista ul al inicio de la pagina 
ChatGPT
Para cargar la lista <ul> al inicio de la página y también tener en cuenta el botón y el input para buscar productos, podemos realizar algunas modificaciones. Aquí tienes el código actualizado:

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>Lista de Productos</title>
</head>
<body>

<form id="searchForm">
    <input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
    <button type="submit">Buscar</button>
</form>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        const form = document.getElementById('searchForm');
        form.addEventListener('submit', function(event) {
            event.preventDefault();
            cargarLista(document.getElementById('searchTerm').value);
        });
    });

    function cargarLista(searchTerm = '') {
        const xhttpr = new XMLHttpRequest();
        let url = 'api_json.php';
        if (searchTerm.trim() !== '') {
            url += '?searchTerm=' + encodeURIComponent(searchTerm);
        }

        xhttpr.open('GET', url, true);

        xhttpr.onload = () => {
            if (xhttpr.status === 200) {
                const response = JSON.parse(xhttpr.response);
                let registros = '<ul>';
                response.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            } else {
                // Manejar errores aquí
            }
        };
        xhttpr.send();
    }
</script>

</body>
</html>
En este código, la función cargarLista() se encarga de cargar la lista de productos. Se llama al principio cuando la página se carga por primera vez y también cuando se envía el formulario de búsqueda. Se toma en cuenta el valor del input de búsqueda y se concatena a la URL de la API si existe un término de búsqueda. De lo contrario, se llama a la API sin ningún parámetro de búsqueda.

User
usar  document.getElementById('boton').addEventListener('click', function () {   en vez <button type="submit">Buscar</button>
ChatGPT
Entendido, puedes reemplazar el uso del botón de tipo "submit" con un botón normal y usar JavaScript para manejar el evento de clic en lugar de enviar el formulario directamente. Aquí tienes el código actualizado para lograr eso:

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>Lista de Productos</title>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            const searchTerm = document.getElementById('searchTerm').value;
            cargarLista(searchTerm);
        });
    });

    function cargarLista(searchTerm = '') {
        const xhttpr = new XMLHttpRequest();
        let url = 'api_json.php';
        if (searchTerm.trim() !== '') {
            url += '?searchTerm=' + encodeURIComponent(searchTerm);
        }

        xhttpr.open('GET', url, true);

        xhttpr.onload = () => {
            if (xhttpr.status === 200) {
                const response = JSON.parse(xhttpr.response);
                let registros = '<ul>';
                response.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            } else {
                // Manejar errores aquí
            }
        };
        xhttpr.send();
    }
</script>

</body>
</html>
En este código, he eliminado el formulario y he reemplazado el botón de tipo "submit" con un botón normal. Luego, he agregado un event listener para el evento de clic en ese botón. Cuando se hace clic en el botón, se llama a la función cargarLista() con el valor del input de búsqueda como parámetro. De esta manera, se logra el mismo efecto que antes, pero sin necesidad de un formulario.

User
hacer la api_json para el ultimo codigo
ChatGPT
Claro, aquí está la versión actualizada de api_json.php para manejar la búsqueda por nombre de producto si se proporciona un término de búsqueda:

php
Copy code
<?php

$pdo = new PDO('mysql:host=localhost;dbname=tienda', 'root', 'root');

if ($_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['searchTerm'])) {
    $searchTerm = $_GET['searchTerm'];
    $statement = $pdo->prepare('SELECT * FROM productos WHERE nombre LIKE ?');
    $statement->execute(["%$searchTerm%"]);
} else {
    $statement = $pdo->prepare('SELECT * FROM productos');
    $statement->execute();
}

$productos = $statement->fetchAll(PDO::FETCH_ASSOC);

$response = array();
foreach ($productos as $prod) {
    $response[] = array(
        'id' => $prod['id'],
        'nombre' => $prod['nombre'],
        'precio' => $prod['precio'],
        'estado' => $prod['estado'],
        'fotos' => $prod['fotos']
    );
}

// Devolver los datos en formato JSON
header('Content-Type: application/json');

echo json_encode($response);
?>
Este script PHP primero verifica si la solicitud es un GET y si se proporciona un parámetro searchTerm. Si se proporciona, realiza una búsqueda en la base de datos utilizando LIKE para encontrar los productos que coincidan con el término de búsqueda. Si no se proporciona un término de búsqueda o si la solicitud no es un GET, simplemente selecciona todos los productos de la base de datos. Luego, formatea los resultados como un array JSON y los imprime.

User
como y donde agrego el codigo para document.getElementById('boton').addEventListener('keypress', function (event) {

if (event.keyCode === 13) {



}

});
ChatGPT
Puedes agregar el código que maneja la pulsación de la tecla "Enter" dentro del bloque de código donde defines el evento de clic del botón. Aquí te muestro cómo puedes 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>Lista de Productos</title>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            buscarProductos();
        });

        document.getElementById('searchTerm').addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    function cargarLista(searchTerm = '') {
        const xhttpr = new XMLHttpRequest();
        let url = 'api_json.php';
        if (searchTerm.trim() !== '') {
            url += '?searchTerm=' + encodeURIComponent(searchTerm);
        }

        xhttpr.open('GET', url, true);

        xhttpr.onload = () => {
            if (xhttpr.status === 200) {
                const response = JSON.parse(xhttpr.response);
                let registros = '<ul>';
                response.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            } else {
                // Manejar errores aquí
            }
        };
        xhttpr.send();
    }

    function buscarProductos() {
        const searchTerm = document.getElementById('searchTerm').value;
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, he agregado un event listener al input searchTerm que escucha el evento keypress. Dentro de este event listener, verificamos si la tecla presionada es la tecla "Enter" (cuyo código es 13). Si lo es, llamamos a la función buscarProductos(), que a su vez llama a cargarLista() con el término de búsqueda actual. Esto permite que el usuario también pueda presionar "Enter" para realizar la búsqueda además de hacer clic en el botón.

User
hacer el codigo anterior pero con fetch('api_json.php')

.then(response => response.json())
.then(data => {
ChatGPT
Por supuesto, puedes reemplazar el uso de XMLHttpRequest con la API fetch. Aquí te muestro cómo modificar el código para que funcione con fetch:

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>Lista de Productos</title>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            buscarProductos();
        });

        document.getElementById('searchTerm').addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    function cargarLista(searchTerm = '') {
        let url = 'api_json.php';
        if (searchTerm.trim() !== '') {
            url += '?searchTerm=' + encodeURIComponent(searchTerm);
        }

        fetch(url)
            .then(response => response.json())
            .then(data => {
                let registros = '<ul>';
                data.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            })
            .catch(error => {
                console.error('Error:', error);
                // Manejar errores aquí
            });
    }

    function buscarProductos() {
        const searchTerm = document.getElementById('searchTerm').value;
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, he reemplazado la llamada a XMLHttpRequest con fetch(url). Luego, encadenamos las promesas utilizando .then() para manejar la respuesta y convertirla a JSON. Finalmente, el segundo .then() maneja los datos JSON recibidos y actualiza la lista de productos en el DOM.

User
hacer codigo pero con  $.ajax({
  url: 'api_json.php',
  method: 'POST',
  success: function(response) {
ChatGPT
Aquí tienes el código utilizando jQuery y el método $.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>Lista de Productos</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    $(document).ready(function() {
        cargarLista();

        $('#boton').click(function() {
            buscarProductos();
        });

        $('#searchTerm').keypress(function(event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    function cargarLista(searchTerm = '') {
        let url = 'api_json.php';
        let data = searchTerm.trim() !== '' ? { searchTerm: searchTerm } : {};

        $.ajax({
            url: url,
            method: 'POST',
            data: data,
            success: function(response) {
                let registros = '<ul>';
                $.each(response, function(index, campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                $('#lista').html(registros);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.error('Error:', textStatus, errorThrown);
                // Manejar errores aquí
            }
        });
    }

    function buscarProductos() {
        const searchTerm = $('#searchTerm').val();
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, se utiliza jQuery para realizar la solicitud AJAX. La función $.ajax() se encarga de enviar una solicitud POST a 'api_json.php', pasando los datos del término de búsqueda si existe. En el evento de éxito, se procesa la respuesta JSON y se actualiza la lista de productos en el DOM. En caso de error, se maneja el error utilizando la función de error dentro de $.ajax().

User
hacer la api_json.php para el ultimo
ChatGPT
Claro, aquí tienes el código de api_json.php que maneja tanto las solicitudes GET como las solicitudes POST para buscar productos por nombre:

php
Copy code
<?php

$pdo = new PDO('mysql:host=localhost;dbname=tienda', 'root', 'root');

if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['searchTerm'])) {
    $searchTerm = $_POST['searchTerm'];
    $statement = $pdo->prepare('SELECT * FROM productos WHERE nombre LIKE ?');
    $statement->execute(["%$searchTerm%"]);
} else {
    $statement = $pdo->prepare('SELECT * FROM productos');
    $statement->execute();
}

$productos = $statement->fetchAll(PDO::FETCH_ASSOC);

$response = array();
foreach ($productos as $prod) {
    $response[] = array(
        'id' => $prod['id'],
        'nombre' => $prod['nombre'],
        'precio' => $prod['precio'],
        'estado' => $prod['estado'],
        'fotos' => $prod['fotos']
    );
}

// Devolver los datos en formato JSON
header('Content-Type: application/json');

echo json_encode($response);
?>
Este script PHP verifica si la solicitud es un POST y si se proporciona un parámetro searchTerm. Si se proporciona, realiza una búsqueda en la base de datos utilizando LIKE para encontrar los productos que coincidan con el término de búsqueda. Si no se proporciona un término de búsqueda o si la solicitud no es un POST, simplemente selecciona todos los productos de la base de datos. Luego, formatea los resultados como un array JSON y los imprime.

User
hacer el codigo para axios.get('api_json.php')
  .then(response => {
    
    const responseData = response.data;
ChatGPT
Aquí tienes el código utilizando Axios para hacer una solicitud GET a api_json.php y manejar la respuesta:

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>Lista de Productos</title>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            buscarProductos();
        });

        document.getElementById('searchTerm').addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    function cargarLista(searchTerm = '') {
        let url = 'api_json.php';
        if (searchTerm.trim() !== '') {
            url += '?searchTerm=' + encodeURIComponent(searchTerm);
        }

        axios.get(url)
            .then(response => {
                const responseData = response.data;
                let registros = '<ul>';
                responseData.forEach(function(campo) {
                    registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
                });
                registros += '</ul>';
                document.getElementById('lista').innerHTML = registros;
            })
            .catch(error => {
                console.error('Error:', error);
                // Manejar errores aquí
            });
    }

    function buscarProductos() {
        const searchTerm = document.getElementById('searchTerm').value;
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, se utiliza Axios para realizar una solicitud GET a api_json.php. Cuando la solicitud tiene éxito, se procesa la respuesta JSON utilizando .then() y se actualiza la lista de productos en el DOM. Si hay un error en la solicitud, se maneja utilizando .catch() y se muestra en la consola.

User
hacer codigo para const cargarlista = async () => {
  try {
    const respuesta = await fetch('api_json.php')
    const data = await respuesta.json()
ChatGPT
Claro, aquí tienes el código utilizando funciones asíncronas y el método fetch:

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>Lista de Productos</title>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            buscarProductos();
        });

        document.getElementById('searchTerm').addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    const cargarLista = async () => {
        try {
            const respuesta = await fetch('api_json.php');
            const data = await respuesta.json();
            let registros = '<ul>';
            data.forEach(function(campo) {
                registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
            });
            registros += '</ul>';
            document.getElementById('lista').innerHTML = registros;
        } catch (error) {
            console.error('Error:', error);
            // Manejar errores aquí
        }
    };

    function buscarProductos() {
        const searchTerm = document.getElementById('searchTerm').value;
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, la función cargarLista utiliza async/await para realizar la solicitud fetch de forma asíncrona. Primero, espera la respuesta de la solicitud fetch y luego espera convertir la respuesta en formato JSON. Después de eso, procesa los datos y actualiza la lista de productos en el DOM. Si hay algún error en el proceso, se maneja utilizando un bloque try...catch.


2 / 2

User
hacer const respuesta = await fetch('api_json.php');
            const data = await respuesta.json();   con el metodo get para pasar el valor input hacia la api
ChatGPT
Para pasar el valor del input al servidor utilizando el método GET en la solicitud fetch, puedes incluir el valor del input en la URL como parámetro de consulta. Aquí tienes 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>Lista de Productos</title>
</head>
<body>

<input type="text" name="searchTerm" id="searchTerm" placeholder="Nombre del producto">
<button id="boton">Buscar</button>

<div id="lista"></div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        cargarLista();

        document.getElementById('boton').addEventListener('click', function () {
            buscarProductos();
        });

        document.getElementById('searchTerm').addEventListener('keypress', function (event) {
            if (event.keyCode === 13) {
                buscarProductos();
            }
        });
    });

    const cargarLista = async (searchTerm = '') => {
        try {
            let url = 'api_json.php';
            if (searchTerm.trim() !== '') {
                url += '?searchTerm=' + encodeURIComponent(searchTerm);
            }

            const respuesta = await fetch(url);
            const data = await respuesta.json();
            let registros = '<ul>';
            data.forEach(function(campo) {
                registros += `<li>${campo.id}) ${campo.nombre} _ $${campo.precio}</li>`;
            });
            registros += '</ul>';
            document.getElementById('lista').innerHTML = registros;
        } catch (error) {
            console.error('Error:', error);
            // Manejar errores aquí
        }
    };

    function buscarProductos() {
        const searchTerm = document.getElementById('searchTerm').value;
        cargarLista(searchTerm);
    }
</script>

</body>
</html>
En este código, la función cargarLista ahora toma un parámetro searchTerm, que es el valor del input. Este valor se concatena a la URL como parámetro de consulta cuando se realiza la solicitud fetch. Luego, en el servidor, puedes leer este parámetro searchTerm y realizar la búsqueda correspondiente en la base de datos.

Comentarios

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

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

NUMEROS SERIE DE DISCO RIGIDO Y PENDRIVER USB CON PHP