(Resolvido) Armazenar dados

[alexandremanowar]

E ae pessoal beleza!

Estou estudando ajax com a ajuda do pessoa do fórum aqui e eu gostaria de saber se alguém conhece um tutorial de como usar ajax para armazenar dados usando php como serve side!

A idéia é que ao clicar no botão armazenar ele armazene e já exiba os dados armazenados sem dar reflesh, ou seja na verdade é um armazenamento e consulta ao mesmo tempo.

Alguém pode me explicar me dando um exemplo ou me passar um tutorial para estudar? Obrigado

[KaKarotto]

Oi Alexandre.

Cara, como você já sabe, o ajax é só um objeto para fazer as requisições sem precisar recarregar a página novamente, grosseiramente falando. Então o ajax vai funcionar exatamente igual as chamadas de página que você faz sem, através de strings, pelo método post ou pelo método get.

Quando você usa um formulário, mandando seus dados o php vai armazenar no Banco de Dados e caso desejar, retornar um html dizendo se foi bem sucedida ou não. Se usar ajax, apenas precisa construir o php que vai pegar os dados por get ou por post, armazenar os dados e se desejar, retornar um objeto de valor booleano, "true" ou "false", caso tenha conseguido gravar no banco ou não. O javascript vai pegar esse valor e vai mostrar alguma mensagem na tela. Só isso.

Olha só:

BD.php

<?
$nome=$_POST["nome"];
if(GravaNoBD($nome))
echo "{'gravou':'true'}";
else
echo "{'gravou':'false'}";
?>

Js.js

ajax.open("POST", "http://meusite", false)
ajax.send("nome=Edu")
....

ajax.onreadystatechange=function(){
if(ajax.readyState==4)
var resposta=eval(ajax.responseText)
if(resposta.gravou=="true")
alert("AEEEW gravou")
else
alert("Xi....num deu...")
}

......

Eu pulei um monte de coisa, em php e em js, mas é só pra mostrar a parte essencial que imagino que seja sua dúvida.

O ajax funciona exatamente igual ao modo não ajax. Você só precisa ter em mente que a resposta vai chegar ao objeto ajax do js e não numa nova página. Você pode devolver pro objeto qualquer coisa.

Era essa sua dúvida?

[alexandremanowar]

E ae beleza

Carinha é como você disse a lógia é a mesma, fiz aqui e esta armazenando legal!

Porém estou com um dúvida não sei se é possível eu fiz um código que ao clicar em um link ele busca os dados no banco e exibe em campos de input e cada linha coloco um botão ao clicar no botão ele altera no banco os dados daquela linha e exibe na tela atualizado, usei as idéias de como trabalhar com o ajax que você me passou então quando clico no botão para alterar ele limpa o conteúdo da div onde esta os dados e faz uma nova busca no banco e enche a div novamente, ficou legal, porém ele volta a me exibir o formulário na linha que foi alterado e eu gostaria que na linha que foi alterado ele me exiba apenas os dados impresso na tela fora dos campos de input, quando é feita a alteração tenho um campo no banco com o nome alterado que fica como sim caso seja alterado, acredito que posso usar isso na hora que a div é atualizada para exibir os dados! É possível fazer isso?

Olha como esta o meu código:

