SweetAlerts Ajax с PHP

Итак, в настоящее время я пытаюсь открыть всплывающее окно SweetAlert, в котором вы должны ввести ключ для доступа к веб-сайту. Я хочу, чтобы он был настроен так, чтобы вы вводили ключ, и он запускал запрос AJAX на отдельной странице PHP, который затем возвращал 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.info(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. Заранее спасибо.

Не могли бы вы рассказать, в чем ошибка? ЭТО сложно угадать

matiit 25.07.2018 16:39

Он просто показывает окно ошибки в функции .catch

Hayden Stith 25.07.2018 16:41

константный ключ = json.result; <- json.result не определен. Вы просто возвращаете строку, а не объект json. таким образом, const key = json может быть либо «истина», либо «ложь». Если вы хотите вернуть json, добавьте в свой php код die (json_encode (['result' => "true"]));

Ole Haugset 25.07.2018 16:45

«Он просто показывает окно с ошибкой в ​​функции .catch», в этом случае вам нужно заглянуть в инструменты разработчика вашего браузера, чтобы определить, в чем заключается настоящая ошибка. Вероятно, что-то есть в консоли и / или проблема очевидна при просмотре запроса ajax в сетевых инструментах. Это основная задача отладки, которую вы должны научиться выполнять при работе с JavaScript.

ADyson 25.07.2018 16:48

Хорошо, поэтому я заставил его работать, когда я использовал json_encode, но теперь он всегда возвращает истину, это, вероятно, простое исправление, и я постараюсь решить его.

Hayden Stith 25.07.2018 16:51

Я считаю своим долгом упомянуть еще кое-что: ваш код уязвим для атак с использованием SQL-инъекций. Вы должны использовать параметризованные запросы и подготовленные операторы, чтобы предотвратить взлом вашей базы данных злоумышленниками с помощью вредоносных входных значений. bobby-tables.com дает объяснение рисков, а также несколько примеров того, как безопасно писать ваши запросы с помощью PHP / mysqli. Никогда вставляет необработанные данные прямо в ваш SQL.

ADyson 25.07.2018 16:55

Спасибо за помощь, чуть не забыл про XSS и уколы

Hayden Stith 25.07.2018 16:59

Похоже, что в ` есть тики database.php?mode=key&key=${key}, которые, как мне кажется, должны быть кавычками '.

Funk Forty Niner 25.07.2018 17:24

Это не нарушает его, но теперь JS-вещи, результат undefined

Hayden Stith 25.07.2018 17:28

@HaydenStith для ясности, мой комментарий касался SQL-инъекции, а не XSS. Есть и другие шаги, которые вы можете предпринять, чтобы предотвратить XSS

ADyson 25.07.2018 17:52

«JS-вещи, результат которых не определен». Можете ли вы обновить свой код, чтобы показать, как вы теперь возвращаете данные как действительный JSON?

ADyson 25.07.2018 17:53
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
11
103
1

Ответы 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>'
                    })
                }
            })
        }

Надеюсь, это облегчит жизнь людям, имеющим дело с той же проблемой.

Другие вопросы по теме