使用 AJAX 提交表单时，若未阻止默认提交行为，页面会立即刷新，导致基于 JavaScript 的通知（如 SimpleNotify）无法显示；需通过 e.preventDefault() 阻止表单默认提交，并将事件监听绑定到 form 的 submit 事件而非按钮的 click 事件。
使用 ajax 提交表单时，若未阻止默认提交行为，页面会立即刷新，导致基于 javascript 的通知（如 simplenotify）无法显示；需通过 `e.preventdefault()` 阻止表单默认提交，并将事件监听绑定到 `form` 的 `submit` 事件而非按钮的 `click` 事件。
在基于 jQuery 的表单异步提交场景中，一个常见却容易被忽略的问题是：通知组件（如 SimpleNotify ）在 success 回调中未生效 ，而 alert() 却能正常弹出。根本原因并非通知库加载失败或配置错误，而是表单仍按传统方式提交并触发了页面重载 ，导致 JS 执行流被中断，通知实例尚未渲染即被销毁。
✅ 正确做法：绑定 submit 事件 + 阻止默认行为
应将事件监听器挂载到
jQuery 1.12.4
jQuery 1.12.4是jQuery 1.x系列的最后一个正式稳定版本，由jQuery团队于2016年发布。该版本主要面向需要兼容旧版浏览器环境的网站和Web应用，尤其适用于仍需支持Internet Explorer 6、Internet Explorer 7、Internet Explorer 8等老旧浏览器的项目。
下载
<script src="https://cdn.jsdelivr.net/npm/simple-notify@1.0.8/dist/simple-notify.min.js"></script><script src="https://code.jquery.com/jquery-3.7.1.min.js"></script><script>
$(document).ready(function() {
$('#editForm').on('submit', function(e) {
e.preventDefault(); // ? 关键：阻止表单默认提交与页面跳转
const title = $('#title').val().trim();
const content = $('#content').val().trim();
$.ajax({
type: 'POST',
url: 'edit.php',
data: { title, content },
cache: false,
dataType: 'json', // 建议明确返回类型，便于后续处理
success: function(response) {
// ✅ 此处 now safely executes before page reload
new Notify({
status: 'success',
title: 'Saved!',
text: 'Your changes have been updated successfully.',
effect: 'fade',
speed: 300,
autoclose: true,
autotimeout: 3000,
gap: 20,
distance: 20,
position: 'right top'
});
},
error: function(xhr, status, error) {
console.error('AJAX Error:', status, error);
new Notify({
status: 'error',
title: 'Submission Failed',
text: 'Please check your connection and try again.',
effect: 'slide',
speed: 300,
autoclose: true,
autotimeout: 4000,
position: 'right top'
});
}
});
});
});
</script>
⚠️ 注意事项与最佳实践
不要绑定 click 到提交按钮 ：用户可能通过回车键提交表单，click 事件无法捕获该行为；submit 事件则覆盖所有提交方式。
确保资源加载顺序 ：simple-notify.min.js 必须在调用 new Notify() 之前完成加载；建议放在
