PHP Como atualizar a pagina sem refresh usando ajax

Gilson Filho · 18 de janeiro de 2022

Eu criei a index.php, load.php (onde vai carregar os dados que estão no banco de dados que é nome e idade), connect.php (conexão com o banco)e master.js que é o JAVAscript, quando eu em load, não aparece os dados, é como se não estivesse lendo o $.ajax.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Dados</title>
    <style type="text/css">
    	body{font-family: arial;color:#2222;}
    	.btn{color: #fff; background-color: #333;padding: 10px 30px;border: 1px solid #fff;
    		font-size: 14pt;}
    </style>
</head>
<body>
   <button class="btn">load</button>
   <div class= "result"></div>
   
   <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <script src="master.js"></script>

</body>
</html>

esse é o meu index, já esse de baixo é o connect que vai conectar ao meu banco

<?php

try{
	$pdo = new PDO("mysql:dbname=aula;host=127.0.0.1", "root" , "" );
}catch(PDOException $e){
	echo "ERROR: ".$e->getMessage();
}

esse de baixo é o load, é onde os dados do meu banco vai ser puxado e vai aparecer na tela

<?php
require 'connect.php';

$mysql = $pdo->query("SELECT * FROM usuario");
if($mysql->rowCount() > 0){
	foreach ($mysql->fetchAll() as $value) {
		echo "<h3>id: ".$value['id']. "</h3><br>";
		echo "<h3>nome: ".$value['nome']. "</h3>";
		echo "<h3>email: ".$value['email']. "</h3><br>";
	}
}

já esse aqui é o master.js, que é o JAVAscript

$(function(){
	$(".btn").on("click", function(){
		
		$.ajax({
			url: "load.php",
			sucess: function(result){
				$(".result").html(result);
			},
			error: function(){
				$(".result").html("Erro");
			}
		});
	});
});

E agora temos o grande problema, o meu master,js, o JAVAscript, é como se na hora não estivesse lendo o $.ajax pra baixo, A index é bem básica, quando você clica em load terá que carregar os dados sem refresh que eu coloquei no meu phpmyadmin, o problema é que parece que o meu master.js ele não tá lendo os dados, eu fiz ate um alert nele para vê se tava funcionando mas tá, mas quando eu apago esse alert e começo a escrever essa parte do código que está em baixo ele acaba não lendo o arquivo load, tanto que eu coloquei u nome nada a ver na url e nem a mensagem de erro apareceu

	$.ajax({
			url: "load.php",
			sucess: function(result){
				$(".result").html(result);
			},
			error: function(){
				$(".result").html("Erro");
			}
		});

DiF · 18 de janeiro de 2022

@Gilson Filho Acredito que está faltando dados ali na função do ajax.

Tenta desta maneira:

$.ajax({
        url: "load.php",
        dataType: "html"
  })
  .done(function(callback) {
		 $(".result").html(result);
		    	  
  })
  .fail(function(callback) {
		 $(".resul").html(result);
  });

Se está usando as versões mais recentes, as funções success e error, foram substituidas por done() e fail()

Além disso, é interessante colocar que tipo de dado está sendo retornado.. no caso é um html por causa deste trecho no php:

foreach ($mysql->fetchAll() as $value) {
		echo "<h3>id: ".$value['id']. "</h3><br>";
		echo "<h3>nome: ".$value['nome']. "</h3>";
		echo "<h3>email: ".$value['email']. "</h3><br>";
	}