Javascript 在dom中的列表项中提供未定义的 log（“这是Ajax教程”） 让fetchBtn=document.getElementById（“fetchBtn”）； fetchBtn.addEventListener（“单击”，按钮包括ClickHandler）； 函数按钮ClickHandler（）{ log（“您已经单击了获取按钮”） //实例化对象 const xhr=new XMLHttpRequest（）； //打开对象 //open（'GET'，'ajax.txt'，true） //xhr.open（'GET'，”https://jsonplaceholder.typicode.com/posts“，对） //邮寄申请 xhr.open（'POST'，”http://dummy.restapiexample.com/api/v1/create“，对） xhr.getResponseHeader（'Content-type'，'application/json'） //如何处理进度（可选） xhr.onprogress=函数（）{ console.log（“On Progress”） } //准备好响应后要做什么 xhr.onload=函数（）{ 如果（this.status==200）{ console.log（this.responseText） }否则{ console.log（“发生了一些错误”） } } //发送请求 params=`{“name”：“testb34sad545”，“salary”：“123”，“age”：“23”}` xhr.send（参数）； 控制台日志（“完成”） } 让popBtn=document.getElementById（“popBtn”）； addEventListener（“单击”，popHandler）； 函数popHandler（）{ log（“您已经单击了pop处理程序按钮”） //使物体不稳定 const xhr=new XMLHttpRequest（）； //打开对象 xhr.open（“GET”http://dummy.restapiexample.com/api/v1/employees",对),； //准备好响应后要做什么 xhr.onload=函数（）{ 如果（this.status==200）{ 让obj=JSON.parse（this.responseText）； 控制台日志（obj）； let list=document.getElementById（'list'）； str=“”； 用于（输入obj）{ str+=`${obj[key].employee_name}`； } list.innerHTML=str； }否则{ console.log（“发生了一些错误”） } } //发送请求 xhr.send（）； console.log（“完成了”） }
在第二部分，即ajax.js的oin popBtn部分，我面临一个问题，我试图在我的dom上显示员工姓名作为列表项，我从一些虚假api获取数据，列表项在dom上没有正确显示，我想在dom中显示所有员工的姓名作为列表项Javascript 在dom中的列表项中提供未定义的 log（“这是Ajax教程”） 让fetchBtn=document.getElementById（“fetchBtn”）； fetchBtn.addEventListener（“单击”，按钮包括ClickHandler）； 函数按钮ClickHandler（）{ log（“您已经单击了获取按钮”） //实例化对象 const xhr=new XMLHttpRequest（）； //打开对象 //open（'GET'，'ajax.txt'，true） //xhr.open（'GET'，”https://jsonplaceholder.typicode.com/posts“，对） //邮寄申请 xhr.open（'POST'，”http://dummy.restapiexample.com/api/v1/create“，对） xhr.getResponseHeader（'Content-type'，'application/json'） //如何处理进度（可选） xhr.onprogress=函数（）{ console.log（“On Progress”） } //准备好响应后要做什么 xhr.onload=函数（）{ 如果（this.status==200）{ console.log（this.responseText） }否则{ console.log（“发生了一些错误”） } } //发送请求 params=`{“name”：“testb34sad545”，“salary”：“123”，“age”：“23”}` xhr.send（参数）； 控制台日志（“完成”） } 让popBtn=document.getElementById（“popBtn”）； addEventListener（“单击”，popHandler）； 函数popHandler（）{ log（“您已经单击了pop处理程序按钮”） //使物体不稳定 const xhr=new XMLHttpRequest（）； //打开对象 xhr.open（“GET”http://dummy.restapiexample.com/api/v1/employees",对),； //准备好响应后要做什么 xhr.onload=函数（）{ 如果（this.status==200）{ 让obj=JSON.parse（this.responseText）； 控制台日志（obj）； let list=document.getElementById（'list'）； str=“”； 用于（输入obj）{ str+=`${obj[key].employee_name}`； } list.innerHTML=str； }否则{ console.log（“发生了一些错误”） } } //发送请求 xhr.send（）； console.log（“完成了”） },javascript,ajax,Javascript,Ajax,在第二部分，即ajax.js的oin popBtn部分，我面临一个问题，我试图在我的dom上显示员工姓名作为列表项，我从一些虚假api获取数据，列表项在dom上没有正确显示，我想在dom中显示所有员工的姓名作为列表项 以初学者友好的方式向我建议错误或想法API返回JSON，如{“status”：“success”，“data”：[{“id”：1，“employee_name”：“Tiger Nixon”，..}，..]}。您只是在迭代状态和数据obj.status是一个字符串，obj.data是
以初学者友好的方式向我建议错误或想法API返回JSON，如
{“status”：“success”，“data”：[{“id”：1，“employee_name”：“Tiger Nixon”，}，]}状态数据obj.statusobj.dataemployee\u nameobj.datamy html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>About Ajax and XML requests</title>
</head>
<body>
<h1>Ajax tutorial</h1>
<button type="button" id="fetchBtn" class="btn btn-primary">Fetch Data</button>
<button type="button" id="popBtn" class="btn btn-secondary">Populate</button>
<div class="container">
<h1>Employee list</h1>
<ul id="list">
</ul>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
-->
<script src="js/ajax.js"></script>
</body>
</html>
my ajax.js
console.log("This is Ajax tutorial")
let fetchBtn = document.getElementById("fetchBtn");
fetchBtn.addEventListener("click", buttonClickHandler);
function buttonClickHandler() {
console.log("You have clicked on fetch button")
// Instantiate the object
const xhr = new XMLHttpRequest();
// open the object
// xhr.open('GET', "ajax.txt", true)
// xhr.open('GET', "https://jsonplaceholder.typicode.com/posts", true)
// for POST Request
xhr.open('POST', "http://dummy.restapiexample.com/api/v1/create", true)
xhr.getResponseHeader('Content-type', 'application/json')
// what to do on progress(optional)
xhr.onprogress = function() {
console.log("On Progress")
}
// what to do when response is ready
xhr.onload = function() {
if (this.status == 200) {
console.log(this.responseText)
} else {
console.log("some error occured")
}
}
// send the request
params = `{"name":"testb34sad545","salary":"123","age":"23"}`
xhr.send(params);
console.log("done")
}
let popBtn = document.getElementById("popBtn");
popBtn.addEventListener("click", popHandler);
function popHandler() {
console.log("You have clicked on pop handler button")
//Instatiate the object
const xhr = new XMLHttpRequest();
//open the object
xhr.open("GET", 'http://dummy.restapiexample.com/api/v1/employees', true);
// what to do when response is ready
xhr.onload = function() {
if (this.status == 200) {
let obj = JSON.parse(this.responseText);
console.log(obj);
let list = document.getElementById('list');
str = "";
for (key in obj) {
str += `<li>${obj[key].employee_name} </li>`;
}
list.innerHTML = str;
} else {
console.log("Some error occured")
}
}
// sending request
xhr.send();
console.log("done it")
}