Porque o php não pega a váriavel ajax?

Programação PHP
, , ,
#1

Olá, eu tenho um formulário html5 que que tem dois campos, um de nome e outro de idade, as pessoas digitam e via um código ajax eu mando para um arquivo php que pega essas variáveis e coloca em um banco de dados(Pelo menos era para ser assim), as váriaveis são enviadas para o servido por meio desse código ajax

function enviar(url, body) {

            console.log(body);

            var xhr = new XMLHttpRequest();

            xhr.open("POST", url, true);

            xhr.setRequestHeader("Content-type", "application/json");

            xhr.send(JSON.stringify(body));

            xhr.onload = function () {

                console.log(this.responseText);

            }

            return xhr.responseText;

        }

        function enviarDadosForm() {

            event.preventDefault();

           

            var url = "../../scripts/php/teste.php";

            var userName = document.querySelector("#nome-usuario").value;

            var idade2 = String(idade);

            console.log(userName);

            console.log(idade2);

            body = {

                "nome": userName,

                "idade": idade2,

            }

           

            enviar(url, body)

        }

as váriaveis são enviadas pórem o php não consegue pegar, o código php é

<?php
if (isset($_POST)) {
    include_once("conexaoDB.php");
    $userName = (isset($_POST['nome']))? $_POST['nome']: '';
    $email = (isset($_POST['email']))? $_POST['email']: '';
    $idade = (isset($_POST['idade']))? $_POST['idade']: '';

    $result = mysqli_query($conexao, "INSERT INTO usuarioscursoacriancaeomundodaliteratura(userName,email,idade)
    VALUES ('$userName','$email','$idade')");
}
?>

se alguem puder me ajudar, agradeço

#2

Não é para mandar JSON.

Na documentação está descrito o que pode ser enviado no método send. No caso, você poderia mandar um URLSearchParams:

var body = new URLSearchParams({
    "nome": userName,
    "idade": idade2,
});
enviar(url, body);

E na função enviar você muda o Content-type (nada de application/json, você está mandando os dados de um formulário, então o tipo correto é application/x-www-form-urlencoded) e manda o objeto diretamente (nada de JSON.stringify):

xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.send(body);

Em vez de usar o URLSearchParams, também dá para montar a query string diretamente:

enviar(url, `nome=${userName}&idade=${idade2}`);

Fetch API

Atualmente dá para usar a Fetch API - a menos que você precise dar suporte a browsers antigos.

A forma de funcionamento é similar:

function enviarDadosForm(event) {
    event.preventDefault();
    var url = "../../scripts/php/teste.php";
    fetch(url, {
        method: 'POST',
        // ATENÇÃO: vc pode passar o elemento "form" diretamente, que ele envia todos os campos
        body: new FormData(document.querySelector('#myForm'))
    })
    .then(response => response.text())
    .then(html => console.log(html));
}

No caso, usei um FormData. Basta você passar o elemento que corresponde ao seu form, que ele já envia todos os campos (não precisa pegar um a um). Inclusive, este FormData poderia ser usado no lugar do URLSearchParams do primeiro exemplo acima.

1 curtida
#3

Obrigado cara, vou testar!

#4

Tem como usar os dois tanto o fetch quanto o método mais antigos?

#5

A princípio, não vejo motivo para misturar.

Veja aqui os browsers que são compatíveis e incompatíveis com fetch. Se vc não precisa dar suporte aos incompatíveis, prefira usar fetch mesmo.

Mas se precisa que o sistema rode em browsers antigos, fique com o XMLHttpRequest mesmo.

1 curtida
#6

Ok obrigado

#7

Tem como enviar uma váriavel javascript junto no método fetch?

#8

Por favor descreva melhor o que vc quer fazer. O que pode ser enviado no fetch está na documentação (veja os links que eu já indiquei). Vc pode construir esses dados usando qualquer código JS válido, mas como fazer depende do que vc precisa.

#9

Ok