PHP 没有向 AJAX 返回数据

Question

我正在测试一个通过 Ajax 将数据提交到 PHP 处理文件的登录表单。单击提交按钮后，它只会将我重定向到 PHP 文件，而不是从 PHP 返回数据。该表单位于引导模式中。我只是 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 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();

    });

});

Answer 1

您在 javascript 代码中有语法错误。更改您的代码var formData = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email' :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('input[name=login-email]').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password' :&nbsp; &nbsp; &nbsp; &nbsp; $('input[name=login-pass]').val();&nbsp; &nbsp; &nbsp; &nbsp; };到var formData = {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'email' :&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;$('input[name=login-email]').val(),&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'password' :&nbsp; &nbsp; &nbsp; &nbsp; $('input[name=login-pass]').val()&nbsp; &nbsp; &nbsp; &nbsp; };它会解决问题

Answer 2

试试这个兄弟$(document).ready(function(){&nbsp; $('#test-form').on('submit', function(event){&nbsp; &nbsp; event.preventDefault();&nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; url:"action="login-process.php" ",&nbsp; &nbsp; &nbsp; method:"POST",&nbsp; &nbsp; &nbsp; data:$(this).serialize(),&nbsp; &nbsp; &nbsp; success:function(data){&nbsp; &nbsp; &nbsp; &nbsp; console.log("data send");&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })&nbsp; });});<form id="test-form" method="post">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="hidden" name="login-form">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="email" class="form-control form-control-lg" name="login-email" id="loginEmail" placeholder="Email address" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="form-group">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="password" class="form-control form-control-lg" name="login-pass" id="loginPassword" placeholder="Password" required>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="submit" class="btn btn-lg btn-block btn-primary mb-4">Sign in</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </form>