load json文件
Load single customer
document.getElementById('button1').addEventListener('click',loadCustomer);
function loadCustomer(e){
const xhr = new XMLHttpRequest();
xhr.open('GET','customer.json',true);
xhr.onload=function(){
console.log(this);
if(this.status===200){
// console.log(this.responseText);
const customer = JSON.parse(this.responseText); //string变为object
const output = `
<ul>
<li>ID:${customer.id}</li>
<li>Name:${customer.name}</li>
<li>Company:${customer.company}</li>
<li>Phone:${customer.phone}</li>
</ul>
`;
document.getElementById('customer').innerHTML=output;
}
}
xhr.send();
}
Load customers
document.getElementById('button2').addEventListener('click',loadCustomers);
//Load customers
function loadCustomers(e){
const xhr = new XMLHttpRequest();
xhr.open('GET','customers.json',true);
xhr.onload=function(){
console.log(this);
if(this.status===200){
// console.log(this.responseText);
const customers = JSON.parse(this.responseText); //string变为object
let output=``;
customers.forEach(function(customer){ //加
output += `
<ul>
<li>ID:${customer.id}</li>
<li>Name:${customer.name}</li>
<li>Company:${customer.company}</li>
<li>Phone:${customer.phone}</li>
</ul>
`;
});
document.getElementById('customers').innerHTML=output;
}
}
xhr.send();
}