jQuery post () mit Serialisierung und zusätzlichen Daten

Ich versuche herauszufinden, ob es möglich ist, serialize()Daten und andere Daten außerhalb des Formulars zu veröffentlichen.

Hier ist, was ich dachte, würde funktionieren, aber es sendet nur 'wordlist'und nicht die Formulardaten.

$.post("page.php",( $('#myForm').serialize(), { 'wordlist': wordlist }));

Hat jemand irgendwelche Ideen?

Sie können serializeArray ^{[docs] verwenden} und die zusätzlichen Daten hinzufügen:

var data = $('#myForm').serializeArray();
data.push({name: 'wordlist', value: wordlist});

$.post("page.php", data);

Versuchen Sie $ .param

$.post("page.php",( $('#myForm').serialize()+'&'+$.param({ 'wordlist': wordlist })));

Eine alternative Lösung für den Fall, dass Sie dies beim Hochladen einer Ajax-Datei tun müssen:

var data = new FormData( $('#form')[0] ).append( 'name' , value );

ODER noch einfacher.

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

    e.preventDefault();
    var data = new FormData( this ).append('name', value );

    // ... your ajax code here ...

    return false;

});

Wenn Sie den Formulardaten ein Javascript-Objekt hinzufügen möchten, können Sie den folgenden Code verwenden

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeArray();
for (var key in data) {
    if (data.hasOwnProperty(key)) {
        postData.push({name:key, value:data[key]});
    }
}
$.post(url, postData, function(){});

Wenn Sie die Methode serializeObject () hinzufügen , können Sie Folgendes tun

var data = {name1: 'value1', name2: 'value2'};
var postData = $('#my-form').serializeObject();
$.extend(postData, data);
$.post(url, postData, function(){});

In der neuen Version von jquery könnte dies über die folgenden Schritte erfolgen:

• Holen Sie sich das Param-Array über serializeArray()
• Aufruf push()oder ähnliche Methoden, um dem Array zusätzliche Parameter hinzuzufügen,
• Aufruf $.param(arr), um eine serialisierte Zeichenfolge abzurufen, die als Parameter von jquery ajax verwendet werden datakann.

Beispielcode:

var paramArr = $("#loginForm").serializeArray();
paramArr.push( {name:'size', value:7} );
$.post("rest/account/login", $.param(paramArr), function(result) {
    // ...
}

$.ajax({    
    type: 'POST',  
    url: 'test.php',  
    data:$("#Test-form").serialize(),  
    dataType:'json',
     beforeSend:function(xhr, settings){
     settings.data += '&moreinfo=MoreData';
     },
    success:function(data){
            //  json response  
    },
    error: function(data) { 
        // if error occured
    }
    });

Das Formular könnte die zusätzlichen Daten als ausgeblendete Felder enthalten, die Sie unmittelbar vor dem Senden der AJAX-Anforderung an die entsprechenden Werte festlegen würden.

Eine andere Möglichkeit besteht darin, dieses kleine Juwel zu verwenden, um Ihr Formular in ein Javascript-Objekt (anstelle einer Zeichenfolge) zu serialisieren und die fehlenden Daten hinzuzufügen:

var data = $('#myForm').serializeObject();
// now add some additional stuff
data['wordlist'] = wordlist;
$.post('/page.php', data);

Sie können dies verwenden

var data = $("#myForm").serialize();
data += '&moreinfo='+JSON.stringify(wordlist);

Ich mag es, Objekte als Objekte zu behalten und keine verrückten Typverschiebungen zu machen. Hier ist mein Weg

var post_vars = $('#my-form').serializeArray();
$.ajax({
  url: '//site.com/script.php',
  method: 'POST',
  data: post_vars,
  complete: function() {
    $.ajax({
      url: '//site.com/script2.php',
      method: 'POST',
      data: post_vars.concat({
        name: 'EXTRA_VAR',
        value: 'WOW THIS WORKS!'
      })
    });
  }
});

Wenn Sie von oben nicht sehen können, habe ich die .concat-Funktion verwendet und ein Objekt mit der Post-Variablen als 'Name' und dem Wert als 'Wert' übergeben!

Hoffe das hilft.