Question

我在没有jQuery的情况下学习JavaScript。

现在我正在尝试将一些数据从输入字段传递给php，而不是将$variable从php传递给javascript。在jQuery中，使用$.ajax很容易。

但是如何使用JavaScript进行此操作呢？这是我的尝试。现在我只想传递$_POST中的inputfield内容。我此刻没有做任何验证。

我的计划是使用php进行验证，然后传递错误消息或多个错误消息。或者在成功的情况下成功消息。

但是我的控制台日志中只有NULL。

window.onload = function () {
    var Input = document.querySelector('input#Input');
    var InputButton = document.querySelector('button.formBtn');
    InputButton.onclick = function () {

        var InputRequest = new XMLHttpRequest();

        InputRequest.open("POST", "ajax.php", true);
        InputRequest.send();
        InputRequest.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                 var obj = JSON.parse(InputRequest.response)
                 console.log(obj);
            }
        }
        return false;
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Ajax Example</title>
    <style>
        #Input {
            width: 200px;
            height: 15px;
            padding: 10px 0;
            text-indent: 5px;
        }
        #Input:focus {
            outline: none;
            border: 1px solid lightblue;
        }
    </style>
</head>

<body>
    <form name="form" action="ajax.php" method="post">
        <input type="text" id="Input" name="inputTest">
        <button type="submit" class="formBtn">Absenden</button>
    </form>
    <script src="ajax.js"></script>
</body>

</html>

<?php
$inputResponse = $_POST["inputTest"];
echo json_encode($inputResponse)
?>

Answer 1

您缺少一行，需要修改send()行以发送POST内容：

// You need to send the type
InputRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
// Send the post values in the send
InputRequest.send('key=value&key2=value2');

对于send()，您必须将键和值转换为查询字符串。我认为这就是为什么这么多人使用jQuery，这就是为你完成所有这些。

使用php WITHOUT jQuery进行Ajax表单验证

1 个答案: