Question

我在服务器上有一个文件，里面有一个计数器。单击链接时，我向a php文件发送ajax请求，该文件会增加文件中的计数器。问题是，文件已创建，但计数器没有增加。

当我直接执行ajax文件时，计数器会递增。你明白为什么会出现这种情况吗？

链接：

<p><a onclick="incCounter('TL1');" href="index.html">Dies ist Testlink1</a></p>
<p><a onclick="incCounter('TL2');" href="index.html">Dies ist Testlink2</a></p>

ajax请求：

function incCounter(element)
  {    
    xhr = new XMLHttpRequest();
    xhr.open("GET","incCounter.php?e="+element,true);
    xhr.send();
  }

ajax文件：

  $element = $_GET["e"];
  //$element = "testdatei";
  $filename = "clickcounter\\".$element.".txt";
  $counter = 1;

  if(file_exists($filename))
  {
    //counter holen und inkrementieren
    $file = fopen($filename,"r");
    $counter = fgets($file);
    $counter++;
    fclose($file);
  }

  //datei ggfs. leeren und neuen counter schreiben
  $file = fopen($filename,"w");
  fwrite($file,$counter);
  fclose($file)

问题编辑：好的......这是什么？我将alert("test");添加到ajax请求中，以确保每次单击链接时都会执行该函数。现在它有效。每次我点击链接，计数器都会递增。但现在每次警报出现时。当我删除此行时，它不再起作用。有人理解吗？

Answer 1

单击超链接时，浏览器的默认行为是遵循指向新页面的超链接。您的ajax无法完成请求。要修复它，您需要阻止默认行为。这样就可以了：

<p><a class="incCounter" onclick="incCounter('TL1');" href="#">Dies ist Testlink1</a></p>
<p><a class="incCounter" onclick="incCounter('TL2','index.html');" href="#">Dies ist Testlink2</a></p>

JS：

/* Get the hyperlinks */
var counterLinks = document.getElementsByClassName('incCounter');

/* Add event listener to each hyperlink */
for (var i = 0; i < counterLinks.length; i++) {
    counterLinks[i].addEventListener("click", function(event){
        event.preventDefault();
    });
}

function incCounter(element, url = ''){    
    xhr = new XMLHttpRequest();
    xhr.open("GET","incCounter.php?e="+element,true);
    xhr.send();

    if(url != ''){
        window.location.href = url;
    }
}

如您所见，您可以将第二个参数传递给您的函数，该参数将在发送ajax后浏览到另一个网站或页面。这是可选的。

文件中的计数器不会增加

1 个答案: