2012-03-31 10 views
42

Ich weiß, dass ich in html in eine div mit laden kann:Wie lade ich html in eine Variable mit jquery

$("#my_div").load("http://www.mypage.com"); 

aber ich tun möchte, ist Last html in eine Variable wie:

my_var = load("http://www.mypage.com"); 

Jede Hilfe ist großartig.

Ich möchte jedoch einige Elemente in einer Schleife wie:

HLS.functions.LoadSideModules = function() { 
    HLS.sideModuleContent = new Object(); 
    for(var i = 0; i < HLS.currentModuleConfig.POLICIES.POLICY.length; i++) { 
     for(var y = 0; y < HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE.length; y++) { 
      for(var POS in HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y]) { 
       var item = HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y][POS]; 
       if(!HLS.sideModuleContent[item]) { 
        HLS.sideModuleContent[item] = j.get(HLS.config.K2GETMODULE + HLS.currentModuleConfig.POLICIES.POLICY[i].PAGES.PAGE[y][POS]); 
       } 
      } 
     } 
    } 
}; 

Antwort

68
$.get("http://www.mypage.com", function(my_var) { 
    // my_var contains whatever that request returned 
}); 

Unter jQuery wird eine Ajax-Anfrage starten, die zu der angegebenen URL abfeuert. Es versucht auch intelligent zu erraten, welche Daten empfangen werden (wenn es gültiger HTML-Code ist, den Sie nicht angeben müssen). Wenn Sie einen anderen Datentyp erhalten müssen nur passieren, dass Sie sich als letztes Argument, zum Beispiel

$.get("http://www.mypage.com", function(my_var) { 
    // my_var contains whatever that request returned 
}, 'html'); // or 'text', 'xml', 'more' 

Referenz: .get()

+0

Es funktioniert für mich, zeigt aber Fehler in der Konsole nach dem Laden: "Uncaught SyntaxError: Unexpected Token <". Irgendeine Idee warum? –

26

Sie auch ein Element im Speicher schaffen könnte und verwenden Last() auf sie:

var $div = $('<div>'); 

$div.load('index.php #somediv', function(){ 
    // now $(this) contains #somediv 
}); 

der Vorteil ist, dass Sie, welcher Teil index.php Sie laden möchten durch einen Selektor (#somediv)

1

Beim Erstellen eines neuen Elements angeben ist eine Option, Sie könnten auch ein beliebiges Element klonen. Dies kopiert alle Attribute und die Werte des alten Knotens, wie es heißt, 'exact clone'.

Wenn Sie nur einen bestimmten Abschnitt des HTML kopieren möchten, bietet dies auch die Flexibilität, den gesamten Inhalt innerhalb der bestimmten Elementhierarchie (d. H. Mit allen untergeordneten Elementen) von der abgerufenen Seite auszufüllen.

Zum Beispiel, wenn die Hierarchie -

<div id='mydiv'> 
    <div> 
     <span> 
     ...</span> 
    </div> 
</div> 

//... 

var oldElement = document.getElementById('mydiv'); 
var newElement = oldElement.cloneNode(true); 

/* #selector selects only that particular section & the '> *' enables to copy all of the child nodes under the parent #selector 
Replace URL with the required value 
function specification is optional... */ 

jQuery(newElement).load(URL+'#selector > *'[,function(response, status, xhr){}]); 

//... 

Jetzt können Sie programmatisch die Variable newElement verarbeiten, wie Sie wollen (wie auch nativer JavaScript verwenden, da es ein eigentliches Element ist).

1
function includeHTML_callBack(result){ 
     var my_var = result; 
    } 

    function includeHTML(link, callBack) { 
      var xhttp = new XMLHttpRequest(); 
      xhttp.onreadystatechange = function() { 
      if (this.readyState == 4 && this.status == 200) { 
       callBack(this.responseText); 
      } 
      }  
      xhttp.open("GET", link, true); 
      xhttp.send(); 
      return; 
    } 

    includeHTML("http://www.mypage.com", includeHTML_callBack); 
Verwandte Themen