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和＆＃39; event.preventDefault（）`...简称默认表单提交。

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

Jquery .submit（）不工作但提交按钮工作正常

1 个答案: