今天，是JavaScript回炉的第四十七天
通过当前构造函数并且替换当前构造函数里的参数值，改变加载页面等待画面和文本内容
//获取id
function $(id){
return document.getElementById(id);
}
//ajax获取后端的内容
function f1(){
$('div01').style.display = 'block';
let ajx = new XMLHttpRequest(); //ajax的初始化
let url = '
http://127.0.0.1:8000/index' //后端的路径
ajx.open('GET',url,true) //ajax的'GET'方法，路径，是否异步true是异步
ajx.onreadystatechange = function(){
if(ajx.readyState == 4){//ajx的状态4(0-4)个level
if(ajx.status == 200){//code值为200
//获取数据库的内容
let content = JSON.parse(ajx.responseText)['data']
//获取长度为for循环做准备
let num = (JSON.parse(ajx.responseText)['data']).length
for(let i=0;i<num;i++){
console.log(content[i])
//创建表格的行
let table_tr = document.createElement('tr');
//创建表格的单元格id
let table_td_id = document.createElement('td');
//创建表格的单元格name
let table_td_name = document.createElement('td');
//创建表格的单元格say
let table_td_say = document.createElement('td');
//创建表格的单元格remarks
let table_td_remarks = document.createElement('td');
//创建表格的单元格add_content
let table_td_add_content = document.createElement('td');
//创建表格的单元格del_content
let table_td_del_content = document.createElement('td');
//创建表格的单元格put_content
let table_td_put_content = document.createElement('td');
//把表格的新建的行和单元格添加到表格里
$("table01").appendChild(table_tr);
//把表格的新建的行和单元格添加到表格里
$("table01").appendChild(table_td_id);
//把表格的新建的行和单元格添加到表格里
$("table01").appendChild(table_td_name);
//把表格的新建的行和单元格添加到表格里
$("table01").appendChild(table_td_say);
//把表格的新建的行和单元格添加到表格里
$("table01").appendChild(table_td_remarks);
//单元格里增加添加按钮
$("table01").appendChild(table_td_add_content);
//单元格里增加删除按钮
$("table01").appendChild(table_td_del_content);
//单元格里增加修改按钮
$("table01").appendChild(table_td_put_content);
//把数据库的id内容动态的id添加到单元格里
table_td_id.innerHTML = content[i].id;
//把数据库的name内容动态的name添加到单元格里
table_td_name.innerHTML = content[i].name;
//把数据库的name内容动态的say添加到单元格里
table_td_say.innerHTML = content[i].say;
//把数据库的remarks内容动态的remarks添加到单元格里
table_td_remarks.innerHTML = content[i].remarks;
//添加操作按钮
table_td_add_content.innerHTML = '添加';
//添加操作按钮
table_td_del_content.innerHTML = '删除';
//添加操作按钮
table_td_put_content.innerHTML = '修改'
//操作js的style的属性，修改添加按钮文字颜色
table_td_add_content.style.color = 'blue';
//操作js的style的属性，修改删除按钮背景颜色
table_td_del_content.style.background = 'red';
//操作js的style的属性，修改修改按钮背景和文字颜色
table_td_put_content.style.background = 'orange';
table_td_put_content.style.color = '#8A2BE2';
}
}
}
}
//发送执行请求
ajx.send()
}
//构造函数判断是否获取新值，然后进行判断是否赋值
function See(){
//判断this.url是否有新值
if(this.url != undefined){
this.url = this.url;
}else{
this.url = '加载.jpg';
}
//判断this.text01是否有新值
if(this.text01 != undefined){
this.text01 = this.text01;
}else{
this.text01 = '加载中...';
}
}
//时间的构造函数,判断是否赋值
function Timer01(a){
this.a = a;
if(this.a != undefined){
this.timer = this.a;
}else{
this.timer =2000;
}
}
//构造函数，功能是打开页面加载画面后展示f1()函数
function Loading(){
$('img01').src = AA.url;
$('p1').innerHTML = AA.text01;
}
//执行加载后的时间函数
function Timer(){
setTimeout(function(){
close(); //关闭函数
f1();//加载ajax获取后端的内容
}, BB.timer);//BB.timer查看是否有新值出现
}
//关闭函数
function close(){
$('div02').style.display = 'none';
}
//执行See()构造函数
let AA = new See();
AA.url = '加载.jpg';//对构造函数进行赋值
AA.text01 = '请等待...';//对构造函数进行赋值
let BB = new Timer01(5000); //对构造函数进行赋值
//加载页面
window.onload = function(){
Loading(); //执行加载页面的构造函数
Timer(); //执行时间的构造函数
}