在前端开发中，我们经常需要避免页面的任何形式的刷新，例如当用户提交表单时，我们希望页面不会重新加载，只是更新部分内容。本文将介绍如何使用 jQuery / JavaScript 防止页面刷新。
方法一：使用 preventDefault()
preventDefault() 是一个事件对象的方法，可以阻止浏览器执行与事件关联的默认动作。例如，在表单提交事件中使用 preventDefault() 可以防止表单提交后页面刷新。
以下是一个使用 preventDefault() 的示例：
-------------------------------- - ----------------------- -- ------ ---
在这个示例中，我们捕获了 form 的 submit 事件，并调用了 event.preventDefault() 方法，这样就可以防止表单提交后页面刷新。然后，我们可以处理表单数据，而无需刷新整个页面。
方法二：使用 AJAX
AJAX (Asynchronous JavaScript and XML) 是一种在不重新加载整个页面的情况下更新部分页面的技术。使用 AJAX，可以通过向服务器发送异步请求来更新页面内容，而不是重新加载整个页面。
以下是一个使用 AJAX 的示例：
--------
---- ---------------
----- -------
----- ----------------------
-------- -------------- -
-- ------
-
---在这个示例中，我们使用 $.ajax() 方法向服务器发送了一个 POST 请求，并将表单数据作为参数传递。当服务器响应成功时，我们可以在 success 回调函数中更新页面内容。
方法三：使用 pushState()
pushState() 是 HTML5 中新增的一个 API，可以通过修改浏览器的 URL 并将状态保存到浏览器历史记录中来实现前端路由。使用 pushState()，可以在不刷新整个页面的情况下更新页面内容。
以下是一个使用 pushState() 的示例：
---------------------------- - ----------------------- --- ---- - --------------------- ----------------------- ----- ------ -- ------ ---
在这个示例中，我们捕获了 a 标签的 click 事件，并调用了 event.preventDefault() 方法，这样可以阻止浏览器跳转到链接对应的页面。然后，我们使用 history.pushState() 方法将新的 URL 添加到浏览器历史记录中，并更新页面内容。
总结
本文介绍了三种防止页面刷新的方法：使用 preventDefault()、使用 AJAX 和使用 pushState()。使用这些方法可以让我们在不刷新整个页面的情况下更新页面内容，提高用户体验。
希望本文能够对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/13473