JavaScript AJAX-Funktion - Inhalt aus Textarea erhalten?

[Dsimon24]

Hallo zusammen,

ich versuche gerade eine AJAX-Funktion zu realisieren.
Grundsätzlich sollte diese auch funktionieren - leider erhalte ich aber an Stelle des Inhaltes
einer Textarea ein komplettes Objekt ausgegeben. Dies kann ich nicht nachvollziehen -
vielleicht kann mir das einer erklären?

Textarea mit der ID:

<textarea class="edit_int ajax_request font-max" id="interview_2" name="interview_2" cols="10" rows="9">Den Text möchte ich erhalten...</textarea>

Javascript:

  $(document).ready(function()
  {
    $(".ajax_request").click(function()
    {
      var ID = $(this).attr('id');
    }).change(function()
    {
      var ID = $(this).attr('id');
      var IID = document.getElementById("iid").value;
      var data = document.getElementById('interview_2').value;
      var dataString = 'id=' + IID + '&field=' + ID + '&value=' + data;

      $.ajax({
        type: "POST",
        url: "bull.php",
        data: dataString,
        cache: false,
        success: function(html)
        {
          console.log(data);
        },
        error: function(data)
        {
          console.log(data);
        }
      });

    });

  });

Im Log(data) erhalte ich dann nicht den Text der Textarea,
sondern ein Objekt. Mache ich da was falsch?

 

[Knito]

versuch mal
var data = document.getElementById("interview_2").value;

 

[Dsimon24]

Im Log erhalte ich dann immer diese Ausgabe

{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}

 

[der-graph]

Könnte es sein, dass hier ein paar Variablen durcheinander kommen?

Mach mal z.B. aus

var data = document.getElementById('interview_2').value;

var content = document.getElementById('interview_2').value;

Unten in deiner success-Funktion hast du als Rückgabe dann (html) angegeben, fragst aber drunter als Log-Ausgabe nach (data) - wie im error Teil.

Willst du einfach nur den inhalt des textarea-Feldes ausgeben, dann sollte das mit

console.log(content)

bzw.

console.log(document.getElementById('interview_2').value)

möglich sein. Wenn du das Ergebnis deiner ajax-Abfrage willst sollte das

console.log(html)

lauten.

 

[ayngush]

Schau mal unter https://api.jquery.com/jQuery.ajax/ auf den gelb hervorgehobenen Absatz

Deprecation Notice: The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are removed as of jQuery 3.0. You can use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

Und die paar Teile darüber.

Dann wird auch klarer, warum du beim console.log(data) ein "jqXHR" Objekt anstelle des erwartet Textinhaltes zurück bekommst

Und beschäftige dich unbedingt nochmal mit dem Scope von Variablen und Parametern bei Javascript. https://www.w3schools.com/js/js_scope.asp

 

[mastaqz]

Oder lern gleich was mit Zukunft und nutz die Fetch API mit async/await, try/catch etc.

 

[ayngush]

Die Fetch-API ist cool und wird auch die Zukunft aber Stand 2019 ist sie in einem entscheidenden Punkt noch zu beschränkt, sodass man ohne Async XMLHTTPRequest mit Promises (und dafür verkürzt auch oftmals noch jQUery $.ajax()) nicht gänzlich auskommt: Mit der Fetch-API kann man keinen Upload-Progress umsetzen.

Abgesehen davon: Erst mit dem nächsten Major fliegt jQuery aus Twitters Bootstrap Framework raus und verwendet dann auch offiziell "vanilla" JS. Das ist für viele ein Grund aktuell noch auf jQuery zu setzen, wenn man wegen Bootstrap die Lib ohnehin noch laden muss, wenn man das offizielle stable Build verwenden möchte. Und Bootstrap ist sehr weit verbreitet.

 

[Darrel]

#5 beinhaltet schon alle relevanten Hinweise: Wenn man .success und .error mit .done() und .fail() ersetzt und die Scope-Probleme löst, dann funktioniert das einwandfrei.

Momentan schadet es absolut nicht fetch UND die "alte" Lösung mit XMLHTTPRequest zu können. Nur weil es eine neuen (und oftmals verbesserten) Ansatz gibt, verschwindet Legacy-Code außerdem nicht. Ohne zu wissen für welchen Zweck jemand den Code braucht, finde ich es immer schade, wenn man keine Lösung bietet und nur sagt: "Nimm das Neue".