javascript - event.preventDefault 阻止 ajax 调用

Question

我一直在尝试让 ajax 调用在由 onclick 事件触发的函数内部工作。当我使用 event.preventDefault 时，页面没有重新加载但 ajax 调用不起作用，没有数据添加到我的数据库中。当我注释掉该行时，页面会重新加载，但其他一切正常。

function clickFunction(elem) {
    var var1 =  elem.id;
    var var2 =  var1.split("_");
    //  elem.preventDefault();


    if (var2[0] == "Add") {
        if (var2[1] == "Calls") {
            console.log("Calls");
            console.log(var1);
            event.preventDefault();
            var data = $(this).serialize();
            $.post('progressSheetDynamic', data).done(function (response){
                $(".1").html(parseInt($('.1').html(), 10)+1);
                Calls.update(50);

            });
        }
    }
}

HTML代码

<form action="{{ route("progressSheetDynamic") }}" method="post" id= {{ $addID }}>
    <input name="increment" value="increment" type="hidden"> </input>
    <input type="hidden" name="id" value= {{$activities}} >
    <button type="submit" class="styleHover styleButton" onclick="clickFunction(this)" id= {{ 'Add_'.$newText }}> + </button>
</form>

我检查了日志，函数进入了 if 语句。我还尝试通过执行 elem.preventDefault(); 在按钮单击事件上使用 preventDefault；但这不起作用。使用 return false 也不行。

Answer 1

问题似乎与这一行有关:

var data = $(this).serialize();

应该是这样的:

var data = $(elem.form).serialize();

函数中的 this 值将是对 window 对象的引用，而 elem 是 button 所以 elem.form 将是序列化 的表单(假设这是您想要的数据)。

并且如注释中所述，event 仅在某些浏览器中被定义为全局变量，因此您需要在属性中传递 event 并在功能安全。

属性:

onclick="clickFunction(this, event)"

功能:

function clickFunction(elem, event) {
  // ...
}

请注意，IE8 及更低版本没有 event.preventDefault()，但您可以设置 event.returnValue = false。