Versão atual:

JSON com Javascript, AJAX e PHP

Montei um formulário simples em HTML. Ao preencher a matrícula do funcionário neste form e deixar o campo (onblur), ele faz uma consulta no MySQL e deve retornar o nome e setor do funcionário. Ele não está me retornando nada e ao que parece o problema está na atribuição do retorno JSON à variável. O final do meu ajax.js é o seguinte:

ajax.js

var Ajax = function() {
    'use strict';

    var request;

    if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari
        request = new XMLHttpRequest();
    } else { // code for IE6, IE5
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }

    var url;
    var data;
    var method;

    var getUrl = function() {
        return url;
    }
    var setUrl = function(v) {
        url = v;
    }

    var getData = function() {
        return data;
    }
    var setData = function(v) {
        data = v;
    }

    var getMethod = function() {
        return method;
    }
    var setMethod = function(v) {
        method = v;
    }

    var send = function(loading, done) {
        if (!url) throw new Error('Url esperada.');
        if (!method) {
            console.warn('Metodo não especificado. Presumido POST.');
            method = 'POST';
        }

        request.onprogress = function(event) {
            if (event.lengthComputable && loading) {
                var percentComplete = event.loaded / event.total * 100;
                loading(percentComplete);
            }
        };

        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200 && request.responseText && done) {
                done(request.responseText.toString().replace('while(1);', ''));
            }
        };

        request.open(method, url, true);
        request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=utf8');
        request.send(data);
    }


    return {
        getUrl: getUrl,
        setUrl: setUrl,
        getData: getData,
        setData: setData,
        getMethod: getMethod,
        setMethod: setMethod,
        send: send
    }
}

var campoMatricula = document.getElementById('matr_retirada');

campoMatricula.onblur = function() {
    var requestMatricula = new Ajax();


    requestMatricula.setUrl('getFuncionario.php');
    requestMatricula.setData('matricula = ' + this.value);
    requestMatricula.setMethod('POST');


    requestMatricula.send(null,

    function(resposta) {

        if (!resposta) {
            alert('Matrícula não encontrada');
            campoMatricula.focus();
            campoMatricula.clear();
            return false;
        }

       var dados = JSON.parse(resposta);

        document.getElementById("nome_retirada").value = dados[0].nome;
        document.getElementById("setor_retirada").value = dados[0].setor;
    });
}

RESULTADOS:

resposta:"[{"Tipo_Func":"F","matr_func":"123456","prefixo":"1234","nome_func":"Maria da Silva","setor":"financeiro"}] " dados:Array

Os resultados agora aparecem apenas quando dou um F5 na página..

Versões(3):

Ver a versão formatada

JSON com Javascript, AJAX e PHP

Comentário

new question