TransWikia.com

Como mudar status com AJAX?

Stack Overflow em Português Asked by Thalles Honorato on December 23, 2020

Tenho um sistema onde o administrador pode aprovar ou desaprovar o usuário, já esta tudo pronto, porém quero saber como faço pra fazer esse processo com ajax, para que toda vez que eu aprove ou desaprove um usuário a pagina não dê refresh.

Página de aprovação

    <div class="row">
         <div class="col-md-5"><h3>Autorização de Usuarios</h3></div>
         </div>
  <div class="row alinha-tabela">
    <div class="row">
    <div class="col-md-6">
      <div class="table-responsive shadow-z-1">
        <table class="table table-striped table-condensed table-hover">
         <thead>
           <tr>
             <th>Codigo</th>
             <th>Usuario</th>
             <th>Status</th>
           </tr>
         </thead>
            <tbody>
              <?php  
                //Consulta
                $buscarusuario=$pdo->prepare("SELECT * FROM usuario");
                $buscarusuario->execute();

                //atribuindo dados á variavel
                $linha = $buscarusuario->fetchAll(PDO::FETCH_ASSOC);

                //percorrendo a variavel para listar os dados
                foreach ($linha as $listar) {
                    $iduser = $listar['id'];
                    echo "<tr>";
                    echo " <td>".$listar['id']."</td>";
                    echo "<td>".$listar['nome']."</td>";
                    if($listar['status'] > 0 ){
                    echo "<td class='success text-success'>Aprovado 
  <form method='post' action='pg/mudastatus.php' id='f-desaprova' class='form-muda'>
      <button type='submit' class='btn btn-xs btn-success alinha-btn' name='desaprova' value='$iduser'>Desaprovar</button>
</form>
                    </td>";
                  }else{
                    echo "<td class='danger text-danger'> Aguardando aprovação 
  <form method='post' action='pg/mudastatus.php' id='f-aprova' class='form-muda'>
   <button type='submit' class='btn btn-xs btn-danger alinha-btn' name='aprova' value='$iduser' >Aprovar</button>
</form>

                    </td>";
                  } 
  }
              ?>
            </tbody>
        </table>
      </div>
    </div>

mudastatus.php

    <?php
 include '../config/config.inc.php'; 


if(isset($_POST['aprova'])){

   $atualizarstatus = $pdo->prepare("UPDATE usuario SET status=1 WHERE id=:ID ");
   $atualizarstatus->bindValue(":ID",$_POST["aprova"]);
   $atualizarstatus->execute();
   $linha = $atualizarstatus->rowCount();

   if($linha > 0){
     header("location:../logado.php");
   }else{
    echo "Erro ao Mudar status";
   }
}elseif (isset($_POST['desaprova'])){

   $atualizarstatus = $pdo->prepare("UPDATE usuario SET status=0 WHERE id=:ID ");
   $atualizarstatus->bindValue(":ID",$_POST["desaprova"]);
   $atualizarstatus->execute();
   $linha = $atualizarstatus->rowCount();

   if($linha > 0){
     header("location:../logado.php");
   }else{
    echo "Erro ao Mudar status";
    header("location:../logado.php");
   }
}

2 Answers

Caso você for usar jQuery, você fazer da seguinte maneira:

$.ajax({
    type: 'POST',
    data: {
        aprova: true,
    },
    url: 'mudastatus.php',
    success: function(data){
       alert('ok');
    }

});

Porém tem alguns outras coisas que você precisa arrumar em seu código.

  1. Não tem necessidade do uso do método header, já que você não irá redirecionar para lugar nenhum o ajax.
  2. Você não precisa colocar dois parâmetros no $_POST, um aprova e outro desaprova, você pode colocar apenas um, por exemplo status, se status for aprovado, executa tal ação, se for desaprovado executa outra ação. Mais limpo, certo?

Answered by Marcos Felipe on December 23, 2020

Eu não poderei de ajudar com a parte do PHP, mas vou tentar de dá uma orientação quando a requisição AJAX.

primeiro, tente colocar todos os inputs que você planeja receber no servidor dentro de um form

vamos pegar como exemplo o seguinte mark-up html.:

<form id="formulario" action="atualiza.php" method="POST">
  <div>
    <label>
      Autor:
      <input id="Author" name="Author" type="text" />
    </label>
  </div>
  <div>
    <label>
      Data Referencia:
      <input id="DataReferencia" name="DataReferencia" type="text" />
    </label>
  </div>
  <div>
      <label>
      Registos 01:
      <input id="Registos_1" name="Registos[]" type="text" />
    </label>
  </div>
  <div>
      <label>
      Registos 02:
      <input id="Registos_2" name="Registos[]" type="text" />
    </label>
  </div>
  <div>
      <label>
      Registos 03:
      <input id="Registos_3" name="Registos[]" type="text" />
    </label>
  </div>
  <div>
    <input id="Enviar" type="submit" value="Value" />
  </div>
</form>

acredito que você está familiarizado com o código acima, e sabe como recuperar os campos Autor, DataReferencia e Registos[] quando os mesmos chegam ao seu servidor.

A forma como você vai recuperar os dados no servidor não vai mudar, o que vai mudar é a forma como enviar os dados e recuperar os mesmos.

para tal, te aconselho a manipular o evento submit do form#formulario

var formulario = document.getElementById("formulario");
formulario.addEventListener("submit", function (event) {
  // cancelando o envio sincrono do formulario.
  event.preventDefault();

  var data = new FormData(formulario);
  var httpRequest = new XMLHttpRequest(formulario.method, formulario.action, true);
  httpRequest.open();
  httpRequest.addEventListener("readystatechange", function (event) {
    if (httpRequest.readyState == 4) {
      if (httpRequest.status == 200) {
        // a requisição ajax deu certo
        console.log(httpRequest.response);
      } else {
        // ocorreu um erro durante a requisição AJAX.
        console.error(httpRequest.statusText);
      }
    }
  });
  httpRequest.send(data);
});

no seu código PHP você tem duas opções, retorna uma string com uma HTML já montado e substituir o HTML da pagina, ou retornar um objeto JSON e usar ele para manipular a sua pagina.

Em ambos os casos, você vai precisar setar uma propriedade responseType do seu httpRequest e manipular o retorno da seguinte forma:

Text/HTML

// antes de enviar
httpRequest.responseType = "text";

// ao receber a resposta com sucesso.:
// limpando o DOM que vai receber o novo conteudo.
var destino = document.getElementById("destino");
while (destino.firstChild) {
  destino.removeChild(destino.firstChild);
}  

// montando o novo conteudo.
var parser = new DOMParser();
var node = parser.parseFromString(xmlHttp.responseText, "text/html");
destino.appendChild(node.documentElement);

JSON

// antes de enviar
httpRequest.responseType = "json";

// ao receber a resposta com sucesso.:
// digamos que você passou o seguinte json.:
// { novoValor: 'Hello World' }.
var destino = document.getElementById("destino");
var campo = destino.querySelector("#id_campo");
campo.value = xmlHttp.response.novoValor;

quanto a retornar um JSON no PHP, você pode converter o seu objeto da seguinte forma:

echo json_encode($meu_objeto);

Answered by Tobias Mesquita on December 23, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP