ajax 的问题只工作一次答案

【问题标题】：Problem with ajax only working onceajax 的问题只工作一次
【发布时间】：2012-09-27 05:01:02
【问题描述】：

AJAX 只能工作一次，我必须重新加载页面才能再次工作。我该如何解决这个问题？

echo "<div class='unsubscribe'><a id='us$id' href='javascript:unsubscribe($id);'><img src='/unsubscribe.jpg' alt='unsubscribe' /></a></div>";



function unsubscribe(number)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("us"+number).innerHTML="<img src='/subscribe.jpg' alt='subscribe' />";
    }
  }
xmlhttp.open("GET","/unsubscribe.php?id="+number,true);
xmlhttp.send();
}

【问题讨论】：

我建议学习 firebug 或 chrome 开发者工具来看看这里到底发生了什么 - 你可以检查网络请求，查看 javascript 异常，设置断点，并通过代码来寻找问题。
如果您对新技术持开放态度，我强烈建议您使用jQuery 来制作您的ajax calls。它看起来像这样：$.get("/unsubscribe.php?id="+number);

标签： javascript ajax

【解决方案1】：

更改您的 HTML：使用 onClick 处理程序而不是 href：

<a id='us$id' href="#" onclick="unsubscribe($id);">

这确保了操作发生在点击时，但不会重定向浏览器的目标页面（这就是为什么你的函数目前只会触发一次）。

根据您的页面布局，当点击发生时，您可能会发现上述结果会导致页面“抖动” - 如果是这样，您可以尝试从点击处理程序返回 false：

<a id='us$id' href="#" onclick="unsubscribe($id); return false;">

【讨论】：

【解决方案2】：

我认为 us$id 和 $id 的名称有问题。如果您不使用 jQuery，那么 $ 符号没什么特别的，它是一个普通字符。所以，us$id 和$id 是不相关的，$id 只是us$id 的子串。因此，unsubscribe($id) 使用未定义的参数调用。如果您想替换us$id 下的图像，那么这将不起作用，因为getElementById("us"+number) 将找不到该元素。

【讨论】：

【解决方案3】：

移动xmlhttp.open("GET","/unsubscribe.php?id="+number,true);在 xmlhttp.onreadystatechange=function() 行之前。

这里是ajax顺序：

打开（）
onreadystatechange
发送()

【讨论】：