Jump to content
Dr_Lion

GET Node.js

Recommended Posts

Dr_Lion

Boas,

a minha experiência com javascript/ajax não é muita, mas decidi iniciar-me em node.js para desenvolver as minhas capacidades. O que pretendo fazer é um "site simples" para registar as horas semanais que passo em determinados hobbies e o custo dos mesmos, e com a possibilidade de funcionar para vários utilizadores.

Estou a usar node.js com jquery e ajax, fiz o require do express, entre outros. Base de dados mysql. Neste momento estou a desenvolver em Windows. Tenho um template para a coisa ficar mais bonita, mas para já ainda estou a tentar perceber melhor como funciona a comunicação cliente-servidor.

Neste momento usando o router.post no ficheiro exemplo.js consigo trocar dados entre a página test.ejs (cliente) e o exemplo.js (servidor) e representá-los no .ejs, no entanto para fazer isto uso um router.POST, do lado do servidor, e do lado do cliente (.ejs) da seguinte forma. 

$(document).ready(function() {
...
 $('#form_id').on('submit', function(e){
...
  $.ajax({

O meu problema é que desta forma, usando o POST, preciso de carregar num botão para enviar e receber dados!

Concretizando, para os testes/aprendizagem estou a usar a tabela utilizadores da bd mysql, que tem 2 utilizadores! Isto funciona tal como disse acima!

A minha ideia era por exemplo ao entrar na página ao invés de ter que carregar num botão para mostrar os utilizadores da bd, eles serem mostrados de forma automática! Imagino que isto se faça com o método GET, mas o que é facto é que não consigo receber a variável passada pelo servidor do lado do cliente!

 

Ficheiro exemplo.js

app.get(PROJECT_NAME + '/test4', function(req, res){
    var varenviar="Bananas";

    db.query('SELECT uname, level, email FROM user;', (err,rows) => {
        if(err) throw err;

        console.log('Data received from Db:');
        //varenviar = rows;
        console.log('var server: ', varenviar);
         
        res.render('test4.ejs', {data:data, varenviar:varenviar});    
    });
});


 

Ficheiro test4.ejs

...
<body>
<p> <%= varenviar[0].uname %></p>

<label id="print2"></label>
</body>
...
  
<script type="text/javascript">

    var url = '<%= data["project_name"] %>/test4';
    var varenviar2;
    $.ajax({
        url: url,
        type: 'GET',
        data: {varenviar: varenviar2},

        success: function(success){
          var varenviar = varenviar;
          console.log(varenviar);
          console.log(success.varenviar);
          document.getElementById("print2").innerHTML =success.varenviar;
        }
    });
        
</script>

Ora bem, como é óbvio este código js não funciona, porque foi criado por mim meio á martelada do que eu tinha no post, e acredito que não funcione assim nem tenha nada haver. Tal como disse devido à falta experiência gostava que me indicassem a forma correta de o fazer se fosse possível.

De notar que no código HTML, logo na segunda linha <p> desta forma consigo receber a variável passada pelo servidor, mas esta é passada de forma direta, e no caso de eu querer efetuar alguma transformação/processamento com js ou ajax e depois mostrar no HTML, que era o que estava a tentar fazer com a linha seguinte <label> mas que não estou a ter sucesso; tanto na label como no console.log o que me aparece é: undefined!

 

Peço desculpa se a forma como me refiro ou algum termo em concreto não é o mais correto.

Share this post


Link to post
Share on other sites
KTachyon

A ideia é que tens que ter um endpoint que te devolva dados em vez de fazer o render de um template. Aquilo que tu queres é:
 

res.send(JSON.stringify({ varenviar : varenviar }))


E, depois, no pedido ajax, podes adicionar o dataType:
 

dataType: "json",



Se queres ter rendering de templates e endpoints para devolver dados, deves tentar separar. Podes, por exemplo, colocar tudo o que é endpoints de dados num path tipo /api/

 

 

Quote

 


“There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.”

-- Tony Hoare

Share this post


Link to post
Share on other sites
Dr_Lion

Assumindo um exemplo simples, tenho várias tabelas na base de dados. Quero quando abro o url, que a página me mostre os valores de alguns campos dessa tabela.

Consigo fazê-lo no HTML com o seguinte código (passando a variável "user " no res.render no ficheiro js:

<td><%= user[i].uname %></td>
<td><%= user[i].email %></td>

 

No entanto isto é embutido direto no HTML, e eu queria passar por ajax ou jquery não sei bem, porque a ideia era mostrar  uma dropdown com o nome dos utilizadores (e o id no campo value) logo quando abro a página, para depois poder inserir valores noutra tabela com o método POST, mas indo buscar o "id" de  um utilizador que já existe na bd e não um value estático inserido por mim.

Falas num endpoint que associas ao res.send, posso ter um res.send num método GET, juntamente com um res.render? estes não são mutuamente exclusivos? Como disse estou muito verde nisto, já consegui acertar com o ajax do pedido POST, pois encontrei alguns exemplos na net e funcionou, mas não encontro nenhum pedido GET que consiga colocar a funcionar, já tentei fazer á semelhança do POST, mas alterando para GET e experimentando trocar muitas coisitas, mas não consegui obter resultados.

Usando o POST implica carregar num botão certo? pois com o POST eu consigo inserir um objeto na bd e de seguida mostrar todo os objetos dessa tabela, mas passados pelo método POST de novo. A minha ideia era usar o POST apenas para enviar os dados para o servidor, e de seguida fazer um redirect ou um refresh à página que imagino eu provocaria um GET, e esse GET iria mostrar os valores da tabela sem ser necessário carregar num botão.

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.