[Dúvida] conectar o php e o js de uma tela de login | JavaScript: manipulando objetos

Bem estou desenvolvendo o meu TCC que é um protótipo de uma plataforma para professores desenvolverem atividades e comecei com uma tela de login:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/login.css" />
    <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <title>Gráfis</title>
</head>
<body>
    <div class="container">
        <div class="left">
            <div class="border">
            <div class="card">
                <form   class="form" id="form_id" method="post" enctype="multipart/form-data"  action="php/login.php">
                    <span>Login</span>
                    <label for="usuario">Usuario:</label>
                    <input type="text" name="nome" id="nome_id" placeholder="(Nome completo)">
                    <label for="senha">Senha:</label>
                    <input type="text" name="senha" id="senha_id" placeholder="(Minimo 4 caracteres e 3 números)">
                    <input type="submit" value="Entrar" class="cadastrar">
                    <a href="#">Nâo tem uma conta? Crie uma aqui!</a>
                    <div id="error-message"></div>

                </form>
              
            </div>
        </div>

     </div>
        <div class="right">
            <div class="shape">
            <img src="./assets/logo_g.png" alt="logo">  
            <span>Ajudando Educadores à educarem</span>   
            </div>
              
        </div>
    </div>
    <script src="js/login.js"></script>
</body>
</html>

logo desenvolvi uma base de dados para quando usuário aperte o input as informações sejam pesquisadas por php no BD

$bd = mysqli_connect("localhost", "root", "", "Usuario") or die("Erro ao conectar ao banco de dados!");

$nome = $_POST["nome"];
$senha = $_POST["senha"];

if(isset($nome) && isset($senha)){
    $consulta_usu = mysqli_query($bd, "select * from usuario_info where nome = '$nome' and senha = '$senha'");
    $resultado = mysqli_fetch_array($consulta_usu);

    if($resultado){
        echo json_encode(array("success" => true));
    }else{
   
        echo json_encode(array("erro" => "Usuário ou senha incorretos"));
    }
}
else{

    echo json_encode(array("erro" => "Preencha as lacunas para poder logar"));
}
?>

No desenvolvimento desse php descobri a função json_encode que consegue transformar strings em JSON, logo lembrei de outra função Js que consegue ler JSONs o .feath()

const form = document.querySelector('#form_id');

form.addEventListener('submit', (event) => {
    event.preventDefault();
    
    fetch('php/login.php')
    .then(response => response.json())
    .then(data => {
        if(data.success){
            window.location.href = "home.html";
        } else {
            const errorMessage = document.getElementById('error-message');
            errorMessage.textContent = data.erro;
        }
    })
    .catch(error => {
        console.error('Erro durante o processo de login:', error);
        const errorMessage = document.getElementById('error-message');
        errorMessage.textContent = "Ocorreu um erro durante o processo de login.";
    });
});

pensei que estava tudo certo porem quando apertava o submit o navegador direcionava a pagina para o php que imprimia os array na tela (mas as condições estavam sendo respeitadas pelo menos)ouvi dizer que ajax poderia resolver meu problema mas não tenho ideia de como utilizar ![]( condição quando cai verdade )

![]( condição quando da erro )

Dei uma pesquisada aqui:

O Ajax é uma abordagem comum para lidar com isso.

Primeiro, você precisa modificar seu código JavaScript para enviar os dados do formulário usando Ajax.

const form = document.querySelector('#form_id');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const formData = new FormData(form);

    fetch('php/login.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if(data.success){
            window.location.href = "home.html";
        } else {
            const errorMessage = document.getElementById('error-message');
            errorMessage.textContent = data.erro;
        }
    })
    .catch(error => {
        console.error('Erro durante o processo de login:', error);
        const errorMessage = document.getElementById('error-message');
        errorMessage.textContent = "Ocorreu um erro durante o processo de login.";
    });
});

Foi criado um objeto FormData a partir do formulário, que contém todos os campos do formulário e seus valores. Em seguida, é feito o envio desses dados para o script PHP usando a função fetch, especificando o método como POST e passando o objeto FormData como o corpo da requisição.

Agora, no lado do PHP, você precisa lidar com a requisição POST e retornar os dados em formato JSON. Seu script PHP pode ser ajustado assim:

<?php

$bd = mysqli_connect("localhost", "root", "", "Usuario") or die("Erro ao conectar ao banco de dados!");

$nome = $_POST["nome"];
$senha = $_POST["senha"];

if(isset($nome) && isset($senha)){
    $consulta_usu = mysqli_query($bd, "SELECT * FROM usuario_info WHERE nome = '$nome' AND senha = '$senha'");
    $resultado = mysqli_fetch_array($consulta_usu);

    if($resultado){
        echo json_encode(array("success" => true));
    } else {
        echo json_encode(array("erro" => "Usuário ou senha incorretos"));
    }
} else {
    echo json_encode(array("erro" => "Preencha as lacunas para poder logar"));
}
?>

Com essas alterações, seu formulário enviará os dados para o script PHP usando Ajax e lidará com a resposta JSON retornada pelo PHP sem recarregar a página.

É uma ideia, talvez vc precise ajustar algumas coisas! :))))