<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="" id="user_form"></form>
<script type="text/template" id="tpl">
<div>
<label for="">用户名</label>
<input type="text" value="{{ user.username }}" value="">
</div>
<div>
<label for="">年龄</label>
<input type="text" value="{{ user.age }}">
</div>
<div>
<label for="">职业</label>
<select name="" id="">
{{ each jobs }}
{{ if user.job === $value.id }}
<option value="{{ $value.id }}" selected>{{ $value.name }}</option>
{{ else }}
<option value="{{ $value.id }}">{{ $value.name }}</option>
{{ /if }}
{{ /each }}
</select>
</div>
</script>
<script src="./node_modules/art-template/lib/template-web.js"></script>
<script src="./node_modules/jquery/dist/jquery.js"></script>
<script>
// 用户表
// 其中一个接口获取用户数据
// 职业：2
// 职业信息表
// 其中一个接口获取所有的职业信息
// get('http://127.0.0.1:3000/users/4', function (userData) {
// get('http://127.0.0.1:3000/jobs', function (jobsData) {
// var htmlStr = template('tpl', {
// user: JSON.parse(userData),
// jobs: JSON.parse(jobsData)
// })
// console.log(htmlStr);
// document.querySelector('#user_form').innerHTML = htmlStr
// })
// })
// 这个 get 是 callback 方式的 API
// function get(path, callback) {
// var xml = new XMLHttpRequest()
// xml.open('get', path, true)
// xml.send()
// // 当请求加载成功之后要调用指定的函数
// xml.onload = function () {
// // 我现在需要的到这里的 xml.responseText
// callback(xml.responseText)
// }
// }
// var data = {}
// $.get('http://127.0.0.1:3000/users/4')
// .then(function (user) {
// data.user = user
// return $.get('http://127.0.0.1:3000/jobs')
// })
// .then(function (jobs) {
// data.jobs = jobs
// var htmlStr = template('tpl', data)
// document.querySelector('#user_form').innerHTML = htmlStr
// })
var data = {};
pGet("http://127.0.0.1:3000/users/4")
.then(function(user) {
data.user = user;
return pGet("http://127.0.0.1:3000/jobs");
})
.then(function(jobs) {
data.jobs = jobs;
var htmlStr = template("tpl", data);
document.querySelector("#user_form").innerHTML = htmlStr;
})
.catch(err => {
throw err;
});
function pGet(path, callback) {
return new Promise(function(resolve, reject) {
var xml = new XMLHttpRequest();
xml.open("get", path, true);
xml.send();
// 当请求加载成功之后要调用指定的函数
xml.onload = function() {
// 我现在需要得到这里的 xml.responseText
callback && callback(JSON.parse(xml.responseText));
resolve(JSON.parse(xml.responseText));
};
xml.onerror = function(err) {
reject(err);
};
});
}
// callback方式
// pGet('http://127.0.0.1:3000/users/4', function (data) {
// console.log(data);
// })
// .then方式
// pGet("http://127.0.0.1:3000/users/4").then(function(data) {
// console.log(data);
// });
</script>
</body>
</html>
{
"users": [
{
"id": 1,
"username": "admin",
"age": 18,
"job": 2
},
{
"id": 2,
"username": "admin2",
"age": 18,
"job": 4
},
{
"id": 3,
"username": "admin3",
"age": 18,
"job": 2
},
{
"id": 4,
"username": "admin4",
"age": 18,
"job": 3
}
],
"jobs": [
{
"id": 1,
"name": "学生"
},
{
"id": 2,
"name": "教师"
},
{
"id": 3,
"name": "司机"
},
{
"id": 4,
"name": "画家"
},
{
"id": 5,
"name": "演员"
},
{
"id": 6,
"name": "医生"
}
]
}
网友评论