Jump to content
Biel.

deixar php separado do ajax

Recommended Posts

Olá pessoal. O código abaixo está funcionando e cadastra normalmente sem refresh. É possível deixar  pagina1.php fora ajax e ficar igual o EX3 e o script continuar funcionando ? Se possível der a resposta com base na minha pergunta. Obrigado !

 

pagina1.php

<?php
$nome = $_POST['nome'];
echo json_encode($nome);
?> 


pagina2.php
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 

<script>
$(document).ready(function (){
    $("#salvar").click(function (){
       var form = new FormData($("#formulario")[0]);
       $.ajax({
           url: 'pagina1.php',
           type: 'post',
           dataType: 'json',
           cache: false,
           processData: false,
           contentType: false,
           data: form,
           timeout: 8000,
           success: function(resultado){
               $("#resposta").html(resultado);
           }
       });
    });
});     
</script>

<form action="" id="formulario" method="post" >  
    <input type="text" name="nome" id="nome"  value="" />
    <input type="button" id="salvar" name="salvar" value="button" />
</form> 


<div id="resposta"></div>


EX3
<?php if (isset($_POST["nome"])){ ?>
<?php
$nome = $_POST['nome'];
?> 
<?php
}
?>

 

Share this post


Link to post
Share on other sites

O trabalho do PHP é basicamente fazer tarefas no servidor. Veja esse exemplo:

 

pagina2.php
-------------------------------------------------------
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> 
<script>
$(document).ready(function (){
    $("#salvar").click(function (){
       var form = new FormData($("#formulario")[0]);
       $.ajax({
           url: 'ex3.php',
           type: 'post',
           dataType: 'json',
           cache: false,
           processData: false,
           contentType: false,
           data: form,
           timeout: 8000,
           success: function(resultado){
               $("#resposta").html(resultado); } }); });}); 
</script>
<form action="" id="formulario" method="post" >  
    <input type="text" name="nome" id="nome"  value="" />
    <input type="button" id="salvar" name="salvar" value="button" />
</form> 
<div id="resposta"></div>

ex3.php
--------------------------------------------------------
<?php 
if (isset($_POST["nome"])){ 
    $nome = $_POST['nome'];
    $arquivo = fopen('meuarquivo.txt','w'); 
    if ($arquivo == false) die('Não foi possível criar o arquivo.');
    $texto = "$nome $nome $nome"; 
    fwrite($arquivo, $texto);}

Esse é um péssimo exemplo de programação. O camarada escreve o nome dele no formulário, o Ajax manda o nome para o ex3.php, o ex3.php escreve o nome do usuário três vezes no arquivo meuarquivo.txt (no meu caso foi gravado no diretório c:\wamp64\www\astudy\meuarquivo.txt), mas o usuário não recebe nenhuma mensagem, pois o código PHP não retorna nenhuma mensagem para o Ajax colocar no HTML.

Mas se a intenção era fazer o mesmo serviço sem o AJAX, o código é o que segue, mas ele vai repaginar a tela:

 

ex3.php
----------------------------------------------------
<?php
if(isset($_POST['nome'])){
    $nome=$_POST['nome'];
    echo "Olá, Sr $nome, como vai o senhor? <p>";
}
?>
<form id="formulario" method="post" >  
    <input type="text" name="nome" id="nome"  value="" />
    <input type="button" id="salvar" name="salvar" value="button" />
</form> 

A repaginação é necessária pois o PHP não é capaz de ver o que o usuário escreveu no formulário.

Enfim, o PHP é mais útil para dar suporte ao JavaScript botar as informações no HTML. Ou, no meu caso, eu uso porque eu não sei quase nada de HTML.

 

Share this post


Link to post
Share on other sites
1 hora atrás, Biel. disse:

É possível deixar  pagina1.php fora ajax e ficar igual o EX3 e o script continuar funcionando ?

não entendi

você está misturando php com ajax no mesmo arquivo?
o ex 3 não funciona?

o que esse sistema faz? 

o que deveria fazer?

Share this post


Link to post
Share on other sites
11 horas atrás, tetsuo disse:

não entendi

você está misturando php com ajax no mesmo arquivo?
o ex 3 não funciona?

o que esse sistema faz? 

o que deveria fazer?

Note que a pagina1.php   está dentro do ajax tipo "include" .

