ajax提交json数据(ajax请求本地json文件)

百科 0 523
请求的两个文件里的内容:


ajax提交json数据(ajax请求本地json文件)

单个用户


多个用户

单个数据:

document.getElementById('button1').addEventListener("click",loadUser);

document.getElementById('button2').addEventListener("click",loadUsers);

function loadUser(){

var xhr=new XMLHttpRequest();

xhr.open('GET',"user.json",true);

xhr.onload=function(){

if(this.status==200){

var user=JSON.parse(this.responseText);

console.log(user);

var output='';

output+=`

  • ${user.id}
  • ${user.name}
  • ${user.phone}

`;

document.getElementById('user').innerHTML=output;

xhr.send();

多个数据:

function loadUsers(){

var xhr=new XMLHttpRequest();

xhr.open('GET',"users.json",true);

xhr.onload=function(){

if(this.status==200){

var users=JSON.parse(this.responseText);

console.log(users);

var output='';

//遍历数据

for( var i in users){

output+=`

  • ${users[i].id}
  • ${users[i].name}
  • ${users[i].phone}

`;

document.getElementById('users').innerHTML=output;

xhr.send();

相关推荐: