Javascript 为什么'；ajax是否将数据发布到控制器？

我一直在尝试使用ajax向控制器发送数据，但它将我重定向到另一个url，而不是将数据发布到控制器中

@section CustomScripts
            {
    <script type="text/javascript">

        function save() {
            var BookingDetails =
            {
                VehicleModel: document.getElementById('VehicleModel').value,
                VehicleRegNo: document.getElementById('VehicleRegNo').value,
                AppointmentTime: '1',
                CustomerName: document.getElementById('CustomerName').value,
                ContactNo: document.getElementById('ContactNo').value
            }

            var bd = JSON.stringify(BookingDetails);

            $.ajax
            ({
                url: '@Url.Action("Appointment", "AddAppointment")',
                type: 'POST',
                contentType: "application/json; charset= utf-8",
                data: bd,
                dataType: 'json',
                success: function (results) {

                    @*window.location = '@Url.Action("Appointment", "AddAppointment")';*@

                }
            });
        }



    </script>
}

$(document).on("click", "#btnSubmit", function () {

    var data = $("#frmMyForm").serialize();

    $.ajax({
        async: true,
        type: "POST",
        data: data,
        url: "/Appointment/AddAppointment/",
        success: function () {
            //Do stuff here if needed
        },
        complete: function () {
            //Stuff here if needed
        }
    });
});

我使用了一个类型为submit的输入，它调用save（）；关于onclick事件

<input type="submit" onclick="save();" class="btn btn-default pull-right" value="Book Now"/>

以下是完整视图代码：

@model ZahidCarWash.ViewModels.AddBookingsViewModel

@{
    ViewBag.Title = "Add Appointment";
    Layout = "~/Views/Shared/_Layout.cshtml";
}


<!--  page banner -->
<div id="page-banner" class="page-banner-main" style="background-image: url('Content/images/bg/page-banner.jpg')">
    <div class="container">
        <div class="page-banner-block">
            <div class="section">
                <h3 class="section-heading">Appointments</h3>
            </div>
            <ol class="breadcrumb">
                <li><a href="index-2.html">Home</a></li>
                <li><a href="#">Page</a></li>
                <li class="active"><a>Appointments</a></li>
            </ol>
        </div>
    </div>
