PHP Cadastro com ajax não está funcionando

CaioNeves · 6 de setembro de 2022

Tava fazendo um cadastro básico porém não está funcionando, não consegui achar nada de errado se puderem me ajudar.

Script no HTML

<script>
        cadastrar = () => {
            
            //Variáveis
            let curso = document.getElementById("curso").value;
            let valor = document.getElementById("valor").value;

            //Ajax
            let ajax = new XMLHttpRequest();
            ajax.open("POST", "php/cadastrar.php", true);
            ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            ajax.send("curso=" + curso + "&valor="+$valor);

        }
    </script>

cadastrar.php

<?php

    include("conexao.php");

    //Obtendo valores
    $curso = $_POST["curso"];
    $valor = $_POST["valor"];

    //Inserir dados
    $sql = "INSERT INTO cursos VALUES (null, '$curso', $valor)";
    mysqli_query($conexao, $sql);


?>

A parte de conexao está indo de boa porque eu cadastrei algumas coisas antes sem Ajax

washalbano · 7 de setembro de 2022

Olá!
Não sei quando surgiu o fetch, mas uso desde 2018
O fetch veio pra solucionar uma porção de problemas do XMLHttpRequest.
Acredito que talvez a solução mais conhecida seja trabalhar com promises.
Segue sugestão para POST form data usando fetch:

api/index.php

<?php

$curso = $_POST["curso"];
$valor = $_POST["valor"];

$query = "INSERT INTO cursos VALUES (null, '$curso', $valor)";


echo '<pre>$_POST: ';
print_r($_POST);
echo '</pre>';

echo '<pre>$query: ';
print_r($query);
echo '</pre>';

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    input {
      display: block
    }
  </style>
</head>

<body>

  <main>
    <form>
      <div>
        <label>Curso</label>
        <input type="text" name="curso" value="Matemática" required autofocus>
      </div>
      <div>
        <label>Valor</label>
        <input type="number" name="valor" value="158.90" required step=".1">
      </div>
      <div>
        <br>
        <button>Salvar</button>
      </div>
    </form>
    <div class="response-body"></div>
  </main>
  <script>
    const cadastrar = async (e) => {
      // evita que o submit do form atualize a página
      e.preventDefault();

      // define o formData
      const fData = new FormData(e.target)

      // submete os dados do form e espera pela resposta
      const response = await fetch('api/', {
        method: 'post',
        body: fData
      })

      let body

      // se no cabeçalho da response tiver json
      if (response.headers.get('content-type').includes('json')) {
        // trata a response como json
        body = await response.json()

      } else {
        // trata a response como texto
        body = await response.text()
      }

      // mostra a resposta na tela
      document.querySelector('.response-body').innerHTML = body
    }

    // escuta o submit do form
    document.querySelector('form').addEventListener('submit', cadastrar);
  </script>
</body>

</html>