AJAX-HTML按钮发送获取请求而不是发布

时间:2019-03-12 12:05:48

标签: c# html ajax jqxhr

我正在尝试使用具有一个输入和AJAX的html表单发送发布请求。但是结果根本不是我想要的。首先,它发送一个Get请求,其次,它没有命中我想要的API端点。它应该将表单发布到我的endpoind('/ Account / SendConfirmPhoneNumber'),然后我想对它的结果进行任何处理? 这是我的html(C#Razor):

<div class="newRegister-addCode" id="confirmPhoneNumberForm-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="newRegister-helpText">
        <p>
enter the code
        </p>
    </div>
    <form class="newRegister-formBox" id="confirmPhoneNumberForm" autocomplete="off">
        <div class="formElement newRegister-input">
            <i class="fa fa-key"></i>
            <input autocomplete="off" type="text" name="code" id="code"  class="form-control persianDigitInput" placeholder="enter the key" >
            <div class="newRegister-alarmText">
                <p>
                   60 seconds 
                </p>
                <button class="animateBtn" type="button" id="Resend-confirm-phone-number-code">
                    <i class="fa fa-refresh"></i>
                   sendagain
                </button>
            </div>
        </div>
        <div class="newRegister-button">
            <button id="send-confirm-phone-number-code" class="animateBtn">
                <i class="fa fa-check"></i>
                submit
                </button>
</div>
    </form>
</div>

这是我的JavaScript文件:

window.$view = window.$view || {};
window.$collections = window.$collections || {};
window.$utils = window.$utils || {};

// ================== UserProfileDetails ============================== 
$view.UserProfile_ConfirmPhoneNumber = Backbone.View.extend({
    el: '#confirmPhoneNumber',
    events: {
        "click #send-confirm-phone-number-code": "sendConfirmPhoneNumberCode",
        "click #admin-send-confirm-phone-number-code": "adminSendConfirmPhoneNumberCode"
    },
    initialize: function () {
        this.loadConfirmPhoneNumberValidation();
        this.render();
    },
    modelChanged: function () {

    },
    sendConfirmPhoneNumberCode: function () {
        var self = this;
        var $form = $("#confirmPhoneNumberForm");
        $.ajax({
            url: '/Account/SendConfirmPhoneNumber',
            datatype: "json",
            type: "POST",
            data: $form.serialize(),
            beforeSend: function () {
                $utils.showLoader();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                self.showErrorMessage(xhr.responseText);
            },
            success: function (data, text) {
                if (data.ResultCode == 400) {
                    self.showErrorMessage(data.Message);
                } else if (data.ResultCode == 200) {
                    self.showSuccessMessage($utils.messages.user.reSend_ConfirmPhoneNumberCode);
                    self.enableDisableResendConfirmPhoneNumberCode();
                }
            },
            complete: function () {
                $utils.hideLoader();
            }
        });
    },
    adminSendConfirmPhoneNumberCode: function () {
        var self = this;
        var $form = $("#confirmPhoneNumberForm");
        $.ajax({
            url: '/Account/SendVerificationCodeByPhone',
            datatype: "json",
            type: "POST",
            data: $form.serialize(),
            beforeSend: function () {
                $utils.showLoader();
            },
            error: function (xhr, ajaxOptions, thrownError) {
                self.showErrorMessage(xhr.responseText);
            },
            success: function (data, text) {
                if (data.ResultCode == 400) {
                    self.showErrorMessage(data.Message);
                } else if (data.ResultCode == 200) {
                    self.showSuccessMessage(data.Message);
                    self.enableDisableResendConfirmPhoneNumberCode();
                }
                $("#simpleMessageWarning").hide();
            },
            complete: function () {
                $utils.hideLoader();
            }
        });
    },
    enableDisableResendConfirmPhoneNumberCode: function (message) {
        $utils.showCounter();
        $utils.enableDisableResendButton("#send-confirm-phone-number-code", "#admin-send-confirm-phone-number-code");
    },

    loadConfirmPhoneNumberValidation: function () {
        var self = this;
        this.$("#confirmPhoneNumberForm").validate({
            rules: {
                code: {
                    required: true,
                    minlength: 4
                }
            },
            messages: {
                code: {
                    required: $utils.messages.user.required_ConfirmPhoneNumberCode,
                    minlength: $utils.messages.user.minlength_ConfirmPhoneNumberCode
                }
            },
            submitHandler: function (form) {
                var $form = $(form);
                var validator = $form.data("validator");

                if (!validator || !$form.valid())
                    return;
                $.ajax({
                    url: '/Account/ConfirmPhoneNumber',
                    datatype: "json",
                    type: "POST",
                    data: $form.serialize(),
                    beforeSend: function () {
                        $utils.showLoader();
                    },
                    error: function (xhr, ajaxOptions, thrownError) {
                        self.showErrorMessage(xhr.responseText);
                    },
                    success: function (data, text) {
                        if (data.ResultCode == 400) {
                            self.showErrorMessage(data.Message);
                        } else if (data.ResultCode == 200) {
                            self.showSuccessMessage(data.Message);
                            setTimeout(function () { window.location.href = $("#ReturnUrl").val().length > 0 ? $("#ReturnUrl").val() : "/"; }, 3000);
                            return;
                        }
                    },
                    complete: function () {
                        $utils.hideLoader();
                    }
                });
                return;
            }
        });
    },
    showSuccessMessage: function (message) {
        $("#sendConfirmPhoneNumberCodeError").hide();
        var element = $("#sendConfirmPhoneNumberCodeSuccess");
        $utils.showMessage(element, message);
    },
    showErrorMessage: function (message) {
        $("#sendConfirmPhoneNumberCodeSuccess").hide();
        var element = $("#sendConfirmPhoneNumberCodeError");
        $utils.showMessage(element, message);
    },
    render: function () {
        $("#sendConfirmPhoneNumberCodeSuccess").hide();
        $("#sendConfirmPhoneNumberCodeError").hide();
        var element = $("#sendConfirmPhoneNumberCodeSuccess");
        $utils.showMessage(element, $utils.messages.user.send_ConfirmPhoneNumberCode);
        $utils.scrollTopAnimate(element, 1000, 0);

    }
});


// ================================================ 
$(document).ready(function () {

    var pdView = new $view.UserProfile_ConfirmPhoneNumber();
});

0 个答案:

没有答案