Question

我是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消失了。现在我不确定如何使数据保持显示。

Answer 1

问题：如果您查看此行<input type="submit" value="Add new log" class="styleButton" onclick="addNewEntry()">，您会看到一个提交按钮，以便当用户输入某些值并点击您的表单提交而不执行任何ajax内容时。通常的做法是绑定表单的提交事件并取消其默认即.form表单提交并运行您自己的ajax代码将数据发送到服务器，但我想这将是一个重大的重构，所以我建议一个小修复可能应该工作。

只需将提交按钮的类型更改为常规按钮。就像这样

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

AJAX不会重新加载页面

1 个答案: