SELECT COMBO DEPENDIENTES CON FETCH API JSON METODO POST PHP MYSQL

 hazme ejemplo codigo de 2 select combo dependientes con fetch api json metodo post  php mysql

Claro, aquí te proporciono un ejemplo de código en PHP para implementar dos select combos dependientes con Fetch API y JSON utilizando el método POST para obtener los datos de una base de datos MySQL.


Primeramente, suponiendo que tengas una tabla en tu base de datos MySQL llamada paises que contiene información de países, tales como id_pais y nombre_pais, y otra tabla llamada ciudades que contiene información de ciudades, tales como id_ciudad, nombre_ciudad, y id_pais (clave foránea para relacionar las ciudades con los países), puedes utilizar el siguiente código:


HTML:


php

Copy code

<label for="pais">País:</label>

<select id="pais" name="pais">

  <option value="">Selecciona un país</option>

  <?php

    // Conexión a la base de datos

    $conexion = new PDO("mysql:host=nombre_servidor;dbname=nombre_base_de_datos", "nombre_usuario", "contraseña_usuario");

    // Consulta para obtener todos los países

    $consulta_paises = $conexion->query("SELECT * FROM paises");

    // Mostrar opciones del select de países

    while ($fila = $consulta_paises->fetch(PDO::FETCH_ASSOC)) {

      echo '<option value="' . $fila['id_pais'] . '">' . $fila['nombre_pais'] . '</option>';

    }

  ?>

</select>


<label for="ciudad">Ciudad:</label>

<select id="ciudad" name="ciudad" disabled>

  <option value="">Selecciona primero un país</option>

</select>

JS (utilizando Fetch API):


javascript

Copy code

const paisSelect = document.getElementById('pais');

const ciudadSelect = document.getElementById('ciudad');


paisSelect.addEventListener('change', () => {

  // Obtener el valor del select de países

  const idPais = paisSelect.value;


  // Si se seleccionó un país, habilitar el select de ciudades

  ciudadSelect.disabled = !idPais;


  // Limpiar opciones actuales del select de ciudades

  ciudadSelect.innerHTML = '<option value="">Cargando...</option>';


  // Obtener las ciudades correspondientes al país seleccionado

  fetch('ruta_a_tu_archivo.php', {

    method: 'POST',

    headers: {

      'Content-Type': 'application/json'

    },

    body: JSON.stringify({

      id_pais: idPais

    })

  })

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

  .then(data => {

    // Mostrar las opciones en el select de ciudades

    ciudadSelect.innerHTML = '<option value="">Selecciona una ciudad</option>' + data.map(ciudad => `<option value="${ciudad.id_ciudad}">${ciudad.nombre_ciudad}</option>`).join('');

  })

  .catch(error => {

    console.error('Error:', error);

  });

});

PHP:


php

Copy code

// Conexión a la base de datos

$conexion = new PDO("mysql:host=nombre_servidor;dbname=nombre_base_de_datos", "nombre_usuario", "contraseña_usuario");


// Obtener el id del país enviado por POST

$idPais = $_POST['id_pais'];


// Consulta para obtener las ciudades correspondientes al país seleccionado

$consulta_ciudades = $conexion->prepare("SELECT * FROM ciudades WHERE id_pais = ?");

$consulta_ciudades->execute([$idPais]);

$ciudades = $consulta_ciudades->fetchAll(PDO::FETCH_ASSOC);


// Devolver las ciudades como un array JSON

echo json_encode($ciudades);




jose fernandez

hazme el <select id="pais" name="pais"> que cargue con fetch 

Claro, aquí te proporciono un ejemplo de cómo cargar un select con Fetch API y JSON utilizando el siguiente código JavaScript:


javascript

Copy code

const paisSelect = document.getElementById('pais');


// Obtener la lista de países mediante una petición Fetch

fetch('ruta_a_tu_archivo.php')

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

  .then(data => {

    // Agregar las opciones al select de países

    paisSelect.innerHTML = '<option value="">Selecciona un país</option>' + data.map(pais => `<option value="${pais.id_pais}">${pais.nombre_pais}</option>`).join('');

  })

  .catch(error => {

    console.error('Error:', error);

  });

