1

Estou tentando submeter um formulário usando AJAX através do método POST porém não estou obtendo êxito. Alguém pode me ajudar?

function gooSubmit(url,id){
    //declaração das variáveis
    var sd  = document.getElementById(id);
    var req = rq();
    //exibi a imagem de progresso
    sd.innerHTML = "<img id=\"preload\" src=\"assets/img/preload.gif\" alt=\"Preload\" />";
    setTimeout(function(){
        //iniciar uma requisição
        req.open("POST", url, true);
        //atribui uma função para ser executada sempre que houver uma mudança de estado
        req.onreadystatechange = function(){
            //verifica se foi concluído com sucesso e a conexão é fechada (readyState=4)
            if (req.readyState == 4){
                //verifica se o arquivo foi encontrado com sucesso
                if (req.status == 200){
                    sd.innerHTML = req.responseText;
                    tinymce_init();//inicia o bbcode
                    en();//faz a entrada
                }else{
                    //caso ocorra algum erro exibe a mensagem de erro com o status do servidor
                    sd.innerHTML = "Erro: " + req.statusText;
                }
            }
        };
        req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
        req.send();
    },100);
}

Nota rq() é um polyfill para ajax:

function rq() {
    try {
        request = new XMLHttpRequest();
    } catch (IEAtual) {
        try {
            request = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (IEAntigo) {
            try {
                request = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (falha) {
                request = false;
            }
        }
    }
    if (!request) alert("Seu Navegador não suporta Ajax!");
    else return request
}
0

1 Resposta 1

1

Para enviar dados via ajax com POST tens de dar estes passos:

  • ir buscar os dados ao formulários
  • prepará-los numa query string ou num FormData
  • enviar no método .send() do ajax

Um exemplo que uso muito é assim:

var ajax = (function() {
    function prepareData(data) {
        if (typeof data == 'string') return data;
        var pairs = Object.keys(data).map(function(key) {
            return [key, data[key]].map(encodeURIComponent).join('=');
        }).join('&');

        return pairs;
    }
    return function(_data, cb) {
        var data = prepareData(_data);
        var request = new XMLHttpRequest();
        request.open('POST', '/urlParaOServidor', true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        request.onload = function() {
            if (request.status >= 200 && request.status < 400) cb(request.responseText);
            else console.log(1, 'Houve um erro :(');
        };
        request.onerror = function() {
            console.log(2, 'Houve um erro :(');
        };
        request.send(data);
    }
})();

A função prepare data transforma objetos simples numa query string, por exemplo {a: 19, b: 24} ficaria a=19&b=24 e assim o ajax sabe o que enviar.

Assim, tendo por exemplo:

<form>
    <input type="text" name="nome">
    <input type="text" name="idade">
</form>

Podes fazer assim (exemplo simples):

var data = {
    nome: document.querySelector(input[name="nome"]).value,
    idade: document.querySelector(input[name="idade"]).value
};

ajax(data, function(res){
    console.log('O servidor respondeu com:', res);
});

Há maneiras mais efetivas de ir buscar dados, mas fica assim, simples como exemplo.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .