javascript - 阻止表单重定向？

Question

这个问题已经被问过并回答过很多次了。我已经搜索过所以找不到有效的解决方案。我尝试了e.preventdefault()并return false。两者都不起作用。然后我发现我需要回到 AJAX 并且不能使用 Promise，我拒绝这样做，并且我拒绝认为没有办法用 Promise 来做到这一点。

无论如何，

代码:

var submitDataForm = function () {
    console.log("button called");


    var email = document.getElementById('email');
    var first = document.getElementById('first-name');
    var last = document.getElementById('last-name');
    var web = document.getElementById('domain');
    var city = document.getElementById('city');
    var obj = document.getElementById('obj');
    var describe = document.getElementById('describe');
    var brandpower = document.getElementById('brandpower');

    if (email.checkValidity() && first.checkValidity() && web.checkValidity() && city.checkValidity() && obj.checkValidity()) {
        var emailV = email.value;
        var firstV = first.value;
        var webV = (web.value == undefined) ? 'null' : web.value;
        var cityV = city.value;
        var objV = obj.options[obj.selectedIndex].value;
        var describeV = (describe && describe.options && describe.selectedIndex) ? describe.options[describe.selectedIndex].value : describe.value;
        var brandpowerV = (brandpower && brandpower.options && brandpower.selectedIndex) ? brandpower.options[brandpower.selectedIndex].value : brandpower.value;
        var radio = jQuery('input[name="dealer"]:checked').val();


        jQuery.post("/form-one/?" + "email=" + emailV + "&first=" + firstV +
                cityV + "&domain=" + webV + "&obj=" + objV + "&describe=" + describeV + "&brandpower=" + brandpowerV +
                "&radio=" + radio, function () {
                    console.log("data sent");
                })
                .done(function () {
                    console.log("data success");
                })
                .fail(function () {
                    console.log("data failed");
                })
                .always(function () {
                    console.log("data finished");
                    email.value, first.value, web.value, city.value, obj.value, describe.value, brandpower.value = "";
//window.location.href = "/";
                });
    } else {
        $('#error').css('display', 'block').delay(5000).queue(function (next) {
            jQuery('#error').fadeOut('slow').css('display', 'none');
        });
    }
}


<button id="next" class="green-button" onClick="submitDataForm()">Next</button>

同样，我试图让表单除了提交数据(稍后将添加自定义事件)之外什么都不做，而无需刷新或重新加载。

谢谢!

Answer 1

event.preventDefault 确实有效。正如nnnnnn指出的，您没有显示您在哪里尝试过它，但我怀疑您没有正确使用它，很可能您没有将事件传递到处理程序中而e或event(无论你怎么命名)实际上是未定义。以下是正确使用它的一种方法的示例:

$('.ajax-submit').click(function(event) {
  event.preventDefault();
  console.log("button called");
  //... all your other code here
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<form action="">
<button id="next" class="green-button ajax-submit" > Next</button>
</form>