"Dynamischen" AJAX Post

[AxelM]

Hallo,
Ich habe etliche Felder, die ich bei einer Veränderung als POST versenden möchte.
Dazu habe ich mir ein wenig jQuery zusammenkopiert und fand eigentlich auch, dass die Idee so übel nicht ist

Nun findet die Console leider, dass ich die schleife dort nicht verwenden darf.
wie könnte ich das denn lösen, dass nun jedes feld, das die Klasse send hat auch gesendet wird?

$('.send').change(function(e){
      
        $.post("ajax.php",
        {
            $(".send").each(function() {
            $(this).attr('id') : $(this).val());
            });
        },
        function(data, status){
            console.log("Data: " + data + "\nStatus: " + status);
        });  
    })

 

[webcasi]

Hallo,
welche Console befindet das? und welche Schleife meinst Du genau?

 

[Myhar]

Die Console des Browser. Und er meint die .each Schleife.

Dein Denkansatz ist hier ein falscher, du kannst hier keine Schleife verwenden, da du nur einen ajax request absetzt.
Was genau soll wie/wann passieren. Also wann soll welcher ajax request abgesetzt werden?

 

[AxelM]

Zunächst mal sollen nur die Daten abgeschickt werden.

Im Anschluss würden dann ein paar Dropdowns neu befüllt werden.

 

[Myhar]

Klar, bei einem ajax request werden Daten abgeschickt. Das ist, wie wenn ich dich frage: Was für ein Auto brauchst du, soll es ein Familienvan oder ein Sportauto sein und du antwortest "Ja, erst mal soll damit nur gefahren werden."

Da kann ich dich dann auch nur auf die Doku verweisen:
http://api.jquery.com/jquery.ajax/

Hier siehst du, welche Parameter du übergeben kannst und auch, warum eine Schleife hier technisch nicht möglich ist.
Zum "zunächst mal sollen nur die Daten abgeschickt werden" lautet die Antwort dann also:

$.ajax({
  method: "POST",
  url: "ajax.php",
  data: { name: "John", location: "Boston" }
})
  .done(function( msg ) {
    console.log( "Data Saved: " + msg ); //hier ist schon die Antwort, das hat mit den eigentlichen "nur senden" nichts zu tun. 
  })

 

[AxelM]

Die Frage ist ja eigentlich auch nur, was tu ich STATT der schleife, um in dem Teil alle Felder der Klasse .send zu setzen, ohne diese von Hand einzutragen?

 

[Myhar]

Womit wir wieder bei meiner ersten Frage wären: Was genau willst du wohin abschicken? In der Schleife, die du oben gepostet hast, machst du im Prinzip eigentlich gar nichts, du durchläufst einfach alle Elemente einmal, machst damit aber nichts.

Ich habe das Gefühl, dass es hier ein grundlegendes Verständnisproblem von jquery, javascript, ajax gibt. Dabei kann ich dir aber nicht helfen, wenn du nicht konkret beschreibst, was du eigentlich genau vorhast. Anders formuliert: Aus dem Code den du gepostet hast wird nicht ersichtlich, was genau du an Daten schicken willst.

 

[AxelM]

Ich habe einen Haufen input felder (textfelder, dropdowns, textarea).
Die Anzahl und Art der Felder wird durch weitere äußere Bedingungen bestimmt (ist also dynamisch).
Was diese Felder alle gemeinsam haben: die klasse "send".
Nun würde ich das gerne so machen, dass (ohne die genauen Felder zu kennen) die inhalt aller Felder las POST request nach dem motto id => value an die ajax.php gesendet werden.
Daher meine Idee mit dem foreach. Das geht ja aber leider nicht
Ich suche also einen Weg diese felder in den Post bereich zu bekommen.

 

[Myhar]

Danke für die verständliche Erklärung, jetzt kann man dir auch helfen.

Du musst deine zu sendenden Daten vor dem ajax-request aufbauen und dann dem request übergeben, hier mal ein Grundgerüst. Ich erstelle hier lediglich einen String, aber du kannst hier natürlich jede Datenstruktur erstellen die dein ajax.php erfordert und verarbeiten kann:

//hier erstellst und füllst du deine Variable mit allen Daten
const ajaxData; 
 $(".send").each(function() {
    ajaxData + = $(this).attr('id');
});

$.ajax({
  method: "POST",
  url: "ajax.php",
  data: ajaxData //hier übergibst du die Daten an deinen ajax-request
})
  .done(function( msg ) {
    console.log( "Data Saved: " + msg ); //hier ist schon die Antwort, das hat mit den eigentlichen "nur senden" nichts zu tun.
  })

Diesen Beispielcode kannst du jetzt in deine $('.send').on('change', function() { ... }); packen.

 

[webcasi]

Hallo,
ich hatte ähnliche Probleme, die ich mit Hilfe dieses Eintrags lösen konnte.
Vielen Dank an die vielen Posts, die auch anderen helfen können.

 

[K-Dawg]

Hallo AxelM,
Ich gehe einfach mal davon aus, dass deine send klasse teil eines Forumulares ist.
Du kannst alle felder eines Formulares ganz einfach mit serialize an dein ajax endpoint senden.

$('#form').on('submit', function(e) {
    e.preventDefault(); // Formular absenden verhindern und per JS verarbeiten

    $.ajax({
        method: 'post',
        url: 'ajax.php',
        data: $(this).serialize(), // this bezieht sich auf das Formular
    }).done(function(result) {
        // Hier kannst du alles nach dem ajax verarbeiten.
    }).fail(function(xhr) {
        // Hier kannst du eine eventuelle Fehlermeldung vom server verarbeiten
    });
});

Die Daten welche an den Server gesendet werden kannst du in PHP ganz normal mit dem $_POST array verarbeiten.