[Jquery] Formulardaten in JSON serialisieren



Answers

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>

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

Question

Diese Frage hat hier bereits eine Antwort:

Ich möchte eine Pre-Server-Validierung eines Formulars in einem Backbone.js Modell durchführen. Um dies zu tun, muss ich die Benutzereingabe von einem Formular in brauchbare Daten bringen. Ich habe dafür drei Methoden gefunden:

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

Leider stellt keines der vorhandenen ein brauchbares und entwicklungsfähiges JSON-Objekt zur Verfügung. Ich habe bereits einige Fragen zu durchgesehen, aber ich habe nur einige zusätzliche Bibliotheken gefunden.

Bietet Underscore.js , die aktuelle jQuery oder Backbone.js keine 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();



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

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

Ich verwende Underscore.js hier.




Verwenden von Underscore.js :

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



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

Das Problem dafür ist:

Im weiteren Verlauf unterstützt serializeObject zusätzlich zur Core-Serialisierung die korrekte Serialisierung von Booleschen Werten und Zahlenwerten, was in beiden Fällen zu gültigen Werten führt.

Freuen Sie sich auf diese in> = 2.1.0




Benutzen:

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



Wenn Sie jQuery verwenden und serializeArray vermeiden, wird der folgende Code serialisiert und sendet 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();
});



Wenn Sie das Formular mit JSON senden, müssen Sie [] in der sendenden Zeichenfolge entfernen. Sie können das 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;
}





Links