Jquery .submit() 不工作，但提交按钮工作正常

Question

我有一个 .cshtml 页面，其中包含作为带有实体框架的 MVC 的一部分的表单。

当我单击提交按钮时，表单正确提交。如果我使用 jquery 来模拟单击提交按钮，则表单会正确提交。如果我使用 AJAX 将表单发布到控制器，它就可以工作。但是我尝试过的任何 $('form').submit() 变体都会返回错误：

SyntaxError：JSON.parse：JSON 数据的第 1 行第 1 列出现意外字符。

显然我可以使用其他方法之一来提交表单，但我只是好奇为什么 .submit() 不起作用。

这是我的 .cshtml 页面：

@model MVC.ViewModels.OrderView

@{
    ViewBag.Title = "Orders";
}
<div id="autosuggest_pricelist"></div>
<script type="text/javascript" src="@Url.Content("~/Scripts/orders_edit.js")"></script>

@using (Html.BeginForm("Orders","PriceList", FormMethod.Post, new { id = "form1" })) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Orders</legend>
            @Html.HiddenFor(model => model.OrderID)
    <div class="columns">
        <div>
        <div class="editor-label">
            @Html.LabelFor(model => model.Supplier)
        </div>
        <div class="editor-field">
            @Html.DropDownListFor(model => model.AssociateID,(SelectList) ViewBag.Suppliers)
            @Html.ValidationMessageFor(model => model.AssociateID)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.OrderDate)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OrderDate)
            @Html.ValidationMessageFor(model => model.OrderDate)
        </div>
        </div>
        <div>
        <div class="editor-label">
            @Html.LabelFor(model => model.OrderStatus)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OrderStatus)
            @Html.ValidationMessageFor(model => model.OrderStatus)
        </div>

        <div class="editor-label">
            @Html.LabelFor(model => model.OrderNotes)
        </div>
        <div class="editor-field">
            @Html.EditorFor(model => model.OrderNotes)
            @Html.ValidationMessageFor(model => model.OrderNotes)
        </div>
        </div>
        </div>
        <div class="clear">
            <input class="inputlabel" style="width:15em;" disabled="disabled" value="Description" />
            <input class="inputlabel" disabled="disabled"; value="Quantity" />
            <input class="inputlabel" disabled="disabled"; value="Stock" />
            <input class="inputlabel" disabled="disabled"; value="Received" />
            <input class="inputlabel" disabled="disabled"; value="Invoiced" />
        </div>
        <div>
        @Html.EditorFor(model=>model.OrderDetailView)
        </div>
        @Html.ActionLink("Related Invoices","OrdersToInvoices","AuditTrail",new {id=Model.OrderID},new{})

        <p>
            <input type="submit" value="Save" />
            <input type = "button" value = "Import" id="import"/>
            <input type="button" value="jquery submit" id="btnSubmit" />
        </p>
    </fieldset>
}

<div>
    @Html.ActionLink("Back to List", "OrderList", new { count = 10 })
</div>

下面的jquery返回错误：

$('#btnSubmit').click(function () {
    try {
        $('form').submit();
    }
    catch (err) {
        alert(err)
    }
})

而这会提交表单：

$.ajax({
                    type: "POST",
                    url: "/PriceList/Orders",
                    data: $('form').serialize(),
                    success: function () {
                    }
                })

和

$('#id_of_submit_button').click();

如何查看每个实例中表单提交的 JSON 数据？比较提交按钮而不是 .submit() 提交的 Json 可能会告诉我发生了什么。

Answer 1

我猜您正在尝试以默认方式提交表单，对吧？ $('form').submit()和$('form')[0].submit()有什么区别？

我的理解是：

$('form').submit(); //which is equivalent to
$('form').trigger( 'submit' );

触发submit 事件，从而触发任何已定义的submit handlers； 因此错误可能是由递归提交事件触发器引起的。另一方面：

$('form')[0].submit(); //which is equivalent to
document.forms[0].submit(); //or
this.form.submit(); //where 'this' references a button in the form

只需像单击提交按钮一样提交表单，并且没有 return false 和 'event.preventDefault()` ... 简而言之，默认表单提交。

我认为第二种形式是你想要的。