没有使用 mamp 获得 ajax 成功响应

Question

由于某种原因，我没有收到 AJAX 调用的回复。我已经使用 Chrome 和 Firefox 中的控制台来监控这一点，但我只能看到表单发送的内容。我正在使用 MAMP 并没有在实时服务器上尝试过，但我需要它在 MAMP 中工作。我已经尝试了很多人们从我在 stackoverflow 中发现但已知的类似问题提出的建议，请帮助！

<form id="signup_submit" method="post" action="AJAX/signup.php">
                    <div class="form-group show-progress">

                    </div>
        <div class="form-group">
                    <input type="text" name="firstname" id="firstname" class="form-control" autocomplete="firstname" placeholder="Enter First Name...">
                    <span class="firstname-error error"></span>
                    </div><!-- form-group -->
                    <div class="form-group">
                    <input type="text" name="surname" autocomplete="surname" id="surname" class="form-control" placeholder="Enter Surname...">
                    <span class="surname-error error"></span>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <input type="email" name="email" id="email" autocomplete="email"  class="form-control" placeholder="Enter Email...">
                        <span class="email-error error"></span>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <input type="password" name="password" autocomplete="password"  id="password" class="form-control" placeholder="Choose Password...">
                        <span class="password-error error"></span>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <input type="password" id="confirm" name="confirm" autocomplete="confirm"  class="form-control" placeholder="Confirm Password...">
                        <span class="confirm-error error"></span>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <button type="submit" id="submit" >Create Account</button>
                    </div><!-- form-group -->
                    <div class="form-group">
                        <a href="#" id="login">Already have an account?</a>
                    </div>
                </form><!-- form -->

signup.js

    $(document).ready(function(){
    $('form').submit(function(e){
        e.preventDefault();
        var data = $('#signup_submit').serialize();
        console.log(data)
        $.ajax({
            type:'POST',
            URL: 'AJAX/signup.php',
            data: data,
            dataType: 'json',
            encode:true,
            success: function(d){
                d = JSON.parse(d);
                console.log(d.testjson);
                if(d.success){
                    $('#signup_submit').append('<div>'+d.message+'</div>');
                }else{
                    if(d.errors.firstname){$('.firstname-error').show();$('.firstname-error').html(d.errors.firstname);}
                    if(d.errors.surname){$('.surname-error').show();$('.surname-error').html(d.errors.surname);}
                    if(d.errors.email){$('.email-error').show();$('.email-error').html(d.errors.emailname);}
                    if(d.errors.password){$('.password-error').show();$('.password-error').html(d.errors.password);}
                    if(d.errors.confirm){$('.confirm-error').show();$('.confirm-error').html(d.errors.confirm);}
                }
            }
        })
    })

})

注册.php

<?php 
$errors = array();
$response = array();

if(empty($_POST['firstname'])){$errors['firstname'] = 'First Name Is Required!';}
if(empty($_POST['surname'])){$errors['surname'] = 'Surname Is Required!';}
if(empty($_POST['email'])){$errors['email'] = 'Email Address Is Required!';}
if(empty($_POST['password'])){$errors['password'] = 'Password Is Required!';}
if(empty($_POST['confirm'])){$errors['confirm'] = 'Please Confirm Your Password!';}

$response['errors'] = $errors;

if (!empty($errors)){

    $response['success'] = false;
    $response['message'] = 'FAIL!';
}else{
    $response['success'] = true;
    $response['message'] = 'SUCCESS!';  

}



 ?>  

Answer 1

您永远不会在 signup.php 文件中返回任何内容。您需要 json_encode 并在脚本末尾使用 echo 或 exit。

---

<?php

$errors = array();
$response = array();

if (empty($_POST['firstname'])) $errors['firstname'] = 'First Name Is Required!';
if (empty($_POST['surname'])) $errors['surname'] = 'Surname Is Required!';
if (empty($_POST['email'])) $errors['email'] = 'Email Address Is Required!';
if (empty($_POST['password'])) $errors['password'] = 'Password Is Required!';
if (empty($_POST['confirm'])) $errors['confirm'] = 'Please Confirm Your Password!';

$response['errors'] = $errors;

if (!empty($errors)) {
    $response['success'] = false;
    $response['message'] = 'FAIL!';
} else {
    $response['success'] = true;
    $response['message'] = 'SUCCESS!';
}

// Return data here
exit(json_encode($response));

?>

---

编辑：保留上面的 PHP exit，而是使用 jQuery.post() 而不是 jQuery.ajax()，因为它比混淆内容类型更短、更干净、更简单。它还应该解决您的问题：

$(document).ready(function(){
    $('form').submit(function(e) {
        e.preventDefault();
        var data = $('#signup_submit').serialize();

        console.log("data:");
        console.log(data);

        $.post("AJAX/signup.php", data, result => {
            console.log("result:");
            console.log(result);

            result = JSON.parse(result);

            if (result.success) {
                $('#signup_submit').append('<div>'+result.message+'</div>');
            } else {
                if (result.errors.firstname) $('.firstname-error').html(result.errors.firstname).show();
                if (result.errors.surname) $('.surname-error').html(result.errors.surname).show();
                if (result.errors.email) $('.email-error').html(result.errors.email).show();
                if (result.errors.password) $('.password-error').html(result.errors.password).show();
                if (result.errors.confirm) $('.confirm-error').html(result.errors.confirm).show();
            }
        });
    });
});

Answer 2

删除 dataType: 'json' 并尝试。在回显结果之前还要设置标题，如下所示：

header('Content-type:application/json');
echo json_encode($response);