Wie lade ich die ajax-Daten in ein div mit jquery?

Ich versuche zu tun ist, laden Sie eine externe html-Seite zeigt dann den Inhalt in ein div, wenn auf eine Schaltfläche geklickt wird.

Bekomme ich die Warnmeldung, dass der Inhalt der test.html jedoch wenn ich versuchen, um es anzuzeigen, die innerhalb eines div-nichts passiert.

Den Inhalt ist nur ein div-tag. Ich will nicht zum laden der div-tag wird nicht nur der text selbst, die sich in der alert-Nachricht.

Innerhalb einer html-Datei, ich weiß, dass ich nicht wirklich brauchen, um ajax verwenden, für etwas so einfach, aber wenn ich das an Arbeit wird es mir helfen, mit zukünftigen Problemen.

      $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
                    step1j = data;
            alert(step1j); //WORKS
            return step1j;
                }
    });


$("#step1").click(function() {
    $("#texter").html(step1j);
});
Sie kann nicht zurückkehren aus einem ajax-call. Sie können den Anruf auf klicken Sie auf, und weisen Sie den html-Code auf Erfolg.

InformationsquelleAutor Codegenesis G | 2014-09-05

  1. 3

    Ajax-Aufrufe asynchron sind standardmäßig so, was Sie haben, nicht funktionieren. Was würde ich vorschlagen, ist die Verwendung von jQuery .load() mit der gesamten lade in einen div-Tag für Sie (jQuery Referenz info hier).

    $("#step1").click(function() {
    $("#texter").load("test.html");
});

    Damit dies funktioniert, müssen folgende Bedingungen erfüllt sein:

    1. #step1 muss vorhanden sein, schon zur Zeit dieser ersten code (z.B. der DOM muss schon geladen werden, installieren Sie die .click() handler. Zum Beispiel, können Sie nicht installieren Sie einen click-Ereignishandler code in die <head> tag, weil die Seite DOM hat noch nicht geladen.
    2. #texter muss vorhanden sein, die zum Zeitpunkt des klicken Sie auf. Bitte stellen Sie sicher, dass es keine Rechtschreibfehler gibt.
    3. Die URL, die Sie laden sollen, müssen den gleichen Ursprung haben (z.B. gleiche domain) als web-Seite, wo Sie die javascript. Dies ist, weil der brower "dieselbe Herkunft" Sicherheit Einschränkungen.

    Lesen diese Antwort wenn Sie mehr darüber erfahren möchten, warum Sie nicht mehr zurück können Daten aus einer asynchronen Ajax-Aufruf wie Sie versucht haben, zu tun. Asynchrone Aufrufe finish einige unbestimmte Zeit später und so ist die einzige zuverlässige Ort, um die Verwendung Ihrer Ergebnisse ist in der Fertigstellung Rückruf oder eine Funktion, die Sie aufrufen, von innerhalb der Abschluss-Rückruf. In diesem Fall .load() ist eine höhere Ebene Stück von jQuery-Funktionen, das macht das einfacher.

    Danke, ich habe es versucht .Last, aber es immer noch nicht aktualisieren die Daten in den div. Muss ich eine variable deklarieren, die mit, hält den Inhalt test.html dann zeigt es?
    wenn Sie Ihre URL ist die gleiche Herkunft wie Ihre Seite (z.B. gleiche domain, port und Protokoll), dann .load() nur, wie ich gezeigt habe, funktioniert es völlig in Ordnung, ganz von selbst. Falls Ihre URL nicht den selben Ursprung haben, dann kann man nicht abrufen, die Inhalte mit ajax, weil der brower "dieselbe Herkunft" Sicherheit Beschränkungen. Wenn Sie laden, die den selben Ursprung haben und es immer noch nicht funktioniert, dann was anderes haben Sie nicht offengelegt werden, ist falsch, weil diese Art der code funktioniert Prima.
    Brauche ich dann noch die ajax-code für diese Arbeit?
    Bitte Lesen Sie die jQuery doc Seite, die ich weiter oben verlinkt und hier wieder. Es ist alles ausgeschrieben da. Wie ich in meiner Antwort .load() werde es tun alles für Sie mit keinen anderen ajax-call. Ist dein div #texter oder #tester wie die typo könnte es zum scheitern?
    Vielen Dank im prüfen Sie jetzt. Ich denke, das problem könnte mit der eigentlichen test.html Datei

    InformationsquelleAutor jfriend00

  2. 0

    Versuchen Sie dies:

    $("#step1").click(function() {

    $.ajax({
      type: "GET",
      url: "test.html",
      dataType: "text",
      success : function(data) {
            $("#texter").html(data);
            //step1j = data;
            //alert(step1j); //WORKS
            //return step1j;
      }
});
});
    Dank ich versuchte dies und ich did ' NT erhalten keine Fehler in der Konsole, aber die Daten wurden noch nicht aktualisiert, div. krank zu halten versuchen. Nochmals vielen Dank
    Setzen Sie sich zurück alert(Daten); bei Erfolg: tut es das laden der html-Code aus test.html wenn Sie auf #step1?
    Ja, wenn ich auf den button der alert(data); funktioniert, aber der div Inhalt dont update. Der name der #tester korrekt ist, sowie die id.
    Ist es #tester #texter?
    texter sorry, war ein Tippfehler

    InformationsquelleAutor artm

Schreibe einen Kommentar