js-day05培训内容_easyui1

【JavaScript EasyUI 省市区三级联动实现】 在JavaScript中，EasyUI是一个基于jQuery的UI框架，用于快速构建用户界面。在本培训内容中，我们将关注如何使用EasyUI组件实现省份-城市-区域的三级联动效果，特别是通过Struts2整合AJAX实现非数据库版本。 1. **jQuery AJAX 交互** - 在JavaScript中，`$.ajax()`函数是jQuery提供的异步数据通信方法，用于向服务器发送请求并处理响应。在示例代码中，`type:"POST"`定义了请求类型为POST，`url`指定了请求的URL，`data`是发送的数据，`success`则是请求成功后的回调函数。 - 通过监听`$("#province")`的选择变化，当选择省份时，删除已有城市选项，并根据所选省份通过AJAX获取对应城市列表。 2. **Struts2 Action配置** - `ProvinceCityAction`类是Struts2中的一个Action，它处理AJAX请求。`setProvince()`和`getProvince()`用于接收和返回省份信息，`findCityByProvince()`方法根据省份动态生成城市列表。注意，这里的城市列表是硬编码的，实际应用中应从数据库中获取。 - `cityList`属性用于存储城市列表，`getCityList()`方法返回城市列表，便于在视图层使用。 3. **JSON 数据格式** - Struts2的JSON插件允许我们返回JSON格式的数据。在`findCityByProvince`方法中，我们期望返回的对象是`{"cityList":["邵阳","浏阳"]}`这样的格式，方便前端解析并填充到城市选择框中。 4. **Struts2 配置** - `<package name="timePackage" extends="json-default" namespace="/">`定义了一个名为`timePackage`的Struts2包，继承自`json-default`，确保能处理JSON类型的返回结果。 - `<result name="ok" type="json"/>`定义了当Action方法执行成功后，返回结果类型为JSON。 - 对于`loadTimeRequest`动作，它是一个获取服务器时间的例子，展示了如何配置Struts2处理其他类型的请求。 5. **HTML 结构与事件绑定** - HTML部分包含省份和城市的下拉选择框。省份选择框有默认的“选择省份”选项和两个预设省份。城市选择框则初始只有一个“选择城市”选项，通过JS动态填充。 - `$("#province").change()`事件监听省份选择框的变化，触发AJAX请求，更新城市列表。 6. **EasyUI组件的使用** - 虽然标题中提到了EasyUI，但示例代码中并没有直接使用EasyUI组件。EasyUI通常用于创建如表格、对话框、布局等复杂UI元素。在实际项目中，可以结合EasyUI的`combobox`组件来创建具有联动功能的下拉框，提供更丰富的用户体验。 总结，本培训内容主要讲解了如何通过JavaScript的AJAX技术，结合Struts2框架实现省份-城市-区域的三级联动，以及如何返回和处理JSON数据。虽然没有直接涉及EasyUI组件，但可以进一步学习如何利用EasyUI的组件优化这一过程，提升用户体验。