案例:用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>
最新文章
- AC自动机 HDU 3065
- bzoj3527: [Zjoi2014]力
- Linux 下子线程的 pthread_cleanup_push() 和 pthread_cleanup_pop() 研究
- Maven-pom.xml详解
- JVM参数汇总
- 联通光纤上网配置+华为HG8240光猫+TL-WR842N
- Ⅵ.spring的点点滴滴--自定义类型转换器
- t_sql语句得到表中所有信息
- 工作经常使用的SQL整理
- apollo实现c#与android消息推送(三)
- zipline框架--简介
- [C# 设计模式] Adapter - 适配器模式(两种)
- python将两个数组合并成一个数组的两种方法的代码
- WPF实现Windows资源管理器(附源码)
- Linux下,如何查看磁盘是否包含数据
- LVS (Linux Virtual Server) - 负载均衡集群 - keepalived
- 067 Flume协作框架
- Java版 家政服务 社区服务 家装服务平台 源码 有案例 可定制
- 使用 awstats 分析 Nginx 的访问日志(IBM)
- HTML元素1: 基本元素,标题,段落,链接,图像等
热门文章
- 题解 SP10500 HAYBALE - Haybale stacking
- 【实操日记】使用 PyQt5 设计下载远程服务器日志文件程序
- 第一百零八篇:最常用的基本数据类型(Number,String类型)
- 「Python实用秘技11」在Python中利用ItsDangerous快捷实现数据加密
- perl 通过<;<;和文件句柄将数据写入到文件中去
- CentOS下一些软件的安装
- Go语言核心36讲39
- Spark通过打jar包形式提交任务
- # Android网络请求(4) 网络请求框架Volley
- audio解决不能自动播放问题