event.preventDefault 阻止 ajax 调用

Posted 2023-02-21

【中文标题】event.preventDefault 阻止 ajax 调用

【英文标题】：event.preventDefault prevents ajax call

【发布时间】：2016-09-05 15:23:46

【问题描述】：

我一直在尝试让 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 语句。我还尝试在按钮单击事件上使用 preventDefault，方法是执行 elem.preventDefault();但这不起作用。也不使用 return false。

【问题讨论】：

如果你格式化你的代码会更容易。不要让别人帮助你更难。

最快的方法：将return false; 添加到您的onclick。 onclick="clickFunction(this); return false;"

你没有声明事件，这就是它失败的原因。如果您不想提交表单，请不要使用提交按钮。

将onclick="clickFunction(this)" 更改为onclick="clickFunction(this, event)" 并将event 参数添加到您的函数中，例如：function clickFunction(elem, event) ...

...啊，var data = $(this).serialize(); 应该是 var data = $(elem.form).serialize(); this 将是对 window 对象的引用，而 elem 是 button 所以 elem.form 将成为序列化的形式 （假设这是你想要的）.

【参考方案1】：

当您将this 传递给clickFunction(this) 时，Elem 将引用该按钮

但是按钮没有preventDefault()函数，所以你会得到一个Uncaught TypeError: elem.preventDefault is not a function

其次，$(this) 是引用窗口，应该是 $(elem.form)。

以下是我如何在不改变结构的情况下解决您的原始问题。

Html：（在clickFunction 中不传递this）

<button type="submit" class="styleHover styleButton" onclick="clickFunction()" id=  'Add_'.$newText > + </button>

javascript：（将 event.target 用于 elem，$(elem.form) 用于 $(this)）

function clickFunction(event) 
    var elem =  event.target; // event.target will be equivalent to your elem 
    var var1 =  elem.id;
    var var2 =  var1.split("_");
    event.preventDefault();


    if (var2[0] == "Add") 
        if (var2[1] == "Calls") 
            console.log("Calls");
            console.log(var1);
            event.preventDefault();
            var data = $(elem.form).serialize(); // should be elem.form here to get correct data
            $.post('progressSheetDynamic', data).done(function (response)
                $(".1").html(parseInt($('.1').html(), 10)+1);
                Calls.update(50);

            );
        
    

【参考方案2】：

问题似乎出在这一行：

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

应该是这样的：

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

函数中的this 值将是对window 对象的引用，而elem 是button 所以elem.form 将是序列化的形式（假设这是您的数据通缉）。

并且如cmets中所说，event在某些浏览器中只定义为全局变量，所以需要在属性中传递event并在函数中接收才能安全。

属性：

onclick="clickFunction(this, event)"

功能：

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

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

【参考方案3】：

event 不会被定义，因为你还没有通过它。您正在使用onclick="clickFunction(this) 传递按钮。

将其更改为onclick="clickFunction(event)"。

然后更改函数声明：

function clickFunction(event) 
    console.log(event)
    ...

如果你想要按钮和事件，看看我有什么：

<button type="submit" class="styleHover styleButton" onclick="clickFunction(event, this);" />

<script>
    function clickFunction(event, elem) 

        console.log(event);
        console.log(elem);
        event.preventDefault();
        
</script>