0

Preciso fazer algumas alterações em uma página web.

Estou criando um formulário em HTML com JavaScript e preciso de ajuda no seguinte caso:

Meu formulário possui um campo onde o usuário digita o ID de um contest do SPOJ-WWW, depois de digitado o ID a página deve fazer um get de alguns dados do contest que está no SPOJ para completar outros campos do meu formulário.

Por exemplo, o usuário digita o ID de algum problema e a página automaticamente identifica qual é o problema e completa os campos, título, descrição, objetivos, etc.

Existe alguma função no JavaScript que faça isso de alguma forma, tipo dando get do conteúdo?

1
  • Se estiver aberto para usar Jquery, ajax pode ajudar 19/04/2018 às 16:24

2 Respostas 2

0

Fazendo uma requisição GET utilizando javascript puro:

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "ajax_info.txt", true);
  xhttp.send();

Exemplo retirado de W3schools

Ainda pode utilizar a função fetch como mencionado pela resposta de Caio Saldanha.


Fazendo uma requisição com a biblioteca jQuery:

$.get( "ajax/test.html", function( data ) {
  $( ".result" ).html( data );
  alert( "Load was performed." );
});

Exemplo retirado da documentação do jQuery

0

Não sei se eu entendi bem, pois não sei o que é SPOJ rsrsrs.... Porém acredito que o que você queira pode ser feito da seguinte maneira:

1 - Implemente uma função para manipular o preenchimento do ID. Essa função vai disparar quando o evento "onfocusout" acontecer no input.

2 - Ao disparar, a função faz um "fetch" para o endpoint que serve o conteúdo que você quer.

3 - Você pega o Response do GET Request realizado (pelo fetch()) e então coloca as informações recebidas nos campos que decidir.

handleIdSearch(event){
 let valor = event.target.value;
 fetch("http://urlDaApi.com.br?idProduto="+valor).then( function(resposta){
      // Veio um objeto do tipo Response, precisamos transformá-lo em JSON
      // Response.json() retorna outra Promise
      return resposta.json();
   }).then( function(json){
      // Pegue os valores do JSON
      document.getElementById("outroInput").value = json.valorOutroInput;
   }).catch( function(error){
      throw error;
   });
}

document.getElementById("campoIdProduto").addEventListener('focusout', 
// Callback do evento
function(event){
    handleIdSearch(event);
})

Voi lá!

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 .