Wie übergebe ich ein Formular und übergebe einige zusätzliche Parameter an eine $ .getJSON Callback-Methode?

Question

Ich weiß, wie einige Parameter zu einer JQuery $ .getJSON Callback-Methode, thanks to this question weitergeben müssen:

$.getJSON('/website/json', 
{ 
    action: "read", 
    record: "1" 
}, 
function(data) { 
    // do something 
}); 

Und ich auch ein Formular zu einer $ .getJSON Callback-Methode einreichen:

$.getJSON('/website/json', $(formName) 
function(data) { 
    // do something 
}); 

Aber Ich möchte einige Parameter übergeben und einige Formularelemente einreichen. Wie kann ich die beiden Dinge miteinander verbinden?

Ich konnte die Formularelemente serialisiert und manuell einige Parameter an die URL hinzufügen, und es sieht aus wie es funktioniert:

$.getJSON('/website/json', 
    'action=read&record=1&' 
    + $(formName).serialize(), 
function(data) { 
    // do something 
}); 

Aber es sieht nicht sehr elegant. Ist das der richtige Weg, oder gibt es einen besseren Weg?

Answer 1

Wir könnten die Funktionalität demonstrated in this answer als benutzerdefinierte jQuery Instanzmethode implementieren, die sich von einer Form, um ein Objekt von Schlüssel/Wert-Paare erzeugt und kombiniert sie mit den Eigenschaften, die nicht von der Form ableiten:

$.fn.formObject = function (obj) { 
    obj = obj || {}; 
    $.each(this.serializeArray(), function (_, kv) { 
     obj[kv.name] = kv.value; 
    }); 
    return obj; 
}; 

$.getJSON('/website/json', $(formName).formObject({ 
    action: "read", 
    record: "1" 
}), function(data) { 
    // do something 
}); 

Answer 2

Erstellen Sie einen Ajax-Post, um die Daten an den Server zu senden. Rufen Sie die Parameterdaten im Backend-Code zusammen mit den Formulardaten ab.

var formData = {data from form}; 

formData.action = 'read'; 
formData.post = '1'; 

$.ajax({ 
    url: '/website/json', 
    type: "post", 
    data: formData 
}).done(function (data) { 
    // remove prior values set upon request response 

    formData.action = null; 
    formData.post = null; 
});