SweetAlerts Ajax与PHP

Question

因此，当前我正在尝试弹出一个SweetAlert，让您输入访问网站的密钥。我想要设置它，以便您放入密钥，并且它在单独的PHP页面上运行AJAX请求，然后如果该密钥存在，则返回true或false。我确实尝试过使用SweetAlerts示例，但是它不断出错。

JavaScript：

function SignUp() {
            swal({
                text: 'Enter Your 8-Digit Beta Key',
                content: "input",
                button: {
                    text: "Submit",
                    closeModal: false,
                },
            })
            .then(key => {
                if (!key) throw null;

                return fetch(`beta/database.php?mode=key&key=${key}`);
            })
            .then(results => {
                return results.json();
            })
            .then(json => {
                const key = json.results[0];
                const result = key.tf;
                if (result == "false") {
                    return swal("Key Invalid", "Key Is Invalid, Have You Already Registered?", "error");
                }

                swal("Key Valid", "Redirecting", "success");
            })
            .catch(err => {
                if (err) {
                    console.log(err);
                    swal("Error", "Something Went Wrong, Try Again Later", "error");
                } else {
                    swal.stopLoading();
                    swal.close();
                }
            });

PHP：

$conn = mysqli_connect(REMOVED FOR PRIVACY);

if($_GET['mode'] === "key") {
    $key = htmlspecialchars($_GET['key']);
    $query = "SELECT beta_key FROM beta_keys WHERE beta_key = '$key'";
    $result = mysqli_query($conn, $query);

    if(mysqli_num_rows($result) == 1) {
        die(json_encode(['tf' => "true"]));
    } else {
        die(json_encode(['tf' => "false"]));
    }
}

它所做的只是调用函数的.catch部分。预先感谢。

Answer 1

看着SweetAlert，我不知道为什么它不起作用，但是我使用了叉子Sweetalert 2，它使它变得更容易。我可以使用当前的PHP和稍微不同的JS。

function SignUp() {
            swal({
                title: 'Enter Your 8-Digit Beta Key',
                input: 'text',
                inputAttributes: {
                    autocapitalize: 'on'
                },
                showCancelButton: true,
                confirmButtonText: 'Submit',
                showLoaderOnConfirm: true,
                preConfirm: (key) => {
                    return fetch(`beta/database.php?mode=key&key=${key}`)
                    .then(response => {
                        if (!response.ok) {
                        throw new Error(response.statusText)
                        }
                        return response.json()
                    })
                    .catch(error => {
                        swal.showValidationError(
                        `Request failed: ${error}`
                        )
                    })
                },
                allowOutsideClick: () => !swal.isLoading()
                }).then((result) => {
                if (result.value.tf == "true") {
                    swal({
                        type: 'success',
                        title: 'Key Valid',
                        text: 'Redirecting',
                        footer: '<a href="#">Click Here To Go There Now</a>'
                    })
                } else if(result.value.tf == "false") {
                    swal({
                        type: 'error',
                        title: 'Key Invalid',
                        text: 'Your Key Is Either Inactive Or Typed Incorrectly.',
                        footer: '<a href="#">Why do I have this issue?</a>'
                    })
                }
            })
        }

希望这可以使处理同一问题的人更轻松。