整页跳转和 Ajax 到底差在哪？结合 Go 书城项目讲清楚

个人主页会编程的土豆欢迎来访作者简介后端学习者❄️个人专栏数据结构与算法数据库leetcode✨那些你一个人走过的夜路终将化作照亮未来的光学 Web 的时候很多人会卡在一件事上我点了个按钮后端怎么知道页面为什么有时会刷新有时又只变一小块字我在跟一个 Go 标准库写的网上书城时把交互大致分成了两类整页跳转点链接、提交表单地址栏变了整页刷新Ajax 局部更新JS 偷偷发请求地址栏不变只改页面一小块下面按这个项目里的真实写法展开。看完最好自己点一遍「查价格」和「加入购物车」体感会差很多。1. 先记结论整页跳转Ajax谁发请求浏览器按 HTML 规则发JS如 jQuery/fetch发地址栏通常会变通常不变页面整页换成新 HTML不整页刷新JS 改局部后端常回什么一整页 HTML一小段文字或 JSON书城例子查价格、翻页、登录加购、改购物车数量两种都是 HTTP 请求差别主要在谁发起、回来之后浏览器怎么处理。2. 方式一整页跳转点链接 / 提交表单2.1 点链接页面上常见这种a href/getPageBooksByPrice?pageNo2min20max30下一页/a你一点「下一页」浏览器读取href向服务器请求这个地址一般是 GET服务器返回一整页 HTML浏览器扔掉旧页面显示新页面地址栏变成新的 URL参数直接写在 URL 的?后面后端用r.FormValue(pageNo)之类就能取到2.2 提交表单书城首页查价格类似form action/getPageBooksByPrice methodPOST 价格input typetext namemin 元 - input typetext namemax 元 button查询/button /form一点「查询」浏览器找到这个form看action寄到哪和methodGET 还是 POST收集带name的输入框比如min20max30发 HTTP 请求到/getPageBooksByPrice服务器查库、填充模板返回新的index.html浏览器整页刷新显示结果POST 时请求大概长这样示意POST /getPageBooksByPrice HTTP/1.1 Host: 127.0.0.1:8080 Content-Type: application/x-www-form-urlencoded min20max30注意URL 不是“前端另外去获取”的而是写在action/href里的浏览器负责按规则发包。2.3 后端这边在干什么以查价格为例路径在main.go里挂到 controller例如/getPageBooksByPrice → GetPageBooksByPrice函数里大致FormValue取出pageNo、min、max调 dao 查数据库可按价格筛再分页template.ParseFilesExecute(w, page)把数据填进 HTML整页 HTML 通过响应返回浏览器特点就是几乎不靠 JSON回来就是一张新网页登录、注册、看购物车页、翻页很多都是这一类3. 方式二Ajax 局部更新JS 发请求3.1 为什么需要它加购如果也整页刷新体验很差点一下「加入购物车」整个首页闪一下重载更合理的是页面还在后台把书加进购物车页面上只提示一句「已加入当前共 x 件」这就是 Ajax 的典型场景。3.2 书城里怎么写项目用的是 jQuery大意是$(.addBook2Cart).click(function () { var bookId $(this).attr(id); $.post(/addBook2Cart, { bookId: bookId }, function (res) { // 根据返回内容更新提示文字、购物车数量等 }, json); });和整页跳转的差别不是浏览器自动按form/a跳走是JS 在当前页发 HTTP 请求地址栏可以完全不变返回内容由 JS 自己处理而不是整页替换用fetch也能做同类事思想一样JS 发请求自己处理响应。3.3 后端怎么回AddBook2Cart这类接口通常从请求里取bookId以及 Cookie判断登录改数据库购物车不渲染整页模板而是往w里写一小段结果成功时可能回 JSON例如{ok:true,msg:已将《边城》加入购物车,totalCount:3}失败时也可能回纯文字比如请先登录。前端拿到后若是「请先登录」→ 跳登录页若是成功 JSON → 把提示写到页面某个span里页面主体还在只动了一小块。改购物车数量也类似输入框change后发 Ajax回来更新总价、小计不必整页刷新。4. 两条路对比着记相同点都是浏览器或 JS向某个 URL 发 HTTP 请求都由main.go按路径匹配到 Go 函数后端都能从请求里取参数、查库、写响应不同点环节整页跳转Ajax触发a/form按钮绑定的 JS发请求的“人”浏览器导航机制你的脚本响应内容完整 HTML 文档文本 / JSON 等“碎片”浏览器默认行为用新文档替换当前页几乎不管交给回调函数地址栏变一般不变一句话整页跳转是“换一张完整网页”Ajax 是“要一小段数据自己改页面”。5. 结合书城哪些功能属于哪一类更偏整页跳转首页/main价格查询、分页链接登录 / 注册表单提交后换页打开购物车页/getCartInfo我的订单、后台图书列表注销后跳转首页更偏 Ajax加入购物车/addBook2Cart修改购物车某项数量/updateCartItem注册时检查用户名是否可用/checkUserName同一个项目里两种都会用页面跳转负责“换场景”Ajax 负责“当前页上的小动作”。6. 后端视角都是 URL → 函数差在“回什么”很多人以为 Ajax 很神秘。其实对 Go 标准库来说入口差不多请求打到某个路径 → HandleFunc 找到对应 controller → 用 r 读参数 → 用 w 写回去差别主要在写回去的内容整页template.Execute(w, data)→ HTMLAjaxw.Write(...)或json.NewEncoder(w).Encode(...)→ 短文本/JSON有时还有http.Redirect→ 告诉浏览器再去另一个地址也常伴随整页变化所以学后端时不必把 Ajax 想成另一套协议它还是 HTTP只是前端处理响应的方式不同。7. 一个容易混的点参数在哪不管整页还是 Ajax参数常见几种放法URL 查询串?pageNo2min20表单体min20max30application/x-www-form-urlencodedJSON 体{bookId:5}很多现代 API 爱用本课设加购更常见的是表单字段 POSTGo 里经常用r.FormValue(xxx)读前两种。读 JSON 则要解析 body和 FormValue 不是同一条路。书城课设表单 URL 参数为主Ajax 成功时响应侧 JSON 更多一些点「查询价格」看地址栏和页面是否整页刷新登录后点「加入购物车」看地址栏是否不变、提示是否局部出现打开浏览器开发者工具 Network 面板整页请求的响应类型多半是document/ HTMLAjax 请求的响应可能是 JSON 或一小段 text再对照main.go里路径对应哪个函数基本就能串起来。9. 收束我自己是这么记的整页跳转链接和表单是主角浏览器换页后端爱回 HTMLAjaxJS 是主角页面不走后端爱回“小数据”前端自己改 DOM这个 Go 书城恰好两种都有逛书、筛选、登录走整页加购、改数量走 Ajax。把这两条请求链路都跟一遍前后端怎么交互就不容易再懵了。如果要写成系列下一篇可以专门拆一次AddBook2Cart从点击到 JSON 返回的完整调用链controller → dao → 再写回w。