无法通过ajax调用传递对象

Question

我正在使用模式表格来编辑客户名称和可见性。但是，当我提交模式表单来保存更改时，出现了Uncaught参考错误：未定义webFormData。我使用event.preventDefault（）来防止页面刷新，以便可以在控制台中看到未捕获的引用错误。赞赏朝着正确方向迈出的一步

模态形式

<form id="updateCustomer" name="updateCustomer">
                        <div class="modal-body mx-3">
                            <h5><b>General Information</b></h5>
                            Customer Account Name
                            <input type="text" id="accName" name="accName" class="form-control" /><span></span><br />
                            <label>
                                Visiblity <a class=" d-inline"></a>
                            </label>&nbsp;&nbsp;&nbsp;
                            <label class="switch">
                                <input type="checkbox" name="visible" id="visible" />
                                <span class="slider round"></span>
                            </label>
                            <span></span><br />
                            <div class="md-form mb-5">
                                <textarea name="details" readonly id="details" class="form-control" style="background-color:transparent;border: none;resize: none"></textarea>
                            </div>
                        </div><hr />
                        <div class="modal-footer d-flex justify-content-center">
                            <button name="updateBtn" id="updateBtn" class="btn btn-default" type="submit">UPDATE</button>
                        </div>
                        <script>
                            let $updateButton = $('#updateBtn');
                            $.validator.addMethod("alphanumeric", function (value, element) {
                                return this.optional(element) || /^[\w\-\s,.]+$/i.test(value);
                            }, "Letters, numbers, underscores, commas, fullstops only please");
                            jQuery.validator.addMethod("checkSpace", function (value, element) {
                                return value.indexOf("  ") < 0 && value != "";
                            }, "Please enter valid name with alphanumerical characters or \'_\' , \'-\' , \'.\' , \',\' ");
                            //Set jquery validation rules
                            $('#updateCustomer').validate({
                                rules: {
                                    accName: {
                                        required: true,
                                        maxlength: 100,
                                        alphanumeric: true,
                                        checkSpace: true
                                    }
                                },
                                messages: {
                                    accName: {
                                        required: 'Please enter an account name',
                                        maxlength: 'Account name should not be more than 100 characters',
                                        alphanumeric: 'Please enter valid name with alphanumerical characters or \'_\' , \'-\' , \'.\' , \',\' '
                                    }
                                }
                            });
                        </script>
                    </form>

致电提交表格

function getModalData() {
                            function WebFormData(inName, inVisibility) {
                                this.name = inName;
                                this.visibility = inVisibility;
                            }
                            if ($('#updateCustomer').valid()) {
                                let collectedName = $('#accName').val();
                                let collectedVisibility = $('#visible').is(':checked');
                                let webFormData = new WebFormData(collectedName, collectedVisibility);
                                console.dir(webFormData);                                
                            }
                            return webFormData;
                        }
                        $updateButton.on('click', function () {                            
                            event.preventDefault();
                            $.ajax({
                                url: '/API/CustomerAccounts/Update',
                                method: 'PUT',
                                contentType: 'application/x-www-form-urlencoded',
                                data: getModalData()
                            }).done(function (data) {
                                new Noty({
                                    text: data.message,
                                    theme: 'metroui',
                                    layout: 'center',
                                    type: 'success'
                                }).show();
                            }).fail(function (jqXHR, textStatus, errorThrown) {
                                new Noty({
                                    text: data.responseJSON.message,
                                    theme: 'metroui',
                                    layout: 'center',
                                    timeout: 3000,
                                    type: 'error'
                                }).show();
                            });
                        }
                        )

Answer 1

在getModalData中，您试图将return webFormData超出该变量声明的范围。它在if块中声明，但在此之外返回。相反，您应该将return放在if块中：

if ($('#updateCustomer').valid()) {
    let collectedName = $('#accName').val();
    let collectedVisibility = $('#visible').is(':checked');
    let webFormData = new WebFormData(collectedName, collectedVisibility);
    console.dir(webFormData);                                
    return webFormData;
}

或者，如果要返回该变量，则不管其形式是否有效，请将webFormData的声明移到if块的外面：

let webFormData = null;
if ($('#updateCustomer').valid()) {
    let collectedName = $('#accName').val();
    let collectedVisibility = $('#visible').is(':checked');
    webFormData = new WebFormData(collectedName, collectedVisibility);
    console.dir(webFormData);                                
}
return webFormData;