<body>
<div id="personInfo"></div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="node_modules/art-template/lib/template-web.js"></script>
<script type="text/template" id="tpl">
<div>
<label for="">用户名</label>
<input type="text" value="{{ users.name }}">
</div>
<div>
<label for="">年龄</label>
<input type="text" value="{{ users.age }}">
</div>
<div>
<label for="">描述</label>
<select name="" id="">
{{ each jobs }}
{{ if users.id === $value.id }}
<option value="{{ $value.name }}" selected>{{ $value.name }}</option>
{{ else }}
<option value="{{ $value.name }}">{{ $value.name }}</option>
{{ /if }}
{{ /each }}
</select>
</div>
</script>
<script>
// 开发一个项目 最少 3~5接口
getData('http://47.96.29.109:6789/users?id=4',function (users) {
users = JSON.parse(users);
getData('http://47.96.29.109:6789/jobs',function (jobs) {
jobs = JSON.parse(jobs)
let htmlTemplate = template('tpl',{
users:users,
jobs:jobs
})
console.log(htmlTemplate)
personInfo.innerHTML = htmlTemplate;
});
});
function getData(url,callback) {
const xhr = new XMLHttpRequest();
xhr.onload = function () {
if( xhr.readyState == 4 & xhr.status == 200 ){
callback && callback(xhr.response)
}
}
xhr.open('get',url,true);
xhr.send();
}
</script>
</body>
网友评论