jquery ajax 链接工作/不工作它随着时间的推移而工作答案

【问题标题】：jquery ajax links work / not work It works through timejquery ajax 链接工作/不工作它随着时间的推移而工作
【发布时间】：2016-10-23 18:11:16
【问题描述】：

请帮忙，我明白为什么 ajax 链接在点击时有效或无效？它会随着时间的推移而起作用

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 ?
    }
}

【问题讨论】：

标签： javascript php jquery jquery-ui jquery-plugins

【解决方案1】：

据我从您现有的代码中可以看出，您正在尝试将点击处理程序绑定到 all 锚元素，这将对href 属性中的 URL 发出 Ajax 请求，并在id="wrapper1" 元素中显示结果。

您的代码在没有任何缩进的情况下有点令人困惑，但它看起来基本没问题，除了您尝试使用 Ajax 响应而不等待 onreadystatechange event - 您需要包装它处理程序中的if(xmlhttp.status)... 行如下：

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

另外，这一行：

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

... 不正确，因为 addEventListener() 期望函数引用作为其第二个参数，而且当您已经通过 .onclick = ... 在元素上设置点击处理程序时调用它根本没有意义.

鉴于您已使用 jQuery 标记您的问题，这里有一个更短的替代实现：

$(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
    });
  });
});

【讨论】：