Dúvida sobre Javascript e ajax

Front-end JavaScript
#1

Estou criando uma página de buscas que pega os dados do banco de dados e faz a listagem. Gostaria de implementar um evento de click em cada item que eu listar no qual ao clicar, eu possa pegar os dados desse item e exibir no final da página sem recarregá-la. Como eu faço isso?

#2

ta aí o exemplo de uma função ajax…
agora para buscar os dados no banco de dados, vc vai precisar de um back end que acesse o banco, vc não vai ter acesso direto ao banco, usando javascript, então quando você fizer a listagem, você adiciona em cada elemento elemento numa lista ou algo da sua vontade então no final quando você coloca no campo name do elemento no DOM o id ou o valor, de referência desse elemento, pra que vc possa passar esse parâmetro na sua pesquisa…

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

segue o lugar de onde tirei o código…
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp

#3

Acho que entendi mais ou menos como funciona, menos o “demo_get.asp” em " xhttp.open(“GET”, “demo_get.asp”, true);". É nessa parte que ficam os dados que eu preciso para atualizar os dados da página né? Mas o que eu colocaria nesse arquivo?

#4

vamos tentar explicitar mais:

a function abaixo é uma função de callback, quando a minha requisição para algum backend (JAVA, .NET, Node, PHP etc) for feita e executada com sucesso, ele vai retornar dentro do xhttp.responseText os dados que você queria, nesse caso ele insere no elemento demo essa resposta, esse elemento demo é uma div do html…

xhttp.onreadystatechange = function() {
    if (xhttp.readyState == 4 && xhttp.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
    }
  };

o demo_get.asp, é o endereço onde ele vai buscar a resposta no seu caso você referenciaria a action da sua aplicação que faz acesso ao banco e retorna dados pra você, lembrando mais uma vez, você nao vai conseguir fazer isso só com front end. vai precisar de um servidor, pra acessar o banco de dados (JAVA, PHP,C#, Node ,Python)…

procure por tutoriais de “CRUD usando ajax”, grandes chances de você achar algo que te ajude!!

#5

@Marcosvbras, usa a função .ajax() ou .post() do Jquery, muito mais fácil de implementar.
Também tem outras especificas, como .getJson só para retornos json.

Lê aqui -> http://jquerybrasil.org/ajax-com-jquery-metodo-ajax/

#6

Muito obrigado, graça à sua ajuda eu estou quase lá! Em onreadystatechange eu coloquei os 4 elementos que quero atualizar e em xhttp.open eu coloquei o arquivo que faz a busca no banco. Mas como eu faço para retornar esses valores? não estou conseguindo…