提交表单导致未找到引用的 javascript 错误

Question

我正在尝试通过 xmlHttpRequest - Ajax 提交文件，例如。问题是当我单击输入按钮时，表单正在刷新并尝试将其发布到呈现此页面的操作方法。在提交按钮上单击我想发布到控制器上的操作方法-fileUploadUrl，这是一个 HTTP Post 返回 JSON。似乎我的 document.getElement 表单提交功能根本没有触发，它正在发布到这显然是不正确的。 /ErrorCode/Step1?id=form&enctype=multipart%2Fform-data.

我正在尝试遵循这个例子post a via ajax

@model Models.ErrorCodesStepsViewModel
@{
    ViewBag.Title = "Error Codes";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<link href="@Url.Content("~/Content/css/Site.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/chosen.css")" rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/css/jquery.stepy.css")" rel="Stylesheet" type="text/css" />
<script src="@Url.Content("~/Scripts/jquery.stepy.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/chosen.jquery.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.MultiFile.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.fancytree.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.fancytree.filter.js")" type="text/javascript"></script>
<link href="@Url.Content("~/Content/themes/skin-xp/ui.fancytree.css")" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    var errorsSystemList = '@Url.Action("FindErrorSubsystem", "ErrorCode")';
    var instrumentSelectionUrl = '@Url.Action("Step2", "ErrorCode")';
    var fileUploadURL = '@Url.Action("Upload", "ErrorCode")';

    $(function () {
        $('form').stepy({
            backLabel: '<<',
            nextLabel: '>>',
            finishButton: false,
            next: function (index) {
                var v = $("#InsIdLst").chosen().val();
                if (v == null && index == 2) {
                    alert("Please select an Instrument");
                    return false;
                }
                else {
                    var overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');
                    $.ajax({
                        type: 'GET',
                        url: instrumentSelectionUrl,
                        cache: false,
                        datatype: "html",
                        data: $("form").serialize(),
                        success: function (result) {
                            $("#errorCodes").html(result);
                            overlay.remove();
                        }
                    });
                }
                if (index == 3) {
                }
            }
        });
    });

}

<script type="text/javascript">



    $(document).ready(function () {
        $("#InsIdLst").chosen({ max_selected_options: 1 });

        $("#errorCodes").fancytree({

            icons: false
        });

        var errorTree;
        errorTree = $("#errorCodes").fancytree("getTree");

        var myform = document.getElementById("#form");


        $(myform).onsubmit = function () {
            alert("x");
            var formdata = new FormData(); //FormData object
            var fileInput = document.getElementById('fileInput');
            //Iterating through each files selected in fileInput
            for (i = 0; i < fileInput.files.length; i++) {
                //Appending each file to FormData object
                formdata.append(fileInput.files[i].name, fileInput.files[i]);
            }
            //Creating an XMLHttpRequest and sending
            var xhr = new XMLHttpRequest();
            xhr.open('POST', fileUploadURL);
            xhr.send(formdata);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            }
            return false;
        }

    });

</script>



  @using (Html.BeginForm(new { id = "form", enctype = "multipart/form-data" }))
{
    <fieldset title="Select">
        <legend>instrument</legend>
        <div class="bodyContent">
            <span class="rightContent">
                @Html.ListBoxFor(model => model.SelectedInstrumentTypeID, Model.InstrumentTypeIds, new { id = "InsIdLst", name = "listbox", @class = "chosen-select", multiple = "multiple", data_placeholder = "Click here to Select An Instrument...", style = "width:90%;", tabindex = "5" })
            </span>
        </div>
    </fieldset>
    <fieldset title="View">
        <legend>Problem codes</legend>
        <div id="errorCodes">
        </div>
    </fieldset>
    <fieldset title="Upload">
        <legend>upload file</legend>
        <div class="bodyContent">
            <input id="fileInput" type="file" />
            <input type="submit" value="Upload file" />
        </div>
    </fieldset>
    <fieldset title="Review">
        <legend>description two</legend>
        <!-- inputs -->
    </fieldset>
    <fieldset title="Save">
        <legend>description two</legend>
        <!-- inputs -->
    </fieldset>
}

Answer 1

由于您使用的是 jQuery，因此您不应绑定到原生 onsubmit 事件，而是绑定到 submit 事件：

var $myForm = $("#myForm").on("submit", function(event) {
   return $.ajax({
       // ...
   }).then(function() { return false; });
});

注意代码中的return false；如果不返回false，表单会正常提交。

或者，您可以使用简写的submit jQuery 方法。 See the documentation 了解更多信息。