案例：用ajax get方法 查询用户列表
html文件
<body>
<div id="d1"></div>
<button onclick="getlist()">获取用户列表</button>
<table id="content" border="1px">
<thead>
<td>uid</td>
<td>uname</td>
<td>upwd</td>
<td>email</td>
<td>phone</td>
<td>avatar</td>
<td>user_name</td>
<td>gender</td>
</thead>
</table>
<script>
function getlist(){
//创建异步对象
var xhr=new XMLHttpRequest();
//监听获取响应
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var result=xhr.responseText;
//得到响应数据，使用dom把结果放进div
var arr=JSON.parse(result);
console.log(arr);
for(var i=0;i<arr.length;i++){
content.innerHTML+=`
<tr>
<td>${arr[i].uid}</td>
<td>${arr[i].uname}</td>
<td>${arr[i].upwd}</td>
<td>${arr[i].email}</td>
<td>${arr[i].phone}</td>
<td>${arr[i].avatar}</td>
<td>${arr[i].user_name}</td>
<td>${arr[i].gender}</td>
</tr>
`;};
};
};
//打开连接 创建请求
xhr.open("get","http://127.0.0.1:8080/ajax/userlist",true);
//发送请求
xhr.send();
};
</script>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
· 字符编码：从基础到乱码解决