13、为购物车添加 Ajax 支持：实现流畅购物体验

为购物车添加 Ajax 支持：实现流畅购物体验

在现代 Web 应用开发中，为用户提供流畅、高效的交互体验至关重要。本文将介绍如何为购物车添加 Ajax 支持，实现无刷新更新购物车的功能。我们将逐步完成两个主要迭代：移动购物车到侧边栏和创建基于 Ajax 的购物车。

1. 理解 Ajax

在过去，浏览器被视为简单的设备。当用户与基于浏览器的应用程序交互时，每次操作都会导致整个页面重新加载，这不仅耗费时间，还占用大量带宽和服务器资源。然而，现代浏览器具备运行 JavaScript 的能力，通过 JavaScript 可以在后台与服务器进行异步交互，从而实现页面的动态更新，这种交互方式被称为 Ajax（Asynchronous JavaScript and XML）。

2. 迭代 F1：移动购物车到侧边栏

当前，购物车由 CartController 中的 show 动作和相应的 .html.erb 模板渲染。我们的目标是将购物车显示移动到侧边栏，为此需要使用部分模板。

2.1 部分模板的概念

部分模板类似于视图的方法，是一个独立文件中的视图片段。可以从另一个模板或控制器中调用（渲染）部分模板，并且可以向其传递参数，以实现不同的渲染结果。

2.2 优化购物车显示

首先，我们对购物车显示进行优化。原始的购物车显示代码如下：

<article>
  <% if notice %>
    &