Я пытался запросить ajax, но он не будет работать

Question

Я пытаюсь сделать запрос к «inserir. php», именно там я собираюсь обработать данные из запроса ajax и вставить их в базу данных. Но когда я нажимаю кнопку, ничего не происходит .. Даже не ошибка. Это моя форма ..:

<div class="modal-body">
                    <!-- FORM-->
                    <form method="POST" id="formulariopost">
                        <div class="form-group">
                            <label for="exampleInputEmail1" style="font-family: Arial, Helvetica, sans-serif;">Email</label>
                            <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Email" style="font-family: Arial, Helvetica, sans-serif;" required>
                            <small id="emailHelp" class="form-text text-muted" style="font-family: Arial, Helvetica, sans-serif;">Nunca vamos partilhar o seu email com mais ninguem.</small>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1" style="font-family: Arial, Helvetica, sans-serif;">Nome da Equipa</label>
                            <input type="text" class="form-control" id="nome_equipa" placeholder="Nome da Equipa" style="font-family: Arial, Helvetica, sans-serif;" required>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1" style="font-family: Arial, Helvetica, sans-serif;">Nickname dos jogadores</label>
                            <input type="text" class="form-control" id="nickname" placeholder="(GAMETAG)" style="font-family: Arial, Helvetica, sans-serif;" required>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputPassword1" style="font-family: Arial, Helvetica, sans-serif;">Numero do whatsapp</label>
                            <input type="text" class="form-control" id="numero" placeholder="Numero do whatsapp" style="font-family: Arial, Helvetica, sans-serif;" maxlength="15" data-mask="(00) 00000-0000" required>
                        </div>
                        <button id="enviar" class="btn btn-secondary" >Close</button>
                        <!--<button type="submit" class="btn btn-primary" style="font-family: Arial, Helvetica, sans-serif;margin-bottom: 30px;float: right;">Submit</button>-->
                    </form>
                    <br>
                    <!--PAYPAL-->
                    <div id="paypal-button-container"></div>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="saveg">Save changes</button>
                </div>
            </div>

Это моя javascript:

$(document).ready(function() {

        $('#saveg').click(function(e){

            e.preventDefault();

            var email = $("#email").val();
            var nome_equipa = $("#nome_equipa").val();
            var gametag = $("#nickname").val();
            var numerowhats = $("#numero").val();


            $.ajax({
                type: "POST",
                url: "inserir.php",
                dataType: "json",
                data: {email:email, nome_equipa:nome_equipa, nickname:nickname, numero:numero},
                success : function(data){
                    if (data.code == "200"){
                        alert("Success: " +data.msg);
                    } else {
                        console.log('mona');
                    }
                }
            });


        });
    });

И это моя php, где я хочу сделать запрос ajax:

    $servername = "localhost";
$username = "root";
$password = "root";
$dbname = "copacobre";


$email = $_POST["email"];
$nome_equipa = $_POST["nome_equipa"];
$gametag = $_POST["nickname"];
$numerowhats = $_POST["numero"];
$newURL="/copac/#";
echo $email;

$errorMSG = "error test";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

if ($conn->query($sql) === TRUE) {
    echo "New record created successfully";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$sql = "INSERT INTO pagamentos (email, nome_equipa, gametag, numerowhats)
VALUES ('".$email."', '".$nome_equipa."', '".$gametag."', ".$numerowhats.")";



$conn->close();

echo json_encode(array('code' => 200));

Answer 1

Может быть много причин, по которым событие не связано. Вы можете попытаться отладить его в несколько шагов.

Очистить кеш

Да, браузеры любят кэширование. Убедитесь, что на вашей странице загружена актуальная версия файла JS.

Если вы используете Chrome, CTRL + F5 выполнит эту работу.

Проверьте, как далеко идет код

Добавьте точки останова в консоли инструментов разработчика или - простым способом - некоторые console.logs в нескольких точках кода - например, после document.ready, после нажатия кнопки, до ajax запроса и до ajax успеха. Не забывайте, что AJAX также может возвращаться с кодом ошибки, а метод 'success' не может обрабатывать ответы об ошибках.

В зависимости от того, как далеко идет код (например, с помощью console.logs), вы можете определить, где проблема в. Если вы не видите журнал сразу за document.ready, возможно, есть проблема с включением файла.

Отладка AJAX

Проверьте, был ли отправлен запрос AJAX и каков был ответ. Вы можете сделать это в Инструменты разработчика на вкладке Сеть. Вы можете увидеть тело запроса и ответа, чтобы помочь вам определить, в чем проблема.

Answer 2

Похоже, привязка события неверна. Вам необходимо привязаться к событию отправки.

Также в вашем коде HTML кнопка отправки предназначена для закрытия, а обычная кнопка назначена для сохранения изменений, обычно отправка - для выполнения действия отправки данные и продолжить.

JQuery отправить документацию

если должно быть что-то вроде

$('#formulariopost').submit(function(e){
    ....
})

и помните, что в конце функции вы должны вернуть true если это было успешно, или false, чтобы отменить событие.