Javascript 表单，将值发送到 PHP 并检索它

Question

我尽力做到最清楚。

基本上，我只需要在 HTML 页面中使用 JavaScript 进行登录。这是因为我只能使用 html 页面。我有一个如下所示的 html 表单:

<form id="privateform" method="post" action="post.php"><label>insert password</label>
   <input type="password" id="password" name="password">
   <input type="submit" value="Login">
</form>

我需要如果(提交的密码 === PHP 从数据库读取的密码)用户被重定向到 HTML 页面上的下一页。我怎样才能实现这个目标？因为我得到的结果是我的 html 页面想要将 PHP 结果保存为 JSON 文件..

Answer 1

首先使用 HTML5 表单，如下例所示

<form id="my-form" method="post" action="">
    <label for="username">username</label>
    <input type="text" name="username" id="username" value="" placeholder="username" required>
    <label for"password">password</label>
    <input type="password" name="password" id="password" value="" placeholder="password" required>
    <button type="submit">send me</button>
</form>

如您所见，输入元素现在具有必需的属性。现在，任何用户都无法使用空输入元素提交表单。因此您不必处理 javascript 来验证表单。 label 元素确实有一个 for 属性，该属性适合所属输入元素的 id 属性。

接下来您可以在表单元素上设置 JavaScript 事件监听器。

<script>
    var form = document.getElementById('my-form'),
        password = document.getElementById('password');

    form.addEventListener('submit', function(event) {
        event.preventDefault();

        var data = new FormData(form);

        var xhr = new XMLHttpRequest();
        xhr.open('POST', 'https://your.domain.tld/check-password.php');
        xhr.onload = function() {
            if (xhr.status === 200) {
                // if the response is json encoded
                var response = JSON.parse(xhr.responseText);

                if (response.message == 'valid') {
                    // redirect here
                }

                if (response.message == 'invalid') {
                    password.setCustomValidity('your password is not correct');
                }
            }
        }
        xhr.send(data); 
    });
</script>

这一小段 JavaScript 代码在表单元素上设置了一个提交事件监听器。一旦表单成功提交，就会触发 ajax 请求，该请求将表单数据“用户名”和“密码”发送到“check-password.php”文件。

在您的 php 文件中，您可以访问如下所示的数据:

<?php
    $username = $_POST['username'];
    $password = $_POST['password'];
?>

如您所见，您不需要 jQuery 或任何其他 javascript 框架来完成此操作。请记住，代码示例只是示例，未经测试。