AJAXはページを再読み込みしません

Question

私はAJAXを初めて使用しており、ボタンをクリックすることでAJAXを起動することができません。スタックオーバーフローで見つかったすべてのソリューションはJQuery構文を使用していますが、JavaScriptとJSONを使用してブラウザにデータを返して表示することが任されています。皮肉なことに、データが問題なくMySQLデータベースに送信されたときに動作しています。 AJAXの起動は主な問題です。

ユーザーが新しいデータを入力するたびに、同じ画面にデータを読み込もうとしています。すべてが機能しており、エラーは検出されませんが、AJAXはイベントを発生させません。

はここでAJAXコードです：

function addNewEntry() { 

var today = document.getElementById("dateoflogId").value; 
var log = document.getElementById("logdescId").value; 
var status = document.getElementById("successworkId").value; 

if ((today === null || today === '') || 
     (log === null || log === '') || 
     (status === null || status === '')) { 
    alert("Fields cannot be blank. Please fill in the blanks."); 
    return false; 
} 

var request = new XMLHttpRequest(); 
request.onreadystatechange = function() { 
    if (request.readyState == 4 && request.status == 200) { 
     var text = request.responseText; 
     var json = JSON.parse(text); 
     var table = document.getElementById("tblLogEntry"); 

     var newRow = table.insertRow(1); 

     var newCell = newRow.insertCell(0); 
     newCell.innerHTML = json.dateoflog; 

     newCell = newRow.insertCell(1); 
     newCell.innerHTML = json.logdesc; 

     newCell = newRow.insertCell(2); 
     newCell.innerHTML = json.successwork;    
    } 
} 

request.open("POST", "LogEntryFile.php", true); 
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");  
request.send("dateoflog=" + today + "&logdesc=" + log + "&successwork=" + status); 

document.getElementById("dateoflogId").value = ""; 
document.getElementById("logdescId").value = ""; 
document.getElementById("successworkId").value = ""; 
} 

PHPのWebページのスニペット（LogEntry.php）：

<section id="formEntry"> 
      <h2>New Log Entry</h2> 
      <form id="logentry" name="logentry" action="LogEntry.php" method="post"> 
       <fieldset> 
        <table> 
          <th class="fieldHeader dateCol">Date</th> 
          <th class="fieldHeader">Training</th> 
          <th class="fieldHeader successCol">Success?</th> 
          <tr> 
           <td class="inputField"><input id="dateoflogId" type="text" name="dateoflog" form="logentry" size="15" maxlength="15"></td> 
           <td class="inputField"><input id="logdescId" type="text" name="logdesc" form="logentry" size="50" maxlength="50"></td> 
           <td> 
            <select id="successworkId" class="styleDropDownList" name="successwork"> 
             <option value="">Select:</option> 
             <option value="Yes">Yes</option> 
             <option value="No">No</option> 
            </select> 
           </td> 
           <td><input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()"></td> 
          </tr> 
        </table> 
       </fieldset> 
      </form> 
      <hr> 
      <h2>Previous Log Entry</h2> 
      <table id="tblLogEntry"> 
       <tr> 
        <th class="dateCol dateSize">Date</th> 
        <th class="trainingCol">Training</th> 
        <th class="successCol successSize">Success?</th> 
       </tr>      
      </table> 
     </section> 

PHPファイルスニペット（LogEntryFile.php）：

$log = new Log(); 

$log->dateoflog = $_POST["dateoflog"]; 
$log->training = $_POST["logdesc"]; 
$log->success = $_POST["successwork"]; 

$isLogValid = $log->validateLog(); 

if ($isLogValid) { 

    echo ('{ "dateoflog" : "' . $log->dateoflog . '", ' . 
     '"logdesc" : "' . $log->training . '", ' . 
     '"successwork" : "' . $log->success . '" }'); 
} else { 
     header("Location: index.php"); 
} 

UPDATE：複数のテストを試した結果、Chromeを使用してデータが表示されたが、消えてしまった。今私はデータをそこに残す方法を確信していません。

Answer 1

問題：あなたはそのaは送信ボタンを表示されます<input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()">あなたはこの行を見れば、ユーザはいくつかの値を入力して、あなたのフォームが任意のAJAXのものを行わずに提出されることをクリックしたときに.Usually練習は、フォームの上に結合することですイベントを送信し、デフォルトの.formフォームのサブミットをキャンセルし、独自のAjaxコードを実行してサーバーにデータを送信しますが、それが主要なリファクタリングになると思いますので、おそらく動作するはずの小さな修正を提案します。

はちょうどあなたがリダイレクトケースのためのJSに特化変数を返す必要があり、この

<input type="button" value="Add new log" class="styleButton" onclick="addNewEntry()">