2

Preciso completar um formulário, de acordo com a demanda do usuário, com informações do Banco de Dados (MySql).

Exemplo:
Tenho os campos "Instituição", "Curso" e "Período". Para o usuário, primeiramente, aparecerá apenas a opção "Instituição", assim que ele selecionar a instituição desejada aparecerá no campo de baixo as opções de curso e ele terá visível os campos "Instituição" e "Curso", assim que ele selecionar o curso desejado aparecerá no campo de baixo as opções de período e ele terá visível os campos "Instituição", "Curso" e "Período".

Tentativa:
Usei o seguinte script para fazer as requisições Ajax:

    function consulta(){
        var xmlreq = CriaRequest();
        var result  = document.getElementById("instituicao");;
        xmlreq.open("GET", 'curso.php', true);
        xmlreq.onreadystatechange = function(){
        (readyState=4)
        if (xmlreq.readyState == 4){
            if (xmlreq.status == 200){
                result.innerHTML = xmlreq.responseText;
                }else{
                    result.innerHTML = "Erro: " + xmlreq.statusText;
                }
            }
        };
        xmlreq.send(null);
}

Porém não obtive o resultado desejado pois eu teria que fazer um script como esse para cada demanda.

Pergunta:
Existe alguma forma de eu usar APENAS UM SCRIPT para as três ações?

2 Respostas 2

2

Adicionei alguns parâmetros na sua função, de forma que a parte de código que se repetirá será menor.

function consulta(url, resultId){
    var xmlreq = CriaRequest();
    var result = document.getElementById(resultId);
    xmlreq.open("GET", url, true);
    xmlreq.onreadystatechange = function(){
        (readyState=4)
        if (xmlreq.readyState == 4){
            if (xmlreq.status == 200){
                result.innerHTML = xmlreq.responseText;
            } else {
                result.innerHTML = "Erro: " + xmlreq.statusText;
            }
        }
    };
    xmlreq.send(null);
}

Chame a função assim: consulta('curso.php', 'instituicao') e consulta('periodo.php', 'curso')

2

Existe, geralmente eu faço assim:

function ajax(url, params, complete) {
   var xhr = CriaRequest(); // Não sei oq isso faz, estou seguindo seu padrão
   xhr.open("GET", url, true);
   xhr.onreadystatechange = function(){
       if (xmlreq.status == 200 && xmlreq.readyState == 4){
            complete(xhr.responseText);
       }
    }
  xhr.send(JSON.stringify(params));
}

O que o método ajax recebe:

  • URL: É a url que deve receber a requisição
  • Params: Um objeto com todos os atributos que devem ser enviados para o servidor
  • Complete: Callback responsável por fazer alguma coisa com o retorno.

Assim você pode enviar o que quiser para o servidor e tratar o retorno da maneira que lhe for mais conveniente:

Vamos supor que você tenha um select assim:

<select id='uf' onchange='carregarCidades(this.value)'>
   <option value='1'>ES</option>
   <option value='2'>RJ</option>
   <option value='3'>SP</option>
   <option value='4'>MG</option>
</select>

A função carregarCidades seria escrita assim:

function carregarCidades(uf){
    var parametros = new Object(); // ou `Object.create`, tanto faz
    parametros.uf = uf; // Aqui eu crio um atributo uf que será enviado para o servidor
    ajax('url-do-seu-serviço', parametros, function(results){
        var result = document.getElementById("resultId");
        result.innerHTML = results;
    });
}

Note que eu criei uma função anônima e passei como callback. Inso é bastante utilizado no JS. Uma forma alternativa e mais legivel seria fazer assim:

function printCidades(cidades){
    var result = document.getElementById("selectCidades");
    result.innerHTML = results;
}

function carregarCidades(uf){
    var parametros = new Object(); // ou `Object.create`, tanto faz
    parametros.uf = uf; // Aqui eu crio um atributo uf que será enviado para o servidor
    ajax('url-do-seu-serviço', parametros, printCidades);
}

O que é importante é definir que tipo de dado seu servidor está esperando. Da forma que fiz ele recebe um objeto JSON com um atributo, no caso, uf.

Outra coisa importante é o retorno. Seria legal se fosse JSON também.

3
  • Não entendi muito bem seu exemplo, me desculpe mas sou iniciante ainda. Poderia, por favor, me dar algum exemplo prático.
    – Odair
    Commented 15/06/2015 às 18:12
  • 1
    Veja se o edit ajuda. Commented 15/06/2015 às 18:27
  • @EdgarMunizBerlinck e após o usuário selecionar como pode ser enviado esses dados selecionado para o mysql . Fica o meu caso tem como vê pt.stackoverflow.com/questions/181981/… Commented 3/02/2017 às 22:43

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .