JS So erhalten Sie den Wert des eingebetteten Elements nach der Verwendung von AJAX

Hier ist mein Problem. Ich habe externe Datei include.html, die ich mit $ .ajax laden und an den Körper anhängen. Inhalt des include.html:JS So erhalten Sie den Wert des eingebetteten Elements nach der Verwendung von AJAX

<p id="descriptionText">My description</p>

Ich mag Wert von p # Description erhalten, nachdem Ajax abgeschlossen, aber als Ergebnis sehe ich "undefined"

<!DOCTYPE html> 
<html lang="en"> 
<head>  
<meta charset="UTF-8"> 
    <title>AJAX</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" 
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <script> 
     $(document).ready(function() { 
      $.ajax({ 
       url: "include.html", 
       dataType: "html", 
      }).done(function (response) { 
       $('body').html(response); 
      }); 

      console.log($('#descriptionText').val()); 
     }); 
    </script> 
</head> 
<body> 

</body> 
</html>

Ergebnis ist die gleiche, auch wenn i versuche den Verschluss zu benutzen. Beispiel unten.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>AJAX</title> 
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" 
      integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> 
    <script> 
     function func() { 
      $.ajax({ 
       url: "include.html", 
       dataType: "html", 
      }).done(function (response) { 
       $('body').html(response); 
      }); 

      return function() { 
       console.log($('#descriptionText').val()); 
      } 
     } 

     func()(); 
    </script> 
</head> 
<body> 

</body> 
</html>

Wenn i async: false Parameter in $.ajax verwenden funktioniert es, aber ich brauche genau asynchron. Was ist mein Problem? Vielen Dank!

Quelle

2016-08-03 Grey13

Sie warten nicht auf $ .ajax, um den Anruf zu beenden. Sie können versuchen, einen benutzerdefinierten Rückruf zu verwenden. –

Mögliches Duplikat von [Wie gebe ich die Antwort von einem asynchronen Anruf zurück?] (Http://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) –

Oder http://stackoverflow.com/questions/9466241/selecting-dom-elements-after-html-was-inserted-in-a-page-with-ajax –

Auf den Punkt gebracht: Bewegen console.log($('#descriptionText').val()); in den .done() Rückruf des $.ajax()

wie :

.done(function (response) { 
    $('body').html(response); 
    console.log($('#descriptionText').val()); 
});

Erläuterung:

.done() ist der Erfolgsrückruf, wenn das Versprechen aufgelöst wird. Eine Zusage im asynchronen Land bedeutet, dass der Code zu einem späteren Zeitpunkt als dem aktuellen Tick der Uhr ausgeführt wird. Ihr console.log wird in diesem Moment ausgeführt und wird daher immer undefiniert sein, da das Versprechen noch nicht gelöst wurde.

Also, ist zu beachten, dass Ihre console.log ausgeführt wird, nachdem das Versprechen gelöst wurde. Tun Sie dies auf viele mögliche Arten, ein einfaches Wesen, wie ich bereits erwähnt habe: Verschieben Sie die Anweisung innerhalb der .done(), nachdem Sie die .html() DOM-Manipulation ausgeführt haben.

Quelle

2016-08-03 21:10:37 Iceman

Sie vermasseln mit asynchronen Flow. Verschieben Sie die Ausgabe in einen asynchronen Rückruf. Wie folgt:

$(document).ready(function() { 
    $.ajax({ 
     url: "include.html", 
     dataType: "html", 
    }).done(function (response) { 
     $('body').html(response); 
     console.log($('#descriptionText').val()); 
    }); 
});

Quelle

2016-08-03 21:09:07 Nosyara

Das Problem bezieht sich tatsächlich auf asynchrone Codeausführung. Diese Zeile:

 console.log($('#descriptionText').val());

... führt vor dies ausführt:

  $('body').html(response);

Das liegt daran, dass die Callback-Funktion, die Sie .done liefern asynchron ausgeführt wird, wenn die Ajax Antwort empfangen wurde, und JavaScript liest die Ereigniswarteschlange, um zu sehen, was als nächstes ausgeführt werden muss. Dies geschieht jedoch nur, wenn der aktuell ausgeführte Code abgeschlossen ist (d. H. Der Aufrufstapel ist geleert).

Also ... dieses Problem zu lösen, müssen Sie Ihren Code innerhalb des done Rückruf bewegen:

 }).done(function (response) { 
      $('body').html(response); 
      console.log($('#descriptionText').val()); 
     });

Quelle

2016-08-03 21:09:14 trincot

Daher ist der Rückruf, bei dem Sie die Antwort an den Nachrichtentext anhängen, der einzige Abschnitt Ihres Codes, der darauf wartet, dass die Anforderung abgeschlossen wird. daher ist die Funktion definiert mit .done(...).

Wenn Sie Ihren Code zu dieser Funktion hinzufügen, wird es funktionieren.

.done(function (response) { 
    $('body').html(response); 
    console.log($('#descriptionText').val()); 
});

Quelle

2016-08-03 21:10:41 thedarklord47

JS So erhalten Sie den Wert des eingebetteten Elements nach der Verwendung von AJAX

Antwort

Verwandte Themen