Question

我在mvc项目中有一个表单，并使用post方法将输入发送到控制器。如果我使用＆＃34;按钮＆＃34;一切都很好，但是如果我将其更改为＆＃34;提交＆＃34;它会一直刷新页面。

HTML：

<form role="form" id="login">
    <div class="form-group">
        <input type="text" class="form-control border-purple" id="postCode" placeholder="Postcode" value="3208SC">
    </div>
    <div class="form-group">
        <input type="text" class="form-control border-purple" id="huisNummer" placeholder="Huisnummer" value="20">
    </div>
    <div class="form-group">
        <input type="email" class="form-control border-purple" id="eMail" placeholder="EMail" />
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-zoeken" id="btnZoeken">@ReinisResource.SidebarButton</button>    
    </div>
</form>

这是我的js代码：

$("#login").submit(function() {
$("#mapStuff").empty();
$("#items").empty();
$("#historie").empty();

var selectedEmp = $(".drpDown :selected").text();
var postCodex = $("#postCode").val();
var huisNummerx = $("#huisNummer").val();
var eMailx = $("#eMail").val();

$("#empName").html(selectedEmp);

$.post("/Home/GetAddressCount", { postCode: postCodex, huisNumber: huisNummerx, eMail: eMailx }, function (response) {

    if (response.Count === 0) {
        $("#pers-info").hide();
        $("#btn-section").hide();
        $("#multipleAdd").hide();
        document.getElementById('inCorrectInfo').click();
    } else {
        $("#employeesList").hide();
        $("#pers-info").show();

        var houseInfo1 = response.Straat + " " + huisNummerx;
        var houseInfo2 = postCodex + " " + response.Woonplaats;
        $("#perceelInfo").html(houseInfo1 + "<br>" + houseInfo2);
        $("#meldingMaken-btn").addClass("active");
        $("#historie-btn").removeClass("active");
        if (response.Count === 1) {
            $("#multipleAdd").hide();
            reinis.ShowMapStuff();
            reinis.ShowItemStuff();
        } else {
            reinis.ShowMultipleAddress();
        }
    }
});

}）;

如果您问我为什么需要将其更改为＆＃34;提交＆＃34;来自＆＃34;按钮＆＃34;我想添加Jquery验证。我认为提交更好用于良好的编码。

提前致谢

Answer 1

<submit>和<button>元素的default behavior是提交表单并重定向到其他位置。为了防止重新加载页面，请确保阻止该行为：

$("#login").submit(function(e) {
    e.preventDefault();

    // Your code here
});

稍微不方便的方法是使用return false，但您必须要小心，因为它只是e.stopPropagation()和e.preventDefault()的简写。它会阻止事件冒泡，所以如果你正在嗅探源自#login元素的DOM树中更高的事件，它们将会丢失。

此外，return false;与e.preventDefault()不同，必须放在函数的最后一行，以便它不会阻止函数在中途执行，即：

$("#login").submit(function(e) {
    // Your code here

    // Last line
    return false;
});

Answer 2

嗯，这就是提交按钮的作用：）

您可以通过在处理表单的submit事件时阻止事件的默认行为来覆盖此行为：

$("#login").submit(function(e) {
    e.preventDefault();
    // the rest of the code
});

理想情况下，为了实现优雅降级，提交按钮（以及一般的表单）仍然应该通过发布表单和重新加载页面来为应用程序执行必要的操作。因此form 应该有一个action来调用正在调用的服务器端操作。

然后JavaScript代码将覆盖该行为（使用上述方法），并为正在调用的操作提供更友好的AJAX方法。

两者都应该有效，因此为了使用该应用程序，JavaScript不是必需的。

Answer 3

由于它是提交事件，因此除非您执行preventDefault或return false，否则它将提交，因为我可以看到您需要＆＃39; $。post`。

所以就是这样。

$("#login").submit(function(event){
  event.preventDefault();
 // followed by your code for $.ajax
});

更多信息 - http://www.w3schools.com/jquery/event_preventdefault.asp

event.preventDefault（）方法停止发生元素的默认操作。

例如：阻止提交按钮提交表单（这是您的情况）。

“提交”按钮正在刷新页面

3 个答案: