webentwicklung-frage-antwort-db.com.de

Serialisieren Sie Formulardaten in JSON

Ich möchte ein Formular in einem Backbone.js Modell vor dem Server validieren. Dazu muss ich die Benutzereingaben aus einem Formular in verwendbare Daten umwandeln. Ich habe drei Methoden gefunden, um dies zu tun:

  1. var input = $("#inputId").val();
  2. var input = $("form.login").serialize();
  3. var input = $("form.login").serializeArray();

Leider bietet keiner von ihnen ein gut realisierbares und entwickelbares JSON-Objekt, das ich benötige. Ich habe bereits mehrere Fragen zu Stack Overflow durchgesehen, aber nur einige zusätzliche Bibliotheken gefunden.

Bietet nderscore.js nicht die aktuelle jQuery oder Backbone.js eine Hilfsmethode?

Ich kann mir nicht vorstellen, dass es keine Anfrage für eine solche Funktion gibt.

HTML

<form class="login">
    <label for="_user_name">username:</label>
    <input type="text" id="_user_name" name="user[name]" value="dev.pus" />
    <label for="_user_pass">password:</label>
    <input type="password" id="_user_pass" name="user[pass]" value="1234" />
    <button type="submit">login</button>
</form>

JavaScript

var formData = $("form.login").serializeObject();
console.log(formData);

Ausgänge

{
    "name": "dev.pus",
    "pass": "1234"
}

Backbone.js Modell

var user = new User(formData);
user.save();
186
dev.pus

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);
187

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

123
Mohammad Adil

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>
52
STEEL

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;
    }
});
41
Maertz

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 ().

26
ryanday

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.

10
user3664916

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.

9
Mitar

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.

8
tothemario

Mit nderscore.js :

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

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"}
5
Johnston

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;
}
5
user1990497

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();
});
3
rbarriuso

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);
2
1986

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

1
Yaxing