场景举例:分类信息展示
(1)需求:表单中用户姓名与职业的分类信息展示
1、初步模板如下

2、需求:做一个用户编辑操作,但这里注意职业是从服务端动态差进来的
所以这里需要两张表,即用户表+职业表
例如,信息存储时职业对应数字为4,则该人员职业为职业信息表中ID为4的职业
如果为job为2,则对应职业信息表里ID为2的职业
3、接下来设计下接口文档
同级新建文件data.json用于模拟存储数据,为了解决数据冗余问题,用户信息处的职业保存的时职业表里对应的id
接下来需要查询两个数据接口,获取用户信息和职业,接下来开一个接口,详见文章json-server模拟服务器API .
再新增几条数据
例如想获取id为2的用户信息,接口路径如下
将之前封装的ajax方法调用过来,然后进行调用,如下所示
接下来刷新页面,做下测试
此时页面控制台根据接口输出id为2的学生信息,因为默认格式为字符串,需要进行解析成js对象
4、模板引擎
接下来需要将对象内容结合模板引擎art-template(前端客户端模板引擎)渲染到页面,首先下载到当前项目,然后引入
编写渲染模板,将form表单内容编写至模板里
然后编写渲染语法
模板变量
然后进行渲染
此时刷新页面,结果如下(id为2的员工信息)
(2)职业数据
接下来操作职业数据
然后需要判断当前人员职业,将该职业设为默认选中状态
此时便完成了接口调用渲染
总结代码如下
(3)jQuery的ajax调用Promise的API
1、首先下载引入jquery
2、对比
接下来编写模板即可
3、完整代码如下
此时便成了链式调用
.