JQuery - Serializzare i dati del modulo nell'array associato

Question

Come si serializzano i dati del modulo HTML in un array associato anziché il formato dell'indice numerico prodotto da $ .serializeArray() utilizzando jQuery?

L'uscita in jQuery.serializeArray rende difficile valori selezionare direttamente utilizzando una chiave indice numerico, spostamenti indice lievi possono verificarsi quando le caselle di controllo sono utilizzati in ingresso forma ..

uscita di serializeArray

[ 
    0: [name: 'field-1', value: 'val1'], 
    1: [name: 'check', value: 'val2'], 
    2: [name: 'check', value: 'val3'] 
] 

desiderata uscita-più affidabile formato e il valore più semplice l'accesso

[ 
    'field-1' : 'val1', 
    'check' : [ 0 : 'val2', 1 : 'val3' ] 
] 

Answer 1

La soluzione che ha funzionato per me era scrivere le mie funzioni jQuery $ .serializeAssoc() e $ .serializeObject() alternative che potevano anche gestire array multidimensionali da opzioni di selezione multipla su moduli.

Queste due funzioni hanno i loro pro e contro; Uso serializeAssoc per semplificare i dati del modulo per l'accesso diretto ai valori generici, in genere in JS Validation.

serializeObject è diventato utile con i moduli multifunzione che utilizzano indici di chiavi numeriche personalizzate, semplificando l'analisi dei dati delle informazioni inviate da un'impostazione di moduli complicata di campi o moduli di selezione multipla con valori creati dal DOM in cui i dati in un modulo hanno parent e le relazioni tra i bambini, qualcosa che serializeAssoc non può gestire molto bene.

serializeAssoc

seguente funzione permette controlli lunghezza ma presenta problemi con personalizzati indici chiave numerici, Nel presentare la matrice in un AJAX chiamata provoca indice imbottitura

$.fn.serializeAssoc = function() { 
    var data = {}; 
    $.each(this.serializeArray(), function(key, obj) { 
    var a = obj.name.match(/(.*?)\[(.*?)\]/); 
    if(a !== null) 
    { 
     var subName = a[1]; 
     var subKey = a[2]; 

     if(!data[subName]) { 
     data[subName] = [ ]; 
     } 

     if (!subKey.length) { 
     subKey = data[subName].length; 
     } 

     if(data[subName][subKey]) { 
     if($.isArray(data[subName][subKey])) { 
      data[subName][subKey].push(obj.value); 
     } else { 
      data[subName][subKey] = [ ]; 
      data[subName][subKey].push(obj.value); 
     } 
     } else { 
     data[subName][subKey] = obj.value; 
     } 
    } else { 
     if(data[obj.name]) { 
     if($.isArray(data[obj.name])) { 
      data[obj.name].push(obj.value); 
     } else { 
      data[obj.name] = [ ]; 
      data[obj.name].push(obj.value); 
     } 
     } else { 
     data[obj.name] = obj.value; 
     } 
    } 
    }); 
    return data; 
}; 

---

serializeObject

La seguente funzione consente gli indici numerici personalizzati senza causare il riempimento, ma impedisce il controllo della lunghezza. Controllare i conteggi delle chiavi dell'indice utilizzando un ciclo ogni se richiesto. Se si invia l'oggetto in una chiamata AJAX, è necessario innanzitutto utilizzare JSON.Stringify e passare il valore in un var lato server decodificato poiché l'utilizzo diretto causa un errore di fine riga inaspettato in alcuni browser.

$.fn.serializeObject = function() { 
    var data = {}; 
    $.each(this.serializeArray(), function(key, obj) { 
     var a = obj.name.match(/(.*?)\[(.*?)\]/); 
     if(a !== null) 
     { 
      var subName = new String(a[1]); 
      var subKey = new String(a[2]); 
      if(!data[subName]) { 
       data[subName] = { }; 
       data[subName].length = 0; 
      }; 
      if (!subKey.length) { 
       subKey = data[subName].length; 
      } 
      if(data[subName][subKey]) { 
       if($.isArray(data[subName][subKey])) { 
       data[subName][subKey].push(obj.value); 
       } else { 
       data[subName][subKey] = { }; 
       data[subName][subKey].push(obj.value); 
       }; 
      } else { 
       data[subName][subKey] = obj.value; 
      }; 
      data[subName].length++; 
     } else { 
      var keyName = new String(obj.name); 
      if(data[keyName]) { 
       if($.isArray(data[keyName])) { 
        data[keyName].push(obj.value); 
       } else { 
        data[keyName] = { }; 
        data[keyName].push(obj.value); 
       }; 
      } else { 
       data[keyName] = obj.value; 
      }; 
     }; 
    }); 
    return data; 
}; 

---

utilizzati:

Aggiunta la funzione

<script> 
    (function($){ 
    $.fn.serializeAssoc = function() { 
     ... As Presented Above ... 
    }; 
    $.fn.serializeObject = function() { 
     ... As Presented Above ... 
    }; 
    })(jQuery); 
</script> 

modulo di esempio

<form id="myForm"> 
    <input type="text" name="myName" /> 

    <select name="consoles" multiple> 
    <option selected>PC</option> 
    <option selected>XBOX 360</option> 
    <option selected>PS3</option> 
    </select> 

    <input type="text" name="sample[100]" value="Mario" /> 
    <input type="text" name="sample[101]" value="Brothers" /> 

    <input type="submit" name="submit" value="Submit" /> 
</form> 

Utilizzando la funzione

<script> 
    (function($) { 
    $('#myForm').submit(function(e){ 
     e.preventDefault(); 
     var formData = $('#myForm').serializeAssoc(); 
     console.log(formData); 
    }); 
    })(jQuery); 
</script> 

modulo dinamico esempio

<form id="myForm"> 
    <input type="text" name="myName" value="Spuggy" /> 

    <div id="characters"> 
    <input type="text" name="character[]" value="Mario" /> 
    <input type="text" name="character[]" value="Sonic" /> 
    </div> 

    <div id="consoles"> 
    <input type="text" name="console[xbox]" value="XBOX One" /> 
    <input type="text" name="console[playstation]" value="PlayStation 4" /> 
    </div> 

    <input type="submit" name="submit" value="Submit" /> 
</form> 

<script> 
    (function($) { 
    $('#myForm').submit(function(e){ 
     e.preventDefault(); 
     var formData = $('#myForm').serializeAssoc(); 
     console.log(formData); 
    }); 
    })(jQuery); 
</script> 

dinamica forma Output

[ 
    myName: 'Spuggy', 
    character: [ 
    0: 'Mario', 
    1: 'Sonic' 
    ], 
    console: [ 
    'xbox': 'XBOX One', 
    'playstation': 'PlayStation 4' 
    ] 
]