ファイル内のカウンターがインクリメントされません

Question

サーバー上にカウンターがあるファイルがあります。 リンクをクリックすると、ファイル内のカウンタをインクリメントする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) 

質問編集： わかりました...これは何？ ajaxリクエストにalert("test");を追加して、リンクをクリックするたびに関数が実行されるようにしました。今それは動作します。カウンターが増分されるたびにリンクをクリックします。しかし今は毎回アラートが表示されます。この行を削除すると、もう動作しません。誰もそれを理解していますか？

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が送信された後に、別のウェブサイトやページを閲覧しますあなたの関数の2番目のパラメータを渡すことができますこれは、トリックを行います。これはオプションです。