动态联动是指在网页中使用Ajax和JSON技术，实现不同组件之间的数据传递和联动交互。通过动态联动，可以使页面中的各个组件（如下拉列表、复选框、文本框等）在用户进行操作时，自动根据操作结果进行相应变化，从而提升用户体验。下面以商品分类选择为例，来说明Ajax和JSON的动态联动。

假设我们正在开发一个电商网站，需要用户在商品页面中选择商品分类进行筛选。我们希望当用户选择了一级分类后，根据一级分类的选择结果，动态加载对应的二级分类，并可继续选择二级分类。最终商品的筛选结果将根据用户选择的分类进行展示。

首先，我们需要在前端页面中定义一级分类和二级分类的两个下拉列表。使用HTML如下：

<select id="level1" onchange="loadLevel2(this.value)">
<option value="1">电子产品</option>
<option value="2">家居用品</option>
</select>
<select id="level2"></select>

以上代码中，第一个下拉列表是一级分类的选择框，当用户选择一级分类后，通过onchange事件触发loadLevel2函数。第二个下拉列表是二级分类的选择框，用于动态加载二级分类。

接下来，我们需要使用Ajax和JSON来实现动态联动。在JavaScript中，编写loadLevel2函数：

function loadLevel2(level1Id) {
// 发送Ajax请求获取对应一级分类的二级分类
$.ajax({
url: 'getLevel2.php',
method: 'POST',
data: {
level1Id: level1Id
},
dataType: 'json',
success: function(response) {
var level2Select = $('#level2');
level2Select.empty(); // 清空二级分类的选择框
for (var i = 0; i< response.length; i++) {
// 动态添加二级分类选项
level2Select.append('<option value="' + response[i].id + '">' + response[i].name + '</option>');
}
}
});
}

以上代码中，通过Ajax发送POST请求到后端接口getLevel2.php，传递一级分类的id。后端接口根据一级分类的id，查询数据库，获取对应的二级分类数据，并将数据以JSON格式返回。

在前端的success回调函数中，我们使用response参数接收后端返回的数据。首先，我们清空二级分类的选择框，然后使用JavaScript动态添加二级分类的选项。 例如，当用户选择一级分类为“电子产品”时，后端接口返回的数据可能如下：

[
{
"id": "1",
"name": "手机"
},
{
"id": "2",
"name": "电视"
}
]

通过JavaScript的for循环，我们将上述数据动态添加到二级分类的选择框中。当用户选择二级分类后，可以再次触发其他操作，如加载对应的商品列表。

综上所述，通过Ajax和JSON的动态联动，我们实现了商品分类选择的功能。当用户选择一级分类时，页面会自动加载对应的二级分类，并改变商品列表的展示结果。动态联动不仅提升了用户体验，还提供了更好的交互方式。