2

Tengo que cargar las provincias, están en un fichero .sql que cargo en el phpmyadmin, en un select dentro de un formulario.

El formulario tiene un select son la siguiente información:

<tr>
    <td align=right>Provincia:</td><td align=left colspan=3>
        <select name="provincia" id="idprovincia">
            <option value="-">Seleccione una Provincia...
        </select>
    </td>
</tr>

¿Cómo cargo mediante AJAX las provincias en el select?

He intentado lo siguiente pero me da el siguiente error, aunque creo que el código no es correcto:

jquery.js:18 XMLHttpRequest cannot load file:///D:/Javascript/OSMAR/provincias_exam.php. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Código intentado Javascript:

//Al cargar el documento...
$(document).ready(function(){
    iniciar();
    //Método 1.
    // $.ajax({
        // type: "GET",
        // url: "provincias_exam.php",
        // success: function (response){
            // $("#idprovincia").html(response).fadeIn();
        // }
    // });

    //Método 2.
    //$("#idprovincia").load("provincias_exam.php");
});//fin ready 


//Método 3.
var arrayProvincias = []; //array de objetos donde almacenaremos los datos de la consulta.
function iniciar(){
    $.ajax({
        url: 'provincias_exam.php',
        dataType: 'json',
        async: true,  //Asíncrono
        success: resultadoPeticion, 
        error: function(){
            alert("Error en la petición a la base de datos");
        }
    });    
}


//Llamamos a la función para imprimir resultados.
function resultadoPeticion(resultados){ 
    var texto = "";
    //Recorremos los valores con un for each.
    $.each(resultados, function(indice, valor){
        texto += valor.nom_prov;
        arrayProvincias[arrayProvincias.length] = valor;
    });         
    //Agregamos en el id "idprovincia" el valor que tenga la variable texto. (todas las provincias).
    $("#idprovincia").html(texto);
    //Imprimimos todas las provincias en el select.
    rellenarSelect();
}


//Rellenamos el select con las provincias.
function rellenarSelect(){
    var imprimir = "";
    for (var i=0; i<arrayProvincias.length; i++){
        imprimir += "<option value='"+i+"'>"+arrayProvincias[i].nom_prov+"</option>";
    }
    $("#idprovincia").html(imprimir);
}

Archivo necesarios externos para la carga de las provincias:

ComunidadesProvincias.sql tabla comunidades

  id_com | nom_com
    1    | 'Euskadi'
    2    |'Galicia'
    3    |'Catalunya'
    4    |'Andalucia'
    5    | 'Castilla Leon'
    6    | 'Castilla La MAncha'

la tabla provincias

