Populando Select com Ajax

[Julio Cavallari 3]

Boa tarde pessoal, estou precisando popular seletcs com Ajax, mas sempre que faço alguma busca do Google relacionado a isso me retornam ou select dinâmicos, ou com evento onclick para popular o select, mas eu precisaria que a função fosse ativada assim que a página fosse carregada.

Alguém consegue me ajudar com essa função? Não entendo nada de Ajax, cai de paraquedas, pq estou usando o XDK pra fazer um APP pra android, mas o php tem que estar num servidor, e não direto no código, caso contrário o XDK não compila o app.

Se ajudo, eu precisaria que o Ajax se comunicasse com o PHP e retornasse isso daqui:

Espécie do Animal

<?php $query_especie = mysql_query("SELECT * FROM especie");?>

<select name="especie" class="form-control">

<option value="">Escolha</option>

<?php while($especie = mysql_fetch_array($query_especie))

{

echo"<option value=".$especie['id_especie'].">".$especie['especie']."</option>";

}?>

</select>

[William Bruno 1501]

É a mesma coisa dos tutoriais que você viu, só troque o evento de change ou click para document.ready.

tente implementar e poste a sua tentativa.

[Julio Cavallari 3]

Testei com isso, mas não me retornou nenhum dado

$(documento).ready(function(e){

$.getJSON('php/consultas.php?opcao=especies', function (dados){

var option = '<option>Selecione a espécie</option>';

$.each(dados({

option += '<option value="'+id_especie+'">'+especie+'</option>';

})$('#cmbespecie').html(option).show();

});

});

$sql = 'SELECT id_especie, especie FROM especie';

$especies = mysqli_query('SELECT id_especie, especie FROM especie');

$object_especie = mysqli_fetch_array($especie);

sleep(1);

echo json_encode($object_especie);

index.js:34 Uncaught SyntaxError: Unexpected token +=

[William Bruno 1501]

troca para:

$(document).ready(function(e){
    $.getJSON('php/consultas.php?opcao=especies', function (dados){
        
     var option = '<option>Selecione a espécie</option>';
         $.each(dados, function(item){
             option += '<option value="' + item.id_especie + '">' + item.especie + '</option>';
         })
         $('#cmbespecie').html(option).show();
    });
});

e veja também se o JSON vem correto na aba Rede (network) no console (Ctrl + Shift + J)

[Julio Cavallari 3]

Na aba Rede não tem nenhuma menção ao arquivo consultas.php que retorna o JSON, eu já arrumei o código php que estava com erro, e se eu executo somente ele, a função em retorna os dados do banco

[Julio Cavallari 3]

Tem alguma maneira de fazer isso sem JSON? porque estou tendo uma certa dificuldade nesse ponto, quando executo o arquivo php separado e dou um:

echo json_encode($object_especie);

Ele me mostra os valores do banco, mas quando executo a página HTML é como se a função AJAX não puxasse nenhum dado, pois não popula o SELECT

[William Bruno 1501]

coloca esse header antes do echo no teu php:

header('Content-Type: text/html; charset=utf-8');

para o php dizer que tá mandando um JSON.

Existe como fazer sem JSON, que seria o php já devolver o HTML com os options, mas não é muito legal..

[Julio Cavallari 3]

Agora ele me retornou, mas com valores undefined, e não com os dados do banco

[William Bruno 1501]

então você tá com problema de charset (acentos), por isso o json não funciona.

o teu banco, o arquivo, os headers.. enfim, tudo deve ser utf-8

[Julio Cavallari 3]

Tudo está utf-8, banco, html, php. Acabei de conferir

[William Bruno 1501]

tem algum erro entre o php e o utf-8.. se não apareceriam os dados..

[Julio Cavallari 3]

Como eu montaria a função pra receber o html pronto do php? Só pra eu testar se funciona dessa maneira

[William Bruno 1501]

$(document).ready(function(e){

$.get('php/consultas.php?opcao=especies', function (html){

$('#cmbespecie').html(html).show();

});

});

[Julio Cavallari 3]

Dessa maneira funcionou perfeitamente, eu consigo desse mesmo modo eu consigo adicionar qualquer código html gerado no php?

Sei que não é a melhor forma, vou ver porque por JSON nãoi está indo, e por enquanto vou usando assim mesmo.

Valeu pela paciência.

[William Bruno 1501]

yep, consegue adicionar qualquer coisa.