$.ajax({
url: 'pagina1.php',    <- aqui 
type: 'post',

Estou tentando colocar a pagina1 fora do ajax . 

$.ajax({
//url: 'pagina1.php',    <- não quero aqui a pagina1.php
type: 'post',

 

Quero que o código da pagina1 fique na integra na pagina2 , mas fora do ajax.  Esqueça O EX3 não serve pra nada. 

 

 

Share this post


Link to post
Share on other sites

O $.ajax é um recurso do JavaScript que tem uma sintaxe com esse padrão

 

$.ajax({ method: "POST", url: "cadastrar.php", data: { nome: "Pedro", email: "pedro@email.com" } })

 

O URL é um parâmetro necessário para a função $.ajax  saber onde mandar solicitações(e em muitos casos aguardar para receber resposta).

 

Caso você não goste da função $.ajax, o JavaScript oferece outros recursos para emular a função assincrona.

 

Acreditamos que podemos ajudar melhor você, se você explicasse exatamente o que você quer, ao invés de ficar sugerindo a mudança das funções.

Share this post


Link to post
Share on other sites
20 horas atrás, Frank K Hosaka disse:

O $.ajax é um recurso do JavaScript que tem uma sintaxe com esse padrão

 

$.ajax({ method: "POST", url: "cadastrar.php", data: { nome: "Pedro", email: "pedro@email.com" } })

 

O URL é um parâmetro necessário para a função $.ajax  saber onde mandar solicitações(e em muitos casos aguardar para receber resposta).

 

Caso você não goste da função $.ajax, o JavaScript oferece outros recursos para emular a função assincrona.

 

Acreditamos que podemos ajudar melhor você, se você explicasse exatamente o que você quer, ao invés de ficar sugerindo a mudança das funções.

 

E complicado ficar explicando os motivos, são tantos. Simplesmente não rola usar desta forma

$.ajax({
//url: 'pagina1.php',    <- não quero aqui a pagina1.php
type: 'post',

 

Share this post


Link to post
Share on other sites
Em 06/11/2022 at 11:00, Biel. disse:

 

E complicado ficar explicando os motivos, são tantos. Simplesmente não rola usar desta forma


$.ajax({
//url: 'pagina1.php',    <- não quero aqui a pagina1.php
type: 'post',

 

 

 

Vamos lá, já que você não quer usar a função $.ajax, essa é a minha sugestão:

 

<input type="text" id="nome" /><p>
<input type="button" value=enviar onclick="resposta.innerHTML=nome.value" />
<div id="resposta"></div>

 

Share this post


Link to post
Share on other sites

Tenta assim

Não vai precisar de ajax nem de 2 arquivos. No FORM coloca que ele submete pra ele mesmo

<form action="<?=($_SERVER['PHP_SELF'])?>" id="formulario" method="post" >

No inicio do arquivo coloca 

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     if (isset($_POST["nome"])){
           // seu codigo
     }
}

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

  • Similar Content

    • By Biel.
      Olá pessoal. Ao digitar um texto qualquer no input e pressionar submit o valor do atributo href é alterado temporariamente. Como alterar permanentemente no corpo do documento  o valor do atributo href, digitando um nome de link qualquer no campo input e em seguida submit ?
      <!DOCTYPE html> <html> <head> <style> input { width: 100%; font-size: 20px; } textarea { width: 100%; font-size: 16px; height: 200px; } .class88 { margin-top: 50px; padding: 10px; max-width: 100px; } </style> </head> <body> <h2> alterar valor do atributo href</h2> digite um texto qualquer <input type="text" class="class42" value=""> <a id="linkToChange" href="teste5.php" class="class43"></a> <input type="submit" class="class88" value="enviar" onclick="alterarHref()"> <script> function alterarHref() { // pega o valor da class42 var valorDaclass42 = document.querySelector('.class42').value.trim(); // altera o valor do atributo href para o valorDaclass42 sugerido document.querySelector('.class43').setAttribute('href', valorDaclass42); console.log("Href alterado:", valorDaclass42); } </script> </body> </html>  
    • By Biel.
      Olá pessoal. BannerA está funcionando normalmente. Como usar mesmo script para bannerB e bannerC.
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner Aleatório</title> <style> /* Estilos opcionais para o banner */ #divPai { margin: auto; border: 2px solid red; } #bannerA { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerA img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } #bannerA img.active { opacity: 1; } </style> </head> <body> <div id="divPai"> <div id="bannerA" class="bannerA"> <a href="link1"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3"><img src="image3.jpg" alt="Imagem 3"></a> </div> <!-- <hr> <div id="bannerB" class="bannerB"> <a href="link4"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5"><img src="image5.jpg" alt="Imagem 5"></a> <a href="link6"><img src="image6.jpg" alt="Imagem 6"></a> </div> <hr> <div id="bannerC" class="bannerC"> <a href="link7"><img src="image7.jpg" alt="Imagem 7"></a> <a href="link8"><img src="image8.jpg" alt="Imagem 8"></a> <a href="link9"><img src="image9.jpg" alt="Imagem 9"></a> </div> --> </div> <hr> <script> document.addEventListener("DOMContentLoaded", function() { // var banner = document.getElementById("divPai"); // var images = banner.querySelectorAll("img"); var images = document.querySelectorAll("#bannerA img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 1000); // makeSliderKind('.bannerA', 1000); // makeSliderKind('.bannerB', 2000); // makeSliderKind('.bannerC', 3000); }); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando e o link acompanha o banner, até aqui tudo ok ! Quero muito fazer uma transição suave entre uma image e outra, colocando as propiedades e valores no css ou diretamente no javascript e nada de propiedades e valores no html através do style . Se possível coloque no código somente o que precisa . Obrigado!
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Banner</title> <style> /* Estilos opcionais para o banner */ .banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner img { width: 100%; height: auto; position: absolute; top: 0; left: 0; transition: 1.5s ease-in; } .banner img.active { opacity: 1; } </style> </head> <body> <div class="banner" id="banner"> <a href="link1" class="ggg"><img src="image1.jpg" alt="Imagem 1"></a> <a href="link2" class="ggg"><img src="image2.jpg" alt="Imagem 2"></a> <a href="link3" class="ggg"><img src="image3.jpg" alt="Imagem 3"></a> <a href="link4" class="ggg"><img src="image4.jpg" alt="Imagem 4"></a> <a href="link5" class="ggg"><img src="image5.jpg" alt="Imagem 5"></a> </div> <script> document.addEventListener("DOMContentLoaded", function() { var banner = document.getElementById("banner"); var images = banner.querySelectorAll("img"); // Função para exibir uma imagem aleatória function showRandomImage() { // Escolhe aleatoriamente um índice de imagem var randomIndex = Math.floor(Math.random() * images.length); // Define todas as imagens como ocultas images.forEach(function(img) { img.style.display = "none"; }); // Exibe a imagem aleatória images[randomIndex].style.display = "block"; } // Chama a função inicialmente e define um intervalo para exibir novas imagens a cada 3 segundos showRandomImage(); setInterval(showRandomImage, 3000); }); </script> </body> </html>  
       
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando normalmente, mas a transição entre uma imagem e outra está um tanto truculenta. Quero deixar suave. Como resolver isso? Obrigado !
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>transition suave entre uma image e outra</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } #bannerGG { width: 100%; height: auto; position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } /* #tete:active { opacity: 1; } */ </style> </head> <body> <div id="banner"> <img class="bannerGG" src="imagem1.png" alt="Image 1"> <img class="bannerGG" src="imagem2.png" alt="Image 2"> <img class="bannerGG" src="imagem3.png" alt="Image 3"> <img class="bannerGG" src="imagem4.png" alt="Image 4"> <img class="bannerGG" src="imagem5.png" alt="Image 5"> </div> <script> const image = document.querySelectorAll('.bannerGG'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * image.length); const randomImage = image[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; const linkElement = document.createElement('a'); linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 3000); </script> </body> </html>  
    • By Biel.
      Olá pessoal. O banner abaixo está funcionando, mas quero que o link do banner venha da tag a  e não do javascript . Como resolver? 
      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Mostrar link do banner que está na tag a</title> <style> #banner { width: 240px; height: 480px; overflow: hidden; position: relative; } .banner-img { width: 100%; height: 100%; object-fit: cover; position: absolute; /* opacity: 0; */ transition: opacity 0.5s ease-in-out; } .banner-link { display: block; width: 100%; height: 100%; } </style> </head> <body> <div id="banner"> <a href="link147"><img class="banner-img" src="imagem1.png" alt="Image 1"></a> <a href="link254"><img class="banner-img" src="imagem2.png" alt="Image 2"></a> <a href="link350"><img class="banner-img" src="imagem3.png" alt="Image 3"></a> <a href="link462"><img class="banner-img" src="imagem4.png" alt="Image 4"></a> <a href="link538"><img class="banner-img" src="imagem5.png" alt="Image 5"></a> </div> <script> const images = document.querySelectorAll('.banner-img'); const banner = document.getElementById('banner'); function showRandomImage() { const randomIndex = Math.floor(Math.random() * images.length); const randomImage = images[randomIndex]; const imgElement = document.createElement('img'); imgElement.src = randomImage.src; imgElement.alt = randomImage.alt; imgElement.classList.add('banner-img'); const linkElement = document.createElement('a'); // linkElement.appendChild(imgElement); linkElement.href = randomImage.href; linkElement.classList.add('banner-link'); linkElement.href = "page" + (randomIndex + 1) + ".html"; // Link para cada imagem linkElement.appendChild(imgElement); banner.innerHTML = ''; banner.appendChild(linkElement); } showRandomImage(); setInterval(showRandomImage, 1000); </script> </body> </html> Resolvido,  Obrigado a todos !
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.