Submeter Form Com Ajax Utilizando ISO-8859-1

[Maycon Brito 0]

Olá,

 

tenho uma função JQuery que submete os formulários das páginas que são carregadas dentro do template da minha aplicação. Quando um formulário é submetido, a o resultado da sua action é carregado dentro de uma div, assim, as páginas são carregadas dinamicamente.

 

O meu problema é que ao submeter o formulário a codificação acaba sendo o UTF-8, e pelo que li até agora o ajax trabalha somente em UTF-8. Já adicionei headers e content-type, porém nada resolveu o meu problema até agora.

 

A única coisa que resolve é a utilização do utf8_decode por parte do server-side com PHP. Porém eu gostaria de resolver esse problema pelo lado do próprio cliente-side com JavaScript, já que tenho centenas de Views em minha aplicação e seria muito incoveniente usar utf8_decode em cada uma delas.

 

Abaixo algumas partes interessantes do meu código:

 

Funções Javascript:

FormSubmit, cria a trigger para capturar eventos de submissão de formulários e tratá-los para que funcionem dentro do template:

/**
 * Trata todos os componentes <form> da página para que a submissão do mesmo funcione dentro do template, além
 * de enviar o $_POST via AJAX
 * 
 * @returns {undefined} 
 */
function formSubmit() {

    //Inicializa variáveis
    var form = null;
    url = null;

    //Cria o evento de submissão do form que funcionará para as views executadas dentro do template
    $("*").on("submit", "form", function(event) {

        //Inicializa variáveis de formulário
        form = $(this);
        var target = form.attr('target');

        //O alvo (target) do formulário não está definido?
        if (target === undefined ||
                target === null ||
                target === '') {

            event.preventDefault();

            //Aguarda a exibição do loader para realizar a requisição ajax
            $.when(
                    //Exibe o loader
                    displayLoader(true)

                    //Quando o loader tiver sido exibido
                    ).then(
                    //Instancía variáveis
                    url = form.attr("action"),
                    //Envia o form via ajax juntamente com o seu $_POST
                    loadView(url, true, true, true)
                    );

            //Retorna falso para pausar a submissão do form
            return false;

        }
    });
}

 

LoadView, função que realiza a requisição AJAX com o servidor e carrega a view resultante na área central do template.

/**
 * Carrega na área central do template a url enviada por parâmetro
 * 
 * @param {string} hash endereço url da página a ser exibida na área central do template
 * @param {boolean} post tipo de requisição ajax a ser realizada. true para POST e false para GET.
 * @param {boolean} submit determina se os dados da página, formulário, url ou hash podem ser enviados junto à AJAX request.
 * @param {boolean} repeat determina se a hash ou url pode ser recarregada consecutivamente.
 * @returns {undefined}
 */
function loadView(hash, post, submit, repeat) {

    //Exibe o loader
    displayLoader(true);

    //Remove o hash da url para poder carregá-la sem a ocorrência de loop
    hash = hash.replace("#", "");

    //Inicializa variáveis
    var div = $("#divConteudo");
    var type = "POST";
    var data = null;

    //O formulário deverá ser submetido?
    if (submit) {
        //Para enviar os dados junto com a página, verifica se será necessário o envio ou não,
        //pois dependendo do caso o $_POST pode atrapalhar o carregamento
        data = $("form").serialize();
    }

    //Verifica se o tipo de requisição ajax será post ou GET
    if (!post) {
        type = "GET";
    }

    //A última hash é diferente da url atual?
    if (lastHash !== hash || repeat) {

        //Elimina requisições ajax que estão sendo feitas no momento
        verificaAjax(ajaxRequest);

        /**
         * Inicia a requisição AJAX
         */
        ajaxRequest = $.ajax({
            //Antes de enviar a requisição
            beforeSend: function(jqXHR) {
                //Atualiza o último hash visitado
                lastHash = hash;

                //Insere a hash na url do navegador
                window.location.hash = hash;
                
//                data = utf8_decode(data);
//                console.log("Data=" + data);

            },
            type: type,
            url: hash,
            contentType: "application/x-www-form-urlencoded;charset=ISO-8859-1",
            singleton: true,
            data: utf8_decode(data),
            error: function(qXHR, textStatus, errorThrown) {
                exibeErroAjaxRequest(qXHR, textStatus, errorThrown)
            },
            //Quando a requisição estiver concluída
        }).done(function(data) {

            //Caso data não tenha um valor definido
            if (data === null || data == "") {

                //Volta o sistema para a pagina inicial
                acessoInicial();

            } else {

                //Aguarda o carregamento da View
//                data = utf8_decode(data);
                $(div).html(data).fadeIn('slow');

                //Inicializa funções triggers da view
                fileOnChange();

                linkPaginacao();

                //Inicializa o envento para tratar a submissão do form
                formSubmit();
            }

            //Remove o loader
            displayLoader(false);

        });
    }
}

 

Header que é carregado no cabeçalho do template:

<html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br" xml:lang="en" class="">
<head>
<title>...</title>
<meta charset="ISO-8859-1">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">

<!-- Folhas de estilo CSS e Scripts-->
....

</head>

 

Conto com a ajuda de vocês, já estou a dias com este problema.

[Maycon Brito 0]

******** Edit ********

Eu adicionei o seguinte trecho de código abaixo ao carregar cada view do projeto. Ele resolveu o problema parcialmente, pois converteu todo charset UTF-8 para ISO-8859-1 que é o que eu queria, porém removeu diversos caracteres que continham acentos, tais como "ã" e "ç".

        mb_internal_encoding("UTF-8");
        mb_http_output("iso-8859-1");
        ob_start("mb_output_handler");
        header("Content-Type: text/html; charset=ISO-8859-1", true);

 

[Maycon Brito 0]

Resolvi o problema, Graças a Deus!

 

A solução foi reescrever a função "fn" do JQuery, ela foi proposta no seguinte endereço: http://forum.jquery.com/topic/serialize-problem-with-latin-1-iso-8859-1-and-solution

 

jQuery.fn.extend({
    param: function( a ) { 
        var s = []; 
 
        // If an array was passed in, assume that it is an array 
        // of form elements 
        if ( a.constructor == Array || a.jquery ){
            // Serialize the form elements 
            jQuery.each( a, function(){ 
                s.push(unescape(encodeURIComponent(escape(this.name))) + "=" + unescape(encodeURIComponent(escape(this.value)))); 
            }); 
        } 
        // Otherwise, assume that it's an object of key/value pairs 
        else{ 
            // Serialize the key/values 
            for ( var j in a ) 
                // If the value is an array then the key names need to be repeated 
                if ( a[j] && a[j].constructor == Array ) 
                    jQuery.each( a[j], function(){ 
                        s.push(unescape(encodeURIComponent(escape(j)) + "=" + encodeURIComponent(escape(this)))); 
                    }); 
                else 
                    s.push(unescape(encodeURIComponent(escape(j)) + "=" + encodeURIComponent(escape(a[j])))); 
        } 
        // Return the resulting serialization 
        return s.join("&").replace(/ /g, "+"); 
    },

    serialize: function() { 
        return this.param(this.serializeArray()); 
    }
    

});