使用AJAX传递已单击元素的ID时出错

Error passing clicked element's ID with AJAX

本文关键字：ID 出错 元素 单击 AJAX 使用      更新时间：2023-09-26

我试图将单击div的ID传递给特定函数，我遇到了一个奇怪的结果。当错误状态(Error State)被触发(ajax-loader.gif)时，ID将成功地传递给函数，并将其自身填充到启动该循环的DIV中。

但是，我不明白为什么AJAX返回一个未完成的就绪状态。如果我用ID的硬编码名称替换'clicked_id'，它就能正常工作。然而，它证明了ID名称是正确的，因为错误事件是在提供的ID的innerHTML中填充的。

我难住了。什么好主意吗?我肯定这是个新手犯的错误，但我看不出来。

我已经在我的脚本中启动了一个新的XMLHTTPRequest，我只是为了简洁而省略了它。我知道可能有更简单的方法来做到这一点，像jQuery的点击事件，但为了我自己的利益，我想知道为什么这是坏的。

<div class='colour'><img src='media/recipe_save.jpg' id='showtime' onclick='javascript:getServerTime(this.id);'></div>
function getServerTime(clicked_id) {
  var thePage = 'ajax.recipesave.php';
  myRand = parseInt(Math.random()*999999999999999);
  var theURL = thePage +"?rand="+myRand;
  myReq.open("GET", theURL, true);
  myReq.onreadystatechange = theHTTPResponse(clicked_id);
  myReq.send(null);
}
function theHTTPResponse(clicked_id) {
  alert(clicked_id);
  if (myReq.readyState == 4) {
    if(myReq.status == 200) {
       var timeString = myReq.responseXML.getElementsByTagName("timestring")[0];
       document.getElementById(clicked_id).innerHTML = timeString.childNodes[0].nodeValue;
    }
  } else {
    document.getElementById(clicked_id).innerHTML = '<img src="media/ajax-loader.gif"/>';
  }
}

myReq.onreadystatechange需要分配一个函数引用。你不能将执行函数的结果赋值给它，这就是你在这一行所做的:

myReq.onreadystatechange = theHTTPResponse(clicked_id);

这是立即执行theHTTPResponse(clicked_id)并将结果(未定义)赋值给myReq.onreadystatechange。因此，最终没有onreadystatechange的回调。

把上面的行改成:

myReq.onreadystatechange = function() {theHTTPResponse(clicked_id)};

这样，你就给onreadystatechange分配了一个实际的函数，这个函数将在状态改变时被调用，而不是立即调用。

相关文章：