2016-06-22 3 views
0

pls Hilfe, verstehe ich, warum Ajax Link arbeiten oder nicht funktionieren, wenn klicken? Es funktioniert durch die Zeitjquery Ajax Links arbeiten/nicht arbeiten Es funktioniert durch die Zeit

window.onload = function(){ 
    function getXmlHttp(){ 
     ...... // simply ajax 
    } 
    var cont = document.getElementById('wrapper1'); 
    var As = document.getElementsByTagName("A"); // get links 
    for(var i = 0, l = As.length; i < l; i ++){ 
     As[i].onclick = function(href){ // code 
      As[i].addEventListener('click', false); // code 
      return function(e){ 
       e.preventDefault(); 
       var xmlhttp = getXmlHttp() 
       xmlhttp.open('GET', href, false); 
       xmlhttp.send(null); 
       if(xmlhttp.status == 200) {cont.innerHTML = xmlhttp.responseText;} 
      } 
     }(As[i].href); 

     As[i].href = "javascript: void 0"; // right code ? 
    } 
} 

Antwort

0

Soweit ich aus dem vorhandenen Code sagen kann, versuchen Sie einen Klick-Handler alle Ankerelemente zu binden, die in den href eine Ajax-Anfrage an die URL machen Attribut und zeigt die Ergebnisse im id="wrapper1" Element an.

Ihr Code ist ein wenig verwirrend ohne Einrücken, aber es sieht meistens OK, außer dass Sie versuchen, die Verwendung der Ajax Antwort ohne wartet auf die onreadystatechange event zu machen - Sie, dass if(xmlhttp.status)... Linie in einem Handler wickeln müssen als folgt: auch

var xmlhttp = getXmlHttp() 
xmlhttp.open('GET', href, false); 
xmlhttp.send(null); 
xmlhttp.onreadystatechange = function() { // <---- add this 
    if(xmlhttp.status == 200) {cont.innerHTML = xmlhttp.responseText;} 
}; 

, diese Zeile:

As[i].addEventListener('click', false); 

... ist falsch, da addEventListener() eine Funktionsreferenz als zweites Argument erwartet, ein Und es macht auch keinen Sinn, es überhaupt aufzurufen, wenn Sie bereits einen Click-Handler auf das Element über .onclick = ... setzen.

gegeben haben Sie Ihre Frage mit jQuery markiert, hier ist eine alternative Implementierung, die durchaus etwas kürzer ist:

$(document).ready(function() {   // when DOM is ready 
    var $cont = $("#wrapper1");   // save reference to output element 

    $("a").click(function(e) {    // bind click to all anchors 
    e.preventDefault();     // prevent default click behavior 
    $.get(this.href, function(result) { // Ajax get request to href URL 
     $cont.html(result);    // put result in output element 
    }); 
    }); 
}); 
+0

nicht, wie die gesamte Seite zu aktualisieren, nur einen Block? – Alexey

+0

Dieser Code sollte nur das Element # wrapper1 aktualisieren. – nnnnnn

Verwandte Themen