Serialisieren Sie Formulardaten in JSON

Hier ist eine Funktion für diesen Anwendungsfall:

function getFormData($form){
    var unindexed_array = $form.serializeArray();
    var indexed_array = {};

    $.map(unindexed_array, function(n, i){
        indexed_array[n['name']] = n['value'];
    });

    return indexed_array;
}

Verwendungszweck:

var $form = $("#form_data");
var data = getFormData($form);

Du kannst das:

function onSubmit( form ){
  var data = JSON.stringify( $(form).serializeArray() ); //  <-----------

  console.log( data );
  return false; //don't submit
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form onsubmit='return onSubmit(this)'>
  <input name='user' placeholder='user'><br>
  <input name='password' type='password' placeholder='password'><br>
  <button type='submit'>Try</button>
</form>

siehe dies: http://www.json.org/js.html

Der folgende Code sollte Ihnen helfen. :)

 //The function is based on http://css-tricks.com/snippets/jquery/serialize-form-to-json/
 <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

<script>
    $.fn.serializeObject = function() {
        var o = {};
        var a = this.serializeArray();
        $.each(a, function() {
            if (o[this.name]) {
                if (!o[this.name].Push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].Push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return o;
    };

    $(function() {
        $('form.login').on('submit', function(e) {
          e.preventDefault();

          var formData = $(this).serializeObject();
          console.log(formData);
          $('.datahere').html(formData);
        });
    });
</script>

Verwenden:

var config = {};
jQuery(form).serializeArray().map(function(item) {
    if ( config[item.name] ) {
        if ( typeof(config[item.name]) === "string" ) {
            config[item.name] = [config[item.name]];
        }
        config[item.name].Push(item.value);
    } else {
        config[item.name] = item.value;
    }
});

Ich weiß, dass dies nicht die Helferfunktionsanforderungen erfüllt, aber die Art und Weise, wie ich dies getan habe, ist die Verwendung der $ .each () - Methode von jQuery

var loginForm = $('.login').serializeArray();
var loginFormObject = {};
$.each(loginForm,
    function(i, v) {
        loginFormObject[v.name] = v.value;
    });

Dann kann ich loginFormObject an mein Backend übergeben, oder Sie können ein Benutzerobjekt erstellen und es auch im Backbone speichern ().

Ich konnte keine Antwort finden, die das lösen würde:

[{name:"Vehicle.Make", value: "Honda"}, {name:"Vehicle.VIN", value: "123"}]

Dies erfordert dieses Objekt:

{Vehicle: {Make: "Honda", "VIN": "123"}}

Also musste ich einen eigenen Serializer schreiben, der das lösen würde:

function(formArray){
        var obj = {};
        $.each(formArray, function(i, pair){
            var cObj = obj, pObj, cpName;
            $.each(pair.name.split("."), function(i, pName){
                pObj = cObj;
                cpName = pName;
                cObj = cObj[pName] ? cObj[pName] : (cObj[pName] = {});
            });
            pObj[cpName] = pair.value;
        });
        return obj;
    }

Vielleicht hilft es jemandem.

Wenn Sie sich nicht um sich wiederholende Formularelemente mit demselben Namen kümmern, können Sie Folgendes tun:

var data = $("form.login").serializeArray();
var formData = _.object(_.pluck(data, 'name'), _.pluck(data, 'value'));

Ich benutze nderscore.js hier.

Um das gleiche Problem zu lösen (Validierung ohne Zugriff auf komplexe Plugins und Bibliotheken), habe ich jQuery.serializeJSON erstellt, das serializeArray verbessert, um verschachtelte Objekte aller Art zu unterstützen.

Dieses Plugin wurde sehr beliebt, aber in einem anderen Projekt verwendete ich Backbone.js , wo ich die Validierungslogik in die Backbone.js-Modelle schreiben möchte. Dann habe ich Backbone.Formwell erstellt, mit dem Sie die von der Validierungsmethode zurückgegebenen Fehler direkt im Formular anzeigen können.

Mit nderscore.js :

function serializeForm($form){
    return _.object(_.map($form.serializeArray(), function(item){return [item.name, item.value]; }));
}

Folgendes verwende ich für diese Situation als Modul (in meiner formhelper.js):

define(function(){
    FormHelper = {};

    FormHelper.parseForm = function($form){
        var serialized = $form.serializeArray();
        var s = '';
        var data = {};
        for(s in serialized){
            data[serialized[s]['name']] = serialized[s]['value']
        }
        return JSON.stringify(data);
    }

    return FormHelper;
});

Es ist zum Kotzen, dass ich keinen anderen Weg finde, um das zu tun, was ich tun möchte.

Dies gibt diesen JSON für mich zurück:

{"first_name":"John","last_name":"Smith","age":"30"}

Wenn Sie das Formular mit JSON senden, müssen Sie [] in der Sendezeichenfolge entfernen. Dies können Sie mit der jQuery-Funktion serializeObject () tun:

var frm = $(document.myform);
var data = JSON.stringify(frm.serializeObject());

$.fn.serializeObject = function() {
    var o = {};
    //    var a = this.serializeArray();
    $(this).find('input[type="hidden"], input[type="text"], input[type="password"], input[type="checkbox"]:checked, input[type="radio"]:checked, select').each(function() {
        if ($(this).attr('type') == 'hidden') { //if checkbox is checked do not take the hidden field
            var $parent = $(this).parent();
            var $chb = $parent.find('input[type="checkbox"][name="' + this.name.replace(/\[/g, '\[').replace(/\]/g, '\]') + '"]');
            if ($chb != null) {
                if ($chb.prop('checked')) return;
            }
        }
        if (this.name === null || this.name === undefined || this.name === '')
            return;
        var elemValue = null;
        if ($(this).is('select'))
            elemValue = $(this).find('option:selected').val();
        else elemValue = this.value;
        if (o[this.name] !== undefined) {
            if (!o[this.name].Push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].Push(elemValue || '');
        } else {
            o[this.name] = elemValue || '';
        }
    });
    return o;
}

Mit jQuery und unter Vermeidung von serializeArray serialisiert und sendet der folgende Code die Formulardaten im JSON-Format:

$("#commentsForm").submit(function(event){
    var formJqObj = $("#commentsForm");
    var formDataObj = {};
    (function(){
        formJqObj.find(":input").not("[type='submit']").not("[type='reset']").each(function(){
            var thisInput = $(this);
            formDataObj[thisInput.attr("name")] = thisInput.val();
        });
    })();
    $.ajax({
        type: "POST",
        url: YOUR_URL_HERE,
        data: JSON.stringify(formDataObj),
        contentType: "application/json"
    })
    .done(function(data, textStatus, jqXHR){
        console.log("Ajax completed: " + data);
    })
    .fail(function(jqXHR, textStatus, errorThrown){
        console.log("Ajax problem: " + textStatus + ". " + errorThrown);
    });
    event.preventDefault();
});

Mein Beitrag:

function serializeToJson(serializer){
    var _string = '{';
    for(var ix in serializer)
    {
        var row = serializer[ix];
        _string += '"' + row.name + '":"' + row.value + '",';
    }
    var end =_string.length - 1;
    _string = _string.substr(0, end);
    _string += '}';
    console.log('_string: ', _string);
    return JSON.parse(_string);
}

var params = $('#frmPreguntas input').serializeArray();
params = serializeToJson(params);

Hier ist ein praktisches Plugin dafür: https://github.com/macek/jquery-serialize-object

Das Problem dabei ist:

Wenn Sie über die Kernserialisierung hinausgehen, wird .serializeObject die korrekte Serialisierung für Boolesche Werte und Zahlenwerte unterstützen, was in beiden Fällen zu gültigen Typen führt.

Freuen Sie sich auf diese in> = 2.1.0