id_prov`| `id_com`| `nom_prov`
    1   |        1| 'Bizkaia'
    2   |        1| 'Gipuzkoa'
    3   |        1| 'Araba'
    4   |        2| 'A Coruña'
    5   |        2| 'Lugo'
    6   |        2| 'Ourense'
    7   |        2| 'Pontevdra'
    8   |        3| 'Barcelona'
    9   |        3| 'Tarragona'
    10  |        3| 'Lleida'
    11  |        3| 'Girona'
    12  |        4| 'Almeria'
    13  |        4| 'Cadiz'
    14  |        4| 'Cordoba'
    15  |        4| 'Granada'
    16  |        4| 'Huelva'

conexion2.php:

<?

$dbserver = "nombre_servidor";
$dbuser = "usuario";
$password = "clave";
$dbname = "nombre_base_datos";


$con = new mysqli($dbserver, $dbuser, $password,$dbname);
if(!$con) {
    echo "No se pudo conectar a la base de datos";
  }

?>

provincias_exam.php:

<?php
    include("conexion_2.php");


if(!$con) {
    echo "No se pudo conectar a la base de datos";
  }


$sql = "SELECT * FROM provincias";
$result = $con->query($sql);

$rowdata=array();
$i=0;
        while ($row = $result->fetch_array())
        {
            $rowdata[$i]=$row;
            $i++;           
        }
echo json_encode($rowdata);
?>
7
  • ¿Estás devolviendo las provincias como JSON? Si es así solo necesitas recorrerlas y en cada iteración crear un option que representará a la provincia actual.
    – gugadev
    Commented el 5 jun. 2017 a las 13:52
  • Ese error es normalmente porque no encontró el archivo para cargar, te aseguraste que esta sea la ruta correcta de tu archivo? ///D:/Javascript/OSMAR/provincias_exam.php
    – Yikarus
    Commented el 5 jun. 2017 a las 13:59
  • Sí es la ruta correcta debido a que estoy en la misma ruta, tengo la misma ruta para el archivo .js, como para el archivo .html como para el archivo .php y .sql
    – omaza1990
    Commented el 5 jun. 2017 a las 14:02
  • 1
    La ruta es "rara" Una pregunta curiosa, está ejecutando php desde un servidor apache? Donde están los archivos de su aplicación? Si es así verificar sus rutas, pareciera que no lo están por eso no se puede ejecutar el archivo php
    – Dev. Joel
    Commented el 5 jun. 2017 a las 14:06
  • Cierto. Lo estaba haciendo desde el local jajaja, ya lo agregé al localhost con xampp, no me da error de ruta pero no funciona.
    – omaza1990
    Commented el 5 jun. 2017 a las 14:14

2 respuestas 2

2

Prueba con esto.

Lo he puesto todo en una sola función, porque crear funciones que sólo se llaman una vez creo que no hace falta.

function iniciar(){
    $.ajax({
        url: 'provincias_exam.php',
        dataType: 'json',
        error: function(){
            alert("Error en la petición a la base de datos");
        }
    }).done( function(valor) {
       var texto = "";
       //Recorremos los valores con un for each.
       $.each(function(i, valor){
           texto += "<option value='"+i+"'>"+valor+"</option>";
       });         
       //Agregamos en el id "idprovincia" el valor que tenga la variable texto. (todas las provincias).
       $("#idprovincia").html(texto);
    });    
}
7
  • Con este código me aparece en pantalla el mensaje de error: " alert("Error en la petición a la base de datos");" pero en la consola no me da errores ninguno. No me carga las provincias en el select.
    – omaza1990
    Commented el 5 jun. 2017 a las 15:01
  • No sé revisar el network, ¿cómo se realiza?
    – omaza1990
    Commented el 5 jun. 2017 a las 15:27
  • En el navegador presiona la tecla F12 una vez dentro selecciona la pestaña Network imgur.com/a/vtZIx y ahí debe mostrar la llamada al archivo php Así imgur.com/a/gXkXH , y luego das click ahí y debe mostrar Un menú así imgur.com/a/6rAsN , debes ir a response y ver que te está devolviendo el servidor.
    – Dev. Joel
    Commented el 5 jun. 2017 a las 15:55
  • No me muestra ninguna llamada al fichero .php... Creo que ahí está el error. ¿Chat?
    – omaza1990
    Commented el 6 jun. 2017 a las 9:13
  • Revisa también el log del Apache, tanto el access.log como el error.log por si tuvieras algún tipo de error en el código, o en la llamada al fichero php desde el Ajax. ¿Que utilizabas Xampp,Wampp, ...?
    – NetVicious
    Commented el 6 jun. 2017 a las 9:57
2

Ésta sería la solución a tu consulta. Sin embargo toma en cuenta las lineas comentadas. Tal vez te ayuden a encontrar y entender mejor el error en tu código. Saludos.

function obtenerProvincias() {
        $.ajax({
            url: 'provincias_exam.php', //Si el doc php esta en mismo nivel seria directo. Caso contrario si el archivos php esta en una carpeta abría que mapearla bien. Ejemplo: url:'php/provincias_Exam.php'
            type: 'post',
            success: function (r) { // te recomiendo que imprimas las respuesta "console.log(r)" para que veas como te esta devolviendo la estructura tu php.
                $("#idprovincia").empty();
                r = JSON.parse(r);
                sedeItem = crearElemento('option', '__', '__', 'Seleccione...', '__', '__');
                sedeItem.setAttribute('value', '');
                $("#idprovincia").append(sedeItem);
                for (i = 0; i < r.length; i++) {
                    option = crearElemento('option', '__', '__', r[i]['id_prov'], '__', r[i]['nom_prov']);
                    $("#idprovincia").append(option);
                }
            }
        });
    }
    function crearElemento(elemento, identificador, clase, texto, ruta, valor) {
        item = document.createElement(elemento);
        if (identificador !=='__'){ item.id = identificador; }
        if (clase !=='__') { item.className = clase; }
        if (texto !=='__') { item.innerText = texto; }
        if (ruta !== '__') { item.dataset.cargarVista = ruta; }
        if (valor !== '__') { item.value = valor; }
        return item;
    }
5
  • No me da ningún error pero tampoco me muestra nada en el console.log(r)... qué extraño, Despliego el "select" y no aparece nada.
    – omaza1990
    Commented el 5 jun. 2017 a las 21:35
  • Puedes subir un pantallazo de tu resultado? Es que quiero ver que te sale en la consola cuando te responde el ajax. Puede ser que no este llegando tu petición al doc php. Tienes algún modo de hacer debug a tu php? Commented el 5 jun. 2017 a las 21:55
  • Sí, desde network pero parece que no coge el fichero .php, la ruta es la misma donde está el archivo .html, así que es muy extraño.
    – omaza1990
    Commented el 6 jun. 2017 a las 11:03
  • ¿no tengo más ayuda?
    – omaza1990
    Commented el 7 jun. 2017 a las 17:09
  • Puedo crear una estructura de prueba y te lo paso. 😁 Commented el 7 jun. 2017 a las 17:45

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.