表单一点提交整页就刷新,想做成局部更新加个提示,这就是典型的 ajax 场景。老项目里 jQuery 的 $.ajax 用得最多,参数不多,但坑都集中在几个固定位置。
一个完整的最小示例
核心写法:$.ajax({url:'/api/save', type:'POST', data:{id:12, name:'tom'}, dataType:'json', success:function(res){ alert(res.msg); }, error:function(xhr){ alert('请求失败:' + xhr.status); }})。url 是接口地址,type 是请求方式,data 是发出去的数据,dataType 是期望的返回格式,success 和 error 分别处理成功和失败。
只发 GET 请求有更短的写法:$.get('/api/list', {page:1}, function(res){ console.log(res) }),POST 对应用 $.post,参数顺序一样。
表单数据的偷懒写法
表单字段一多,一个个取值太累,用 $('#myform').serialize() 把整个表单序列化成提交字符串,直接塞给 data 参数,字段名跟着 input 的 name 属性走。
常见报错对号入座
不进 success 反而进 error,先开浏览器开发者工具的网络面板看响应:状态码 500 是后端代码炸了;状态 200 却进 error,多半是 dataType 写了 json 而后端返回的不是合法 JSON,把 dataType 去掉让它自动判断就能验证。控制台报跨域相关提示,那是浏览器同源策略拦的,得后端加 CORS 响应头,前端改什么都没用。
接口响应慢就加 timeout 参数,单位毫秒,超时会走 error,别让用户干等。多个请求都要带 token 这类请求头,用 $.ajaxSetup 统一设置一次,别每个请求重复写。另外别用 async:false 把请求改成同步,页面会卡死在那等响应。
新项目没有历史包袱的话,原生 fetch 或 axios 是更现代的选择,promise 写法链式处理更顺手,jquery ajax请求主要用于维护存量的 jQuery 项目。