Esse código é que exibe os dados com o form quando a página é carregada inicialmente, ele carrega os dados e em cada linha deixa o botão alterar:
 function loadContas(codigoCentro,codigoCentralizadora,codigoConta)
 {
    
    if(ajax) 
    {
        
        var SubContasHTML = document.getElementById('DivConta_'+codigoConta+'_'+codigoCentro);

     
    ajax.open("POST", "consulta_subconta.php", true);
    ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
         
    ajax.onreadystatechange = function() 
    {
     
                
        if(ajax.readyState == 4 ) 
        {
            if(ajax.responseXML) 
            {
                ContasXML(ajax.responseXML,codigoCentro,codigoCentralizadora,codigoConta);
            }
            
        }
    }
         
        var params = "codigoCentro="+codigoCentro+"&codigoCentralizadora="+codigoCentralizadora+"&codigoConta="+codigoConta;
        ajax.send(params);
         
        
    }
 }

 function ContasXML(obj,codigoCentro,codigoCentralizadora,codigoConta)
{

    
    var dataArray   = obj.getElementsByTagName("SubContas");
    var SubContasHTML = document.getElementById('DivConta_'+codigoConta+'_'+codigoCentro);
    var SubContaDescricao = "<table border=1><tr><td>subconta</td><td>cr�dito</td><td>data</td><td>d�bito</td><td>data</td><td>cr�dito</td><td>data</td><td>d�bito</td><td>data</td></tr>";

    var DescricaoSubConta="";
    var ValorCredito = "";
    var DataCredito = "";
    var ValorDebito = "";
    var DataDebito = "";
    var ContadorFinanca = "";
    
    switch(SubContasHTML.style.display)
    {
        case "": SubContasHTML.style.display="block"; document.getElementById('SpanConta_'+codigoConta+'_'+codigoCentro).innerHTML= "[-]"; break
        case "none": SubContasHTML.style.display="block";  document.getElementById('SpanConta_'+codigoConta+'_'+codigoCentro).innerHTML= "[-]"; break
        case "block": SubContasHTML.style.display="none";  document.getElementById('SpanConta_'+codigoConta+'_'+codigoCentro).innerHTML= "[+]"; break
    }
      
    if(dataArray.length > 0) 
    {
         
         for(var i = 0; i < dataArray.length; i++) 
         {
            var item = dataArray[i];
            //SubContaDescricao  = SubContaDescricao +'<tr><td>'+item.getElementsByTagName("descricao")[0].firstChild.nodeValue + '</td><td>' + item.getElementsByTagName("ValorCredito")[0].firstChild.nodeValue + '</td><td>' + item.getElementsByTagName("DataCredito")[0].firstChild.nodeValue + '</td><td>' + item.getElementsByTagName("ValorDebito")[0].firstChild.nodeValue + '</td><td>' + item.getElementsByTagName("DataDebito")[0].firstChild.nodeValue + '</td></tr>';
            DescricaoSubConta = item.getElementsByTagName("descricao")[0].firstChild.nodeValue;
            ValorCredito = item.getElementsByTagName("ValorCredito")[0].firstChild.nodeValue;
            DataCredito = item.getElementsByTagName("DataCredito")[0].firstChild.nodeValue;
            ValorDebito = item.getElementsByTagName("ValorDebito")[0].firstChild.nodeValue;
            DataDebito = item.getElementsByTagName("DataDebito")[0].firstChild.nodeValue;
            ContadorFinanca = item.getElementsByTagName("Contador")[0].firstChild.nodeValue;
            
            SubContaDescricao  = SubContaDescricao +'<tr><td><input type="text" name="ValorCredito" id="ValorCredito_'+ContadorFinanca+'" value="'+ValorCredito+'"></td><td><input type="text" name="DataCredito" id="DataCredito_'+ContadorFinanca+'" value="'+DataCredito+'"></td><td><input type="text" name="ValorDebito" id="ValorDebito_'+ContadorFinanca+'" value="'+ValorDebito+'"></td><td><input type="text" name="DataDabito" id="DataDebito_'+ContadorFinanca+'" value="'+DataDebito+'"></td><td><input type="submit" value="Alterar" onclick="BTNAlterar('+ContadorFinanca+","+codigoCentro+","+codigoCentralizadora+","+codigoConta+')" ></td></tr>';
         }
         SubContasHTML.innerHTML = SubContaDescricao + '</table>' ;
      }
      else 
      {
        //caso o XML volte vazio, printa a mensagem abaixo
        alert("Escolha uma conta");
      }      
 }

 //fim

Essa função a ativada ao clicar no botão alterar:

function BTNAlterar(ContadorFinanca,codigoCentro,codigoCentralizadora,codigoConta)
{
    
    if(ajax) 
    {
        var ValorCredito = document.getElementById('ValorCredito_'+ContadorFinanca);
        var DataCredito = document.getElementById('DataCredito_'+ContadorFinanca);
        var ValorDebito = document.getElementById('ValorDebito_'+ContadorFinanca);
        var DataDebito = document.getElementById('DataDebito_'+ContadorFinanca);
    
        ajax.open("POST","alterar_financa.php",true);
        ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function() 
    {
     
                
        if(ajax.readyState == 4 ) 
        {
            

            var ContasHTML = document.getElementById('DivConta_'+codigoConta+'_'+codigoCentro);
            //limpa a div e atualizar com os novos valores
                        SubContasHTML.innerHTML=""; 
            document.getElementById('DivConta_'+codigoConta+'_'+codigoCentro).style.display= "none";
            loadSubContas(codigoCentro,codigoCentralizadora,codigoConta)
        }
    }
        
        var params = "ContadorFinanca="+ContadorFinanca+"&ValorCredito="+ValorCredito.value+"&DataCredito="+DataCredito.value+"&ValorDebito="+ValorDebito.value+"&DataDebito="+DataDebito.value;
        ajax.send(params);
        
    
    
    }
    
}

[alexandremanowar]

E ae pessoal beleza

Consegui fazer usando as técnicas que me foram explicadas aqui no fórum! Obrigado a todos que me ajudaram

at+