En este ejemplo, asumimos que tienes un archivo PHP que devuelve la lista de países en formato JSON. El archivo PHP podría ser algo como esto:


php

Copy code

// Conexión a la base de datos

$conexion = new PDO("mysql:host=nombre_servidor;dbname=nombre_base_de_datos", "nombre_usuario", "contraseña_usuario");


// Consulta para obtener todos los países

$consulta_paises = $conexion->query("SELECT * FROM paises");


// Obtener los resultados como un array asociativo

$paises = $consulta_paises->fetchAll(PDO::FETCH_ASSOC);


// Devolver los países como un array JSON

echo json_encode($paises);

En este caso, el archivo PHP realiza una consulta a una tabla de países en una base de datos MySQL y devuelve los resultados como un array JSON. Este archivo deberá ser adaptado a tu base de datos y tabla de países en particular.





jose fernandez

hazme el archivo .sql de este ej

Para crear las tablas necesarias para el ejemplo de dos select combos dependientes, puedes utilizar el siguiente archivo .sql:


sql

Copy code

-- Crear tabla de países

CREATE TABLE paises (

  id_pais INT PRIMARY KEY,

  nombre_pais VARCHAR(50)

);


-- Insertar algunos datos de ejemplo

INSERT INTO paises (id_pais, nombre_pais) VALUES

(1, 'México'),

(2, 'Estados Unidos'),

(3, 'Canadá');


-- Crear tabla de ciudades

CREATE TABLE ciudades (

  id_ciudad INT PRIMARY KEY,

  nombre_ciudad VARCHAR(50),

  id_pais INT,

  FOREIGN KEY (id_pais) REFERENCES paises(id_pais)

);


-- Insertar algunos datos de ejemplo

INSERT INTO ciudades (id_ciudad, nombre_ciudad, id_pais) VALUES

(1, 'Ciudad de México', 1),

(2, 'Guadalajara', 1),

(3, 'Monterrey', 1),

(4, 'Nueva York', 2),

(5, 'Los Ángeles', 2),

(6, 'Chicago', 2),

(7, 'Toronto', 3),

(8, 'Montreal', 3),

(9, 'Vancouver', 3);

Este archivo crea dos tablas, paises y ciudades, y las relaciona mediante una clave foránea (id_pais en la tabla ciudades hace referencia a id_pais en la tabla paises). También inserta algunos datos de ejemplo en ambas tablas.


Debes ejecutar este archivo .sql en tu servidor de base de datos MySQL para crear las tablas y los datos de ejemplo. Ten en cuenta que debes cambiar los detalles de conexión en tu archivo PHP para que coincida con tu servidor de base de datos.

Comentarios

Publicar un comentario

Entradas populares de este blog

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

INSERTAR Y UPDATE FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE

COMO INSERTAR FECHA CON PHP MYSQL EN FORMULARIO METODO POST CON JQUERY ETIQUETA DATE ChatGPT Para insertar una fecha con PHP y MySQL en un formulario usando el método POST con jQuery y la etiqueta date, puedes seguir estos pasos. Asumiré que estás utilizando un formulario HTML con un campo de fecha: Crear el formulario 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>Formulario de Fecha</title>     <!-- Agregar jQuery -->     <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script> </head> <body>     <form id="miFormulario">         <label for="fecha">Fecha:</label>         <input type="date" id="fecha" name="fecha" required>         <but...
Leer más

DETECTAR DIRECCION IP CON PHP Y JS

  Para detectar la IP real del visitante de una página web, puedes hacerlo tanto con PHP como con JavaScript, aunque PHP es más confiable ya que JavaScript ejecuta en el lado del cliente y puede ser manipulado. 1. Detectar la IP con PHP PHP es la mejor opción para obtener la IP, ya que corre en el servidor y no depende del navegador. Sin embargo, la IP obtenida puede estar detrás de un proxy, así que se pueden usar varios encabezados HTTP. php function obtenerIP() {     if (!empty($_SERVER['HTTP_CLIENT_IP'])) {         // IP desde el compartido de Internet         return $_SERVER['HTTP_CLIENT_IP'];     } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {         // IP detrás de un proxy         return $_SERVER['HTTP_X_FORWARDED_FOR'];     } else {         // IP real del usuario         return $_SERVER['REMOTE_ADDR'];     } ...
Leer más