AJAX не перезагрузит страницу

Я новичок в AJAX, и у меня возникли проблемы с запуском AJAX нажатием кнопки. Все решения, которые я нашел в Stack Overflow, используют синтаксис 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 (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");
}

ОБНОВЛЕНИЕ: после нескольких попыток тестирования я поймал, что данные появились, но исчезли с помощью Chrome. Теперь я не уверен, как заставить данные оставаться там.

javascript,php,json,ajax,

1

Ответов: 1


0 принят

Проблема. Если вы посмотрите на эту строку, <input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()">вы увидите ее кнопку отправки, чтобы пользователь ввел некоторые значения и клики, которые ваша форма будет отправлена ??без каких-либо аякс- материалов. Обычно практика заключается в привязке к событию отправки формы и отмене ее по умолчанию, т. Е. .form form и запускайте свой собственный код ajax для отправки данных на сервер, но я предполагаю, что это будет основной рефакторинг, поэтому я бы предложил небольшое исправление, которое, вероятно, должно работать.

Просто измените тип этой кнопки отправки на обычную кнопку. Подобно этому

<input type="button" value="Add new log" class="styleButton" onclick="addNewEntry()"> 
JavaScript, PHP, JSON, AJAX,
Похожие вопросы