ajax调用后如何停止刷新页面？

Posted 2023-02-22

【中文标题】ajax调用后如何停止刷新页面？

【英文标题】：How to stop refreshing page after ajax call?

【发布时间】：2015-03-01 19:14:06

【问题描述】：

ajax 调用后我无法停止刷新页面。我试过把 e.preventDefault();并返回假；同样，但我的页面再次令人耳目一新。

我不知道代码有什么问题。请帮助我在 ajax 调用后停止刷新页面。解决这个问题对我有很大帮助。提前致谢。

这是我的代码：

$(document).ready(function() 
    $('#loginForm').on('click', function(e) 
        e.preventDefault();
        var formData = 
            'uname'  : $('#uname').val(),
            'pwd'    :      $('#pwd').val()
        ;
        $.ajax(
            type        : "POST",
            url         : "getresults.php", 
            data        : formData
        ).done(function(data) 
              alert(data+"This is working");
        ).fail(function(data) 
              alert("This is not working");
        );
    );
);

【问题讨论】：

#loginForm 是表单还是按钮？能否请您提供您的 html 代码？

【参考方案1】：

将type="button" 属性添加到按钮解决了我的问题。否则会被解释为提交操作。

【讨论】：

我添加了，我的页面还在刷新。

【参考方案2】：

id #loginForm 是否指向表单？如果是，则您需要收听提交事件而不是单击。如果你真的需要监听点击事件，你必须将事件绑定到提交按钮或任何触发form.submit()的东西。

试试这样的：

$('#loginForm').on('submit', function(e) 
    e.preventDefault();
    e.stopPropagation(); // only neccessary if something above is listening to the (default-)event too

    [YOUR CODE GOES HERE]
);

这应该对你有用。

【讨论】：

e.stopPropagation(); 在这里没用，你只需要防止默认行为;)

哦，你是对的......这只是我捕捉事件并防止它们发生正常行为的常用方法（我习惯于阻止它们冒泡）......我很快更新了我的答案;)

@hugohabel 和其他人：对不起。你是对的，它应该是“提交”。但是换了之后也忍不住刷新了。片刻后页面正在刷新。

大家好，感谢您的回复。我只提取了表单代码并提交了我的结果而没有刷新页面。我在同一页面中的其他代码存在一些问题。在我的研究中，我知道如果代码中有任何问题，页面将在提交时刷新。对吧？

【参考方案3】：

今晚早些时候发生在我身上，我找到了解决这个问题的方法 - 这可能是一个很长的问题，但我意识到我的问题是什么，并认为这可能会帮助将来处理这个问题的人。

您是在本地使用live-server 之类的东西，还是在同一工作文件夹中出现新文件时智能刷新本地代码的某种其他形式的脚本？如果是这样 - 页面刷新不是因为您的代码，而是因为您调用的任何 ajax 都操纵了您正在处理的文件夹，从而导致页面“更新”。

【讨论】：

谢谢！仍然不太确定实时服务器认为我的页面上的“更新”是什么，但从实时服务器切换到静态服务器阻止了“回发”

这在我的情况下有效，我使用实时服务器，我从没想过这是原因。我一关掉它就停了。

【参考方案4】：

我认为在点击功能后添加 return false 会阻止页面刷新

【参考方案5】：

当您打开 live server 扩展程序或类似的刷新 html 页面时，可能会发生这种情况。

【讨论】：

一个如何检查的例子会很有用。

这导致我的 vs code 实时服务器扩展出现问题。