PHP не возвращает данные на AJAX

Question

Я тестирую форму входа, которая отправляет данные через Ajax в файл обработки PHP. Как только я нажимаю кнопку отправки, он просто перенаправляет меня в файл PHP и не возвращает данные из PHP. Форма находится внутри bootstrap модал. Я просто новичок в jquery и ajax, поэтому я надеюсь, что кто-то поможет. Спасибо

HTML

<form action="login-process.php" id="test-form" method="post">
                    <div class="form-group">
                    <input type="hidden" name="login-form">
                        <input type="email" class="form-control form-control-lg" name="login-email" id="loginEmail" placeholder="Email address" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control form-control-lg" name="login-pass" id="loginPassword" placeholder="Password" required>
                    </div>

                    <button type="submit" class="btn btn-lg btn-block btn-primary mb-4">Sign in</button>
                </form>

JQuery скрипт размещается в нижнем колонтитуле сайта после jquery. js cdn

$(document).ready(function(){

    // Process form
    $('#test-form').submit(function(event){

        // get form data
        var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val();
        };

        // process the form
        $.ajax({
            type        : 'POST', // define the HTTP method we want to use
            url         : 'process.php', // url to send data
            data        : formData, // data object
            dataType    : 'json', // what type of data to exepect back from server
            encode      : true
        })
        // using done promise call back
        .done(function(data){

            // log data to console
            console.log(data);

            if (data.email-msg) {
                alert("success");
            }

        });

        // stop the form from submitting and refresing the page
        event.preventDefault();
    });
});

процесса. php

<?php 

$data = array();    // array to hold pass back data

if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    $email = $_POST['login-email'];
    $password = $_POST['login-pass'];

    $data['email-msg'] = $email;
    $data['pw-msg'] = $password;

    echo json_encode($data);
} ?>

Answer 1

У вас есть синтаксическая ошибка в javascript коде.

измените код

var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val();
        };

на

var formData = {
            'email' :           $('input[name=login-email]').val(),
            'password' :        $('input[name=login-pass]').val()
        };

Это решит проблему

Answer 2

попробуй этого брата

$(document).ready(function(){
  $('#test-form').on('submit', function(event){
    event.preventDefault();
    $.ajax({
      url:"action="login-process.php" ",
      method:"POST",
      data:$(this).serialize(),
      success:function(data){
        console.log("data send");     
      }
    })
  });
});

<form id="test-form" method="post">
                    <div class="form-group">
                    <input type="hidden" name="login-form">
                        <input type="email" class="form-control form-control-lg" name="login-email" id="loginEmail" placeholder="Email address" required>
                    </div>

                    <div class="form-group">
                        <input type="password" class="form-control form-control-lg" name="login-pass" id="loginPassword" placeholder="Password" required>
                    </div>

                    <button type="submit" class="btn btn-lg btn-block btn-primary mb-4">Sign in</button>
                </form>