</div>
<!--  end page banner  -->
@*@using (Html.BeginForm("AddAppointment", "Appointment", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {*@
<!--  appointments -->
<div id="appointments" class="appointment-main-block appointment-two-main-block">
    <div class="container">
        <div class="row">
            <div class="section text-center">
                <h3 class="section-heading text-center">Get an Appointment</h3>
                @*<p class="sub-heading text-center">Etiam imperdiet imperdiet orci nunc nec neque phasellus leo dolor tempus non auctor.</p>*@
            </div>
            <div class="col-md-4 hidden-sm">
                <div class="appointment-img">
                    <img src="~/Content/images/appointment.jpg" class="img-responsive" alt="Appointment">
                </div>
            </div>
            <div class="col-md-8 col-sm-12">
                <div class="appointment-block">
                    <form id="appointment-form" class="appointment-form" method="post" action="https://mediacity.co.in/autoplus/car-wash/version1/appointment.php">
                        <h5 class="form-heading-title"><span class="form-heading-no">1.</span>Vehicle Information</h5>
                        <div class="row">

                            <div class="col-sm-4">
                                <div class="dropdown">

                                    @Html.DropDownListFor(Model => Model.fk_VehicleMakeID, new SelectList(ZahidCarWash.DAL.VehicleMakesRepository.getVehicleMakes(), "VehicleMakeID", "MakeTitle"),
          new { @class = "form-control" })

                                </div>
                            </div>
                            <div class="col-sm-4">
                                @Html.EditorFor(Model => Model.VehicleModel, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter Vehicle Model" } } )
                            </div>
                            <div class="col-sm-4">
                                @Html.EditorFor(Model => Model.VehicleRegNo, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter Vehicle Reg No." } })
                            </div>
                        </div>
                        <h5 class="form-heading-title"><span class="form-heading-no">2.</span>Available Timings</h5>
                        <div class="row">
                            @*<div class="col-sm-6">
                                    <input type="text" class="form-control date-pick" id="appointment-date" name="appointment-date" placeholder="Appointment Date" required>
                                </div>*@
                            <div class="col-sm-6">
                                <div class="dropdown">
                                    @Html.DropDownListFor(Model => Model.fk_TimeSlotID, new SelectList(ZahidCarWash.DAL.TimeSlotsRepository.getTimeSlots(), "TimeSlotID", "FromTo"), new { @class = "form-control" })
                                    @Html.ValidationMessageFor(Model => Model.fk_TimeSlotID, "", new { @class = "ErrorMessages" })

                                </div>
                            </div>
                        </div>
                        <h5 class="form-heading-title"><span class="form-heading-no">3.</span>Contact Details</h5>
                        <div class="row">
                            <div class="col-sm-4">
                                @Html.EditorFor(Model => Model.CustomerName, new { htmlAttributes = new { @class = "form-control", placeholder = "Customer Name" } })
                                @Html.ValidationMessageFor(Model => Model.CustomerName, "", new { @class = "ErrorMessages" })
                            </div>
                            <div class="col-sm-4">
                                @Html.EditorFor(Model => Model.ContactNo, new { htmlAttributes = new { @class = "form-control", placeholder = "Enter Contact Number." } })
                                @Html.ValidationMessageFor(Model => Model.ContactNo, "", new { @class = "ErrorMessages" })
                            </div>
                            @*<div class="col-sm-12">
                                    <textarea id="message" name="message" rows="6" placeholder="Message"></textarea>
                                </div>*@
                        </div>
                        <input type="submit" onclick="save();" class="btn btn-default pull-right" value="Book Now"/>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

@model ZahidCarWash.ViewModels.AddBookingsViewModel
@{
ViewBag.Title=“添加约会”；
Layout=“~/Views/Shared/_Layout.cshtml”；
}
约会


预约
@*@使用（Html.BeginForm（“AddAppointment”、“Appointment”、FormMethod.Post、new{enctype=“multipart/formdata”}））
{*@
预约
@*
Etiam imperdiet inperci nunc neque phasellus leo dolor tempus non auctor.
*@
1.车辆资料
@Html.DropDownListFor（Model=>Model.fk_VehicleMakeID，新选择列表（ZahidCarWash.DAL.vehiclemakes positional.getVehicleMakes（），“VehicleMakeID”，“MakeTitle”），
新的{@class=“表单控制”}）
@EditorFor（Model=>Model.VehicleModel，new{htmlAttributes=new{@class=“form control”，placeholder=“Enter Vehicle Model”}）
@Html.EditorFor（Model=>Model.VehicleRegNo，new{htmlAttributes=new{@class=“form control”，placeholder=“Enter Vehicle Reg No.”}）
2.可用时间
@*
*@
@Html.DropDownListFor（Model=>Model.fk_TimeSlotID，new SelectList（ZahidCarWash.DAL.TimeSlotsRepository.getTimeSlots（），“TimeSlotID”，“FromTo”），new{@class=“form control”}）
@Html.ValidationMessageFor（Model=>Model.fk_TimeSlotID，“，new{@class=“ErrorMessages”}）
3.联络资料
@EditorFor（Model=>Model.CustomerName，new{htmlAttributes=new{@class=“form control”，placeholder=“Customer Name”}）
@Html.ValidationMessageFor（Model=>Model.CustomerName，”，新的{@class=“ErrorMessages”}）
@EditorFor（Model=>Model.ContactNo，new{htmlAttributes=new{@class=“form control”，placeholder=“Enter Contact Number.”}）
@Html.ValidationMessageFor（Model=>Model.ContactNo，“，new{@class=“ErrorMessages”}）
@*
*@

您有

url:'@url.Action（“约会”、“添加约会”），

但您的控制器操作名称是：

公共操作结果添加约会（addbookingViewModel AddBookingVM）

（更新）

但是，在对$.ajax执行的操作中，也有一个

重定向到操作

，

$.ajax

应该有一个响应

通过将脚本更改为以下内容，尝试发送

HttpPost

事务：

function save() {
    var BookingDetails =
    {
        VehicleModel: document.getElementById('VehicleModel').value,
        VehicleRegNo: document.getElementById('VehicleRegNo').value,
        AppointmentTime: '1',
        CustomerName: document.getElementById('CustomerName').value,
        ContactNo: document.getElementById('ContactNo').value
    }

    var form = document.createElement("form");
    var url = '@Url.Action("Appointment", "AddAppointment")';
    form.setAttribute("method", "POST");
    form.setAttribute("action", url);
    for (var key in BookingDetails) {
        if (data.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", data[key]);
            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
    form.remove();
}

---

这是一个直接的

HttpPost

，脚本中不需要返回。它创建一个表单，附加要发送到操作的数据（通过创建隐藏输入），将表单添加到DOM，提交，然后删除它。

您有

url:'@url.action（“约会”，“添加约会”）“，

但您的控制器操作名称是：

公共操作结果AddAppointment（addbookingViewModel AddBookingVM）

（更新）

但是，在对$.ajax执行的操作中，也有一个

重定向到操作

，

$.ajax

应该有一个响应

通过将脚本更改为以下内容，尝试发送

HttpPost

事务：

function save() {
    var BookingDetails =
    {
        VehicleModel: document.getElementById('VehicleModel').value,
        VehicleRegNo: document.getElementById('VehicleRegNo').value,
        AppointmentTime: '1',
        CustomerName: document.getElementById('CustomerName').value,
        ContactNo: document.getElementById('ContactNo').value
    }

    var form = document.createElement("form");
    var url = '@Url.Action("Appointment", "AddAppointment")';
    form.setAttribute("method", "POST");
    form.setAttribute("action", url);
    for (var key in BookingDetails) {
        if (data.hasOwnProperty(key)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", key);
            hiddenField.setAttribute("value", data[key]);
            form.appendChild(hiddenField);
        }
    }

    document.body.appendChild(form);
    form.submit();
    form.remove();
}

---

这是一个直接的

HttpPost

，脚本中不需要返回。它创建一个表单，附加要发送到操作的数据（通过创建隐藏输入），将表单添加到DOM，提交，然后删除它。

如前所述，将按钮的类型更改为“按钮”。删除onclick属性并添加一个“id”。我们将使用此id捕获按钮单击

<input type="button" id="btnSubmit" class="btn btn-default pull-right" value="Book Now"/>

捕获Jquery中的点击，序列化表单并将表单发布到控制器

@section CustomScripts
            {
    <script type="text/javascript">

        function save() {
            var BookingDetails =
            {
                VehicleModel: document.getElementById('VehicleModel').value,
                VehicleRegNo: document.getElementById('VehicleRegNo').value,
                AppointmentTime: '1',
                CustomerName: document.getElementById('CustomerName').value,
                ContactNo: document.getElementById('ContactNo').value
            }

            var bd = JSON.stringify(BookingDetails);

            $.ajax
            ({
                url: '@Url.Action("Appointment", "AddAppointment")',
                type: 'POST',
                contentType: "application/json; charset= utf-8",
                data: bd,
                dataType: 'json',
                success: function (results) {

                    @*window.location = '@Url.Action("Appointment", "AddAppointment")';*@

                }
            });
        }



    </script>
}

$(document).on("click", "#btnSubmit", function () {

    var data = $("#frmMyForm").serialize();

    $.ajax({
        async: true,
        type: "POST",
        data: data,
        url: "/Appointment/AddAppointment/",
        success: function () {
            //Do stuff here if needed
        },
        complete: function () {
            //Stuff here if needed
        }
    });
});

---

希望这对您有所帮助，

如前所述，将按钮类型更改为“按钮”。删除onclick属性并添加“id”。我们将使用此id捕获按钮单击

<input type="button" id="btnSubmit" class="btn btn-default pull-right" value="Book Now"/>

捕获Jquery中的点击，序列化表单并将表单发布到控制器

@section CustomScripts
            {
    <script type="text/javascript">

        function save() {
            var BookingDetails =
            {
                VehicleModel: document.getElementById('VehicleModel').value,
                VehicleRegNo: document.getElementById('VehicleRegNo').value,
                AppointmentTime: '1',
                CustomerName: document.getElementById('CustomerName').value,
                ContactNo: document.getElementById('ContactNo').value
            }

            var bd = JSON.stringify(BookingDetails);

            $.ajax
            ({
                url: '@Url.Action("Appointment", "AddAppointment")',
                type: 'POST',
                contentType: "application/json; charset= utf-8",
                data: bd,
                dataType: 'json',
                success: function (results) {

                    @*window.location = '@Url.Action("Appointment", "AddAppointment")';*@

                }
            });
        }



    </script>
}

$(document).on("click", "#btnSubmit", function () {

    var data = $("#frmMyForm").serialize();

    $.ajax({
        async: true,
        type: "POST",
        data: data,
        url: "/Appointment/AddAppointment/",
        success: function () {
            //Do stuff here if needed
        },
        complete: function () {
            //Stuff here if needed
        }
    });
});

---

希望这对您有所帮助，

您是否已在浏览器的控制台中检查呼叫是否触发到服务器？并共享控制台信息。您似乎有一个提交按钮，但您指定了一个onclick事件。它是哪个？提交表单内容的提交按钮，还是一个可能包含您想要的事件的按钮