paolo@bimodesign.com | +34 608 61 64 10

JS / Ajax / Jquery / Json

        

Ajax/Jquery/Json/Zend - una struttura per comunicare


Questo breve tutorial ha l'obiettivo di spiegare come da una pagina web che contiene un risultato di una ricerca, si possano inviare varie informazioni passandole ad un controller Zend, attraverso Ajax, Jquery e Json.

Cominciamo dalla pagina web del risultato della ricerca.
Nella pagina sono presenti n-righe corrispondenti ai file da produrre in XML ed inviare. I file possono essere scelti attraverso una check box. Inoltre il file XML puo' essere generato in tre modi differenti, corrispondenti a "creare"/"modificare"/"eliminare". Quindi anche queste tre opzioni saranno dei checkbox. Infine ognuna delle tre opzioni, una volta selezionata, presenta ulteriori opzioni, da cui dipende il contenuto finale dell'XML. Qui trovate l'immagine della form

Tutti gli elementi sono stati definiti come "div" con relative classi ed id per identificarli. Tralascio il codice html/css risultante perche' oltre ad essere banale, non e' interessante ai fini di questo articolo.
Dopo aver scelto i file e le relative opzioni per creare il relativo/i XML, chiamo un evento Ajax, al click sul relativo bottone della form. Anche in questo caso tralascio i controlli di validazione, che avverranno comunque nella funzione ajax, attraverso l'utilizzo delle RegExp
Questa la funzione presente nel file ajax


$("p").click(function () {
    var baseUrl   = "http://project.local";

    arrayData = new Object();
    fileinfo = new Object();

    $('.xml_row :checked').each(function() {
        var idFile=$(this).val().substr($(this).val().indexOf('_')+1);
        var typeCreateXml=$(this).val().substr(0,1);

        var codInscripcion='';
        var cifOld = '';
        var causeDelete ='';
        var causeDestino ='';
        var step01=0;
        var step02=0;

        switch(typeCreateXml)
        {
            case 'c':
                // We need only the id file
                break;
            case 'm':
                codInscripcion = $('#cod_inscripcion_m_'+idFile).val();
                cifOld = $('#xml_modify_step_cif_'+idFile).val();

                $('#xml_modify_main_'+idFile+' :checked').each(function() {
                    switch($(this).val().substr(0,17)){
                        case 'xml_modify_step01':
                            step01=1;
                            break;
                        case 'xml_modify_step02':
                            step02=1;
                            break;
                    }

                });
                break;
            case 's':
                // Get all information
                codInscripcion = $('#cod_inscripcion_s_'+idFile).val();
                causeDelete = $('#xml_modify_cause_delete_textarea_'+idFile).val();
                causeDestino = $('#xml_delete_cause_destino_textarea_'+idFile).val();

                break;
        }

        if(typeCreateXml!='x'){
            fileinfo[idFile]={
                file:idFile,
                typeCreate: typeCreateXml,
                codInscripcion: codInscripcion,
                cifOld:cifOld,
                causeDelete: causeDelete,
                causeDestino:causeDestino,
                step01:step01,
                step02:step02
            };
        }

        arrayData={
            listFile:fileinfo
        };

    });

    var destUrl = baseUrl + "/asyncrequest/create-xml";

    $.ajax({
        url: destUrl,
        type: 'POST',
        data: {
            data_json : JSON.stringify(arrayData)
        },
        success: function(data){}
    });
});
});

Come potete notare dal codice, creo innanzitutto due object, il principale arrayData il quale conterra' n-object fileinfo. Quindi recupero le varie informazioni della form, attraverso Jquery e costruisco i due array Json, che avranno una struttura del tipo

var arrayData = {
    'listFile': {
        'file': 1111,
        'typeCreateXml': 'c',
        'codInscripcion':33132,
	'cifOld':'AS129011'
	...
    }
}

Per passare alla action del controller Zend, l'array multidimensionale, occorre utilizzare la funzione stringify nella maniera indicata nella chiamata via POST, ovvero

data_json : JSON.stringify(arrayData)

Quindi, ed abbiamo quasi terminato, lato server, l'action createXmlAction presente nel controller AsyncRequest, conterra' questo semplice codice

    public function createXmlAction() {
        $arrayData = json_decode($_POST['data_json'],true);

        var_dump($arrayData);

        $this->_helper->layout->disableLayout();
    }

dove il dump dell'array, recuperato con la funzione json_decode, risultera' essere del tipo

array(1) {
  ["listFile"]=>
  array(3) {
    [1073]=>
    array(16) {
      ["file"]=>
      string(4) "1073"
      ["typeCreate"]=>
      string(1) "c"
      ["codInscripcion"]=>
      string(0) ""
      ["cifOld"]=>
      string(0) ""
	...
    }
    [1072]=>
    array(16) {
      ["file"]=>
      string(4) "1072"
      ["typeCreate"]=>
      string(1) "m"
      ["codInscripcion"]=>
      string(0) ""
      ["cifOld"]=>
      string(0) ""
	...
    }
    [1071]=>
    array(16) {
      ["file"]=>
      string(4) "1071"
      ["typeCreate"]=>
      string(1) "s"
      ["codInscripcion"]=>
      string(0) ""
      ["cifOld"]=>
      string(0) ""
	...
    }
  }
}