So erhalten Sie jQuery AJAX zum Posten .map function var Wert als JSON Zeichenfolge

Question

Im Beispiel der Option A unten, das PHP Skript Post Ergebnis undefined angegeben, wenn die Post-Daten Echo. Aber zur gleichen Zeit die console.log Anzeigen: [Object { set_capture="resize", set_unknown="unknown"}]. Ich würde gerne wissen, was ist falsch mit der .map Funktion oder der ajax Code in Option A? Für Option B funktioniert es gut nach dem Entfernen der .map Funktion. Was vermisse ich ?

HTML Form:

<form action="myphp.php" method="post" name="form-foo"> 
    <input type="radio" id="r1" class="set-img" name="set_capture" value="resize" /> 
    <input type="radio" id="r2" class="set-img" name="set_capture" value="original" /> 
    <input type="checkbox" id="r3" class="set-img" name="set_unknown" value="unknown" /> 
    <input type="submit" id="submit" name="submit" value="Save" /> 
</form> 

Eine Option:

$(function() { 
    $("#submit").on("click", function() { 
    var radioValues = $('#form-foo').map(function() { 
     return { 
     set_capture: $('input[name="set_capture"]:checked').val(), 
     set_unknown: $('input[name="set_unknown"]:checked').val() 
     }; 
    }).get(); 
    console.log(radioValues); 
    //var formData = JSON.stringify(radioValues); 
    var formData = radioValues; 
    var formURL = $("#form-foo").attr("action"); 
    console.log(formData); 
    $.ajax({ 
     url: formURL, 
     type: "POST", 
     data: formData, 
     cache: false, 
     dataType: "json" 
    }).done(function(data) { 
     // more codes 
    }, "json"); 
    return false; 
    }); 
}); 

Option B:

$(function() { 
    $("#submit").on("click", function() { 
    var capture = $('input[name="set_capture"]:checked').val(); 
    var unknown = $('input[name="set_unknown"]:checked').val(); 
    var formData = { 
     set_capture: capture, 
     set_unknown: unknown 
    }; 
    var formURL = $("#form-foo").attr("action"); 
    console.log(formData); 
    $.ajax({ 
     url: formURL, 
     type: "POST", 
     data: formData, 
     cache: false, 
     dataType: "json" 
    }).done(function(data) { 
     // more codes 
    }, "json"); 
    return false; 
    }); 
}); 

Answer 1

Ajax data muss Array sein. EX: {"capture": 123, "unknow": 456}.

Mit Option A: formData ist [Objekt] nicht Array, so dass es nicht funktioniert.

Mit meinem Wissen, tut mir leid, wenn das falsch ist!

Answer 2

.map wird immer als Array zurückgegeben .Ajax Datenformat ist Objekt {} So wird es undefined in Ihrem POST. Zu lösen, dass Sie Index 0 von formdata

$.ajax({ 
     url: formURL, 
     type: "POST", 
     data: formData[0], //here add index 0 
     cache: false, 
     dataType: "json" 
    }).done(function(data) { 
     // more codes 
    }, "json"); 
    return false; 
    }); 

Hinweis hinzufügen müssen: Daten werden nie undefinierten Wert an den Server senden Sie passieren, wenn Sie also nicht Ihre Eingabe oder Checkbox hat zu überprüfen, es wird nichts posten .. .