必须绑定submit事件并调用preventdefault()阻止跳转，再获取校验输入值，最后用$.ajax发送post请求；三步缺一不可，否则导致刷新中断或提交失败。
实现表单提交时阻止默认跳转、验证数据并发送 AJAX 请求，需要同时处理 DOM 绑定、事件拦截和服务器通信三个环节，缺一不可。
绑定 submit 事件并阻止页面刷新
在表单元素上使用 jQuery 的 .on('submit', ...) 方法监听提交动作，必须调用 e.preventDefault() 否则浏览器会执行原生提交导致页面跳转。
第一步：确保 jQuery 已加载且 DOM 就绪，用 $(document).ready(...) 包裹后续逻辑。
第二步：选择目标表单，例如 $('#loginForm')，对其绑定 submit 事件 → 在回调函数中接收事件对象 e → 立即执行 e.preventDefault()。
这一步漏掉 preventDefault() 就会触发整页刷新，所有后续 JS 逻辑将中断执行。
获取并校验用户输入值
方法一：用 .val() 逐个提取字段内容，适合字段少、校验规则简单的场景。
const username = $('#username').val().trim();
const password = $('#password').val();
方法二：用 $('form').serialize() 一键获取全部已命名字段的 URL 编码字符串，适用于标准表单提交，但无法对空值做即时判断。
注意：serialize() 只收集 name 属性存在且不为空 的表单控件，<input type="hidden"> 或禁用控件会被忽略。
发送 AJAX 提交请求
使用 $.ajax() 发起 POST 请求，URL 设为后端接口地址，data 使用序列化结果或手动构造的对象。
设置 dataType: 'json' 告知 jQuery 期望返回 JSON 格式，便于后续解析响应。
在 success 回调中处理成功响应，比如跳转页面或提示登录成功；在 error 回调中捕获网络失败、状态码异常等情况，给出明确错误提示。
这一步若未设置 contentType: 'application/x-www-form-urlencoded'（默认已有），而服务端依赖该头识别表单数据，则可能返回 400 错误。
