AJAX-JSON未定义（jQuery，NodeJS）

Question

我目前正在努力将一个json发布到nodejs路由的ajax挣扎。 我想获取4个按钮组的选定值。 按钮组具有以下ID：质量，成本效益，交付范围和等级。 每个按钮组包含5个单选按钮，这些单选按钮的值带有自己的id，例如quality1或quality2。 这些按钮的值的范围是1到5。

我的猜测是我错过了这里提到的内容： 如何从异步调用返回响应？

    $(document).ready(function () {

    // SUBMIT FORM
    $("#ratingForm").submit(function (event) {
        // Prevent the form from submitting via the browser.
        event.preventDefault();
        ajaxPost();
    });

    function ajaxPost() {

        // PREPARE FORM DATA
        let ratingData = {
            quality: $('input[name=options]:checked', '#quality').val(),
            costeffectiveness: $('input[name=options]:checked', '#costeffectiveness').val(),
            deliveryscope: $('input[name=options]:checked', '#deliveryscope').val(),
            contentment: $('input[name=options]:checked', '#contentment').val()
        };

        // DO POST
        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: "/rating",
            data: JSON.stringify(ratingData),
            dataType: 'json',
            success: function (rating) {
                $("#ratingResultDiv").html("<p>" +
                        "Post Successfully! <br>" +
                        "--->" + JSON.stringify(rating) + "</p>");
            },
            error: function (e) {
                alert("Error!");
                console.log("ERROR: ", e);
            }
        });
    }
});

当我以另一种方式分配变量并更改预期json的路由时，它的工作原理就像一个魅力：

            // PREPARE FORM DATA
        let formData = {
            firstname: $("#firstname").val(),
            lastname: $("#lastname").val()
        };

工作。

NodeJS路线：

router.post('/rating', function (req, res, next) {

console.log("RATINGS: " + JSON.stringify(req.body));
console.log(req.body.quality);
console.log(req.body.costeffectiveness);
console.log(req.body.deliveryscope);
console.log(req.body.contentment);

let rating = {};

rating.quality= req.body.quality;
rating.costeffectiveness = req.body.costeffectiveness;
rating.deliveryscope = req.body.deliveryscope;
rating.contentment = req.body.contentment;

return res.send(rating);

HTML：

                            <form method="POST" action="/rating">
                            <form id="ratingForm">
                                <div class="form-group">
                                    <p class="my-2">Quality</p>
                                    <div class="btn-group btn-group-lg btn-group-toggle" id="quality"
                                         data-toggle="buttons">
                                        <label class="btn btn-primary active">
                                            <input type="radio" name="quality" id="quality1" value="1"
                                                   autocomplete="off" checked>
                                            1
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="quality" id="quality2" value="2"
                                                   autocomplete="off"> 2
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="quality" id="quality3" value="3"
                                                   autocomplete="off"> 3
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="quality" id="quality4" value="4"
                                                   autocomplete="off"> 4
                                        </label>
                                        <label class="btn btn-primary">
                                            <input type="radio" name="quality" id="quality5" value="5"
                                                   autocomplete="off"> 5
                                        </label>
                                    </div>
                                    <p class="my-2">Cost Effectiveness</p>
                                    <div class="btn-group btn-group-lg btn-group-toggle" id="cost-effectiveness"
                                         data-toggle="buttons">
                                        <label class="btn btn-secondary active">
                                            <input type="radio" name="costeffectiveness" id="cost_effectiveness1" value="1"
                                                   autocomplete="off"
                                                   checked> 1
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="costeffectiveness" id="cost_effectiveness2" value="2"
                                                   autocomplete="off">
                                            2
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="costeffectiveness" id="cost_effectiveness3" value="3"
                                                   autocomplete="off">
                                            3
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="costeffectiveness" id="cost_effectiveness4" value="4"
                                                   autocomplete="off">
                                            4
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="costeffectiveness" id="cost_effectiveness5" value="5"
                                                   autocomplete="off">
                                            5
                                        </label>
                                    </div>
                                    <p class="my-2">Delivery Scope</p>
                                    <div class="btn-group btn-group-lg btn-group-toggle" id="delivery-scope"
                                         data-toggle="buttons">
                                        <label class="btn btn-info active">
                                            <input type="radio" name="deliveryscope" id="delivery_scope1" value="1"
                                                   autocomplete="off"
                                                   checked> 1
                                        </label>
                                        <label class="btn btn-info">
                                            <input type="radio" name="deliveryscope" id="delivery_scope2" value="2"
                                                   autocomplete="off">
                                            2
                                        </label>
                                        <label class="btn btn-info">
                                            <input type="radio" name="deliveryscope" id="delivery_scope3" value="3"
                                                   autocomplete="off">
                                            3
                                        </label>
                                        <label class="btn btn-info">
                                            <input type="radio" name="deliveryscope" id="delivery_scope4" value="4"
                                                   autocomplete="off">
                                            4
                                        </label>
                                        <label class="btn btn-info">
                                            <input type="radio" name="deliveryscope" id="delivery_scope5" value="5"
                                                   autocomplete="off">
                                            5
                                        </label>
                                    </div>
                                    <p class="my-2">Contentment</p>
                                    <div class="btn-group btn-group-lg btn-group-toggle" id="contentment"
                                         data-toggle="buttons">
                                        <label class="btn btn-secondary active">
                                            <input type="radio" name="contentment" id="contentment1" value="1"
                                                   autocomplete="off"
                                                   checked>
                                            1
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="contentment" id="contentment2" value="2"
                                                   autocomplete="off"> 2
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="contentment" id="contentment3" value="3"
                                                   autocomplete="off"> 3
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="contentment" id="contentment4" value="4"
                                                   autocomplete="off"> 4
                                        </label>
                                        <label class="btn btn-secondary">
                                            <input type="radio" name="contentment" id="contentment5" value="5"
                                                   autocomplete="off"> 5
                                        </label>
                                    </div>
                                    <div class="modal-footer my-4">
                                        <button type="submit" class="btn btn-lg btn-primary btn-block">Submit rating
                                        </button>
                                    </div>
                                </div>
                            </form>
                        </form>

Answer 1

let req = JSON.parse(req);

尝试将其放在您的节点js脚本上

Answer 2

问题出在您的jQuery选择器中。 它应该是

let ratingData = {
    quality: $('#quality input[name=options]:checked').val(),
    costeffectiveness: $('#costeffectiveness input[name=options]:checked').val(),
    deliveryscope: $('#deliveryscope input[name=options]:checked').val(),
    contentment: $('#contentment input[name=options]:checked').val()
};

Answer 3

问题是，按钮组中的每个按钮都具有相同的名称。 一旦给组中的按钮指定了单独的名称，就可以在json中访问这些值。 我将编辑问题中的代码。