javascript - 使用 jQuery 的 $.post() 方法检索 JSON 表单数据时遇到问题

Question

我在使用 jQuery 的 $.post() 方法从 PHP 文件检索 JSON 数据时遇到问题。

我可以看到控制台中记录了 XHR POST 请求，但没有出现响应消息。

有人可以解释一下为什么会发生这种情况吗？

表单

<form action="<?php echo htmlentities($_SERVER['SCRIPT_NAME']); ?>" method="post" id="gradeForm">
    <div class="form-group" id="currentGradeGroup">
        <label for="currentGrade">What is your current total grade?</label>
        <input type="text" class="form-control" name="currentGrade">
        <span class="help-block" id="currentGrade"></span>
    </div>
    <div class="form-group" id="targetGradeGroup">
        <label for="targetGrade">What is your target grade?</label>
        <input type="text" class="form-control" name="targetGrade">
        <span class="help-block" id="targetGrade"></span>
    </div>
    <div class="form-group" id="finalWorthGroup">
        <label for="finalWorth">What is your final exam worth?</label>
        <input type="text" class="form-control" name="finalWorth">
        <span class="help-block" id="finalWorth"></span>
    </div>
    <button type="submit" class="btn btn-primary">Submit</button>
</form>
<div id="ajax"></div>


**Server side code**

 <?php  


        $response = validate_form(); 

        if (!empty($response)) {

            echo '<pre>';
            var_dump($response);
            echo '</pre>';
            exit(json_encode($response));

        } else {

            $response = success();

            echo '<pre>';
            var_dump($response);
            echo '</pre>';
            exit(json_encode($response));

        }

        // validate form input

        function validate_form() {

            $response = array();

            // currentGrade must be filled out and be a number.

             if (! (filter_has_var(INPUT_POST, 'currentGrade') && (filter_input(INPUT_POST, 'currentGrade', FILTER_VALIDATE_INT)))) {

                $currentGrade = array();
                $currentGrade['msg'] = "You need to enter a number for current grade";
                $response[] = $currentGrade;
            }

            // currentGrade must be 0 or greater

            if ($_POST['currentGrade'] < 0) {

                $currentGrade = array();
                $currentGrade['msg'] = "Current grade must be greater than or equal to zero";
                $response[] = $currentGrade;

            } 

            // targetGrade must be filled out and be a number.

            if (! (filter_has_var(INPUT_POST, 'targetGrade') && (filter_input(INPUT_POST, 'targetGrade', FILTER_VALIDATE_INT)))) {

                $targetGrade = array();
                $targetGrade['msg'] = "You need to enter a number for target grade";
                $response[] = $targetGrade;
            }

            // finalWorth must be filled out and be a number.

            if (! (filter_has_var(INPUT_POST, 'finalWorth') && (filter_input(INPUT_POST, 'finalWorth', FILTER_VALIDATE_INT)))) {

                $finalWorth = array();
                $finalWorth['msg'] = "Your final exam worth needs to be a number.";
                $response[] = $finalWorth;
            }

            $response['success'] = false;
            return $response;

        }

        function success() {

                $response = array();

                $currentGrade = $_POST['currentGrade'];
                $targetGrade = $_POST['targetGrade'];
                $finalWorth = $_POST['finalWorth'];

                $possibleGradeSoFar = (100 - $finalWorth) / 100;
                $finalWorth = $finalWorth / 100;
                $b = $currentGrade * $possibleGradeSoFar;
                $c = $targetGrade - $b;
                $neededMark = $c / $finalWorth;
                $neededMark = round($neededMark);

                $response['msg'] = '<p id="response">You need to get ' . $neededMark . ' to get a final mark of ' . $targetGrade . '.</p><br>';

                if ($neededMark >= 50 && $neededMark <= 100) {
                    $response['header'] = '<h1>Better start studying...</h1><img class="img-responsive" src="img/Mike.gif" alt="Mike">';
                } elseif ($neededMark > 100) {
                    $response['header'] = '<h1>Just give up now.</h1><img class="img-responsive" src="img/Gustavo-fring.gif" alt="Gustavo Fring">';
                } elseif ($neededMark < 50) {
                    $response['header'] = '<h1>Time to party!</h1><img class="img-responsive" src="img/Yeah-science.gif" alt="Yeah Science!">';
                }

                $response['success'] = true;
                return $response;

        }

从单独的 PHP 文件中的 json_encode() 输出 JSON

{
    "0": {
        "msg": "You need to enter a number for current grade"
    },
    "1": {
        "msg": "You need to enter a number for target grade"
    },
    "2": {
        "msg": "Your final exam worth needs to be a number."
    },
    "success": false
}

jQuery

jQuery(document).ready(function($) {
    $('#gradeForm').submit(function(e) {
        // stop form from submitting normally.
        e.preventDefault(); 

        // get some values from the form.
        var $form = $(this);
        var url = $form.attr('action');
        var postData = $form.serialize();

        // use the jQuery post method to send the data.
        var posting = $.post(url, postData, 'json'); 

        // If the request is successful append the response to the #ajax div.
        posting.done(function(response) {
            // output the appropriate message in the ajax div 
            $('#ajax').html(response[0].msg);
        }) // end done();
        // otherwise log the HTTP request status to the console.
        .fail(function(jqXHR) {
            console.log(jqXHR.status);
            console.log(jqXHR.statusText);
        }); // end fail();
    }); // end submit();
}); // end ready();

Answer 1

响应是:

{
    "0": {
        "msg": "You need to enter a number for current grade"
    },
    "1": {
        "msg": "You need to enter a number for target grade"
    },
    "2": {
        "msg": "Your final exam worth needs to be a number."
    },
    "success": false
}

尝试 response.0.msg 或者更确切地说:

$.post(url, postData,function(data)
{
  alert(data.0.msg);
}, 
'json'); 

或者您可以将您的回复更改为:

$response = (array("results" => $result_array_with_msg, "success" => $success));