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

Posted 2023-05-09

【中文标题】jquery ajax 链接工作/不工作它随着时间的推移而工作

【英文标题】：jquery ajax links work / not work It works through time

【发布时间】：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 ?
    

【参考方案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
    );
  );
);