javascript - 当我使用 JavaScript 提交时，为什么我的表单仍然重置？

Question

我正在使用 JavaScript 提交表单。

这是我的表格:

 <form id="rolesSelectForm" class="stdform" action="" onsubmit="return submitForm()">

<p>
    <label>Select User</label>
    <span class="field">
        <select name="selectUser" id="selectUser">
            @foreach (var item in Model.Users)
            {
                <option value="@item.Id">@item.UserName</option>
            }
        </select>
    </span>
</p>
<p class="stdformbutton">
    <button class="submit radius2" type="submit">Save</button>
</p>

这是我的脚本:

<script>
function submitForm() {

    var usersRoles = new Array;
    jQuery("#dualSelectRoles2 option").each(function () {
        usersRoles.push(jQuery(this).val());
    });

    var model = new Object();
    model.userId = jQuery('#selectUser').val();
    model.rolesList = usersRoles;

    console.log('model: ' + 'user: ' + model.userId + 'roles: ' + model.rolesList);
    console.log('JSON: ' + JSON.stringify(model));

    jQuery.ajax({
        type: "POST",
        url: "@Url.Action("AddUser")",
        dataType: "json",
        contentType: "application/json",
        data: JSON.stringify(model),
        success: function (data) { showSuccessMessage(data); },
        failure: function (errMsg) {
            alert(errMsg);
        }
    });
}

//Shows the success message
function showSuccessMessage(data) {
    alert(data);
}

现在，当我单击按钮时，页面会刷新，但我从未收到警报。

在 Chrome 中，它至少会发出 ajax post 请求，但在 Firefox 中，它只是在发布之前重新加载页面。

据我所知，如果我让表单返回 JavaScript 函数，它就不会重新加载。但这不是我的情况。

Answer 1

From what I read if I made my form return the java script function it would not reload.

没有。您必须返回false。

这通常是通过返回函数的返回值，然后从该函数返回 false 来完成的。很多时候，这将有条件地完成(因为在允许表单提交之前，您通常会测试用户输入以确保其正常。)

您的函数中没有 return 语句。