PHP 不向 AJAX 返回数据

Question

I'm testing a login form that submits data via Ajax to the PHP processing file. Once I click the submit button it just redirects me to PHP file and not returning data from PHP. The form is inside a bootstrap modal. I'm just new to jquery and ajax so I hope someone helps. Thanks

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 script is placed at site footer after 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 expect 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();
    });
});

process.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

try this brother

 $(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>

Answer 2

You Have syntax error in javascript code.

change your code

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

to

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

It will solve the problem