案例:用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>
案例:用ajax get方法 查询用户列表的更多相关文章
- 使用mybatis提供的各种标签方法实现动态拼接Sql。这里演示where标签和if标签实现使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录。
1.需求: 使用姓名的模糊查询和性别查询用户列表,当用户没有选择姓名以及性别时查询出所有的记录. 2.在UserMapper接口中定义方法: public List<User> findU ...
- 【Java框架型项目从入门到装逼】第十四节 查询用户列表展现到页面
这一节,我们来实现一下用户列表搜索,最终的效果如下: 这边我们要使用easyUI给我们提供的datagrid组件. HTML结构如下 <!-- 数据列表 --> <table id= ...
- ajax实现模糊查询完成列表信息显示
之前遗留一个老问题:列表模糊查询,用的直接是form提交,点击搜索按扭后,页面刷新,搜索框中关键词就没了,这鸡肋的体验,我发誓一定要搞定它 但是鉴于自己写代码是纯粹玩票,我写代码没有目标,只有在当前工 ...
- SQL Server中查询用户的对象权限和角色的方法
--SQL Server中查询用户的对象权限和角色的方法 -- 查询用户的object权限 exec sp_helprotect NULL, 'sa' -- 查询用户拥有的role exec sp_h ...
- 项目一:第十三天 1、菜单数据管理 2、权限数据管理 3、角色数据管理 4、用户数据管理 5、在realm中动态查询用户权限,角色 6、Shiro中整合ehcache缓存权限数据
1 课程计划 菜单数据管理 权限数据管理 角色数据管理 用户数据管理 在realm中动态查询用户权限,角色 Shiro中整合ehcache缓存权限数据 2 菜单数据添加 2.1 使用c ...
- 05Mybatis_入门程序——根据id查询用户
这篇文章我们来做一个入门的案例: 建表: /* SQLyog v10.2 MySQL - 5.1.72-community : Database - mybatis ***************** ...
- JPA默认方法查询遇到转JSON的处理
JPA提供的findAll等查询方法在有关联的对象时 比如:在查userInfo @Entity@Table(name = "user_info")public class Use ...
- 使用mybatis开发Dao的原始方法,实现根据用户id查询一个用户信息 、根据用户名称模糊查询用户信息列表 、添加用户信息等功能
1.需求 将下边的功能实现Dao: 根据用户id查询一个用户信息 根据用户名称模糊查询用户信息列表 添加用户信息 2. 原始Dao开发方法需要程序员编写Dao接口和Dao实现类 3.User.xml映 ...
- 零基础学习java------34---------登录案例,域,jsp(不太懂),查询商品列表案例(jstl标签)
一. 简单登录案例 流程图: 项目结构图 前端代码: <!DOCTYPE html> <html> <head> <meta charset="UT ...
- angularJS 条件查询 品优购条件查询品牌(条件查询和列表展示公用方法解决思路 及 post请求混合参数提交方式)
Brand.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> &l ...
随机推荐
- SpringCloud微服务实战——搭建企业级开发框架(四十八):【移动开发】整合uni-app搭建移动端快速开发框架-使用第三方UI框架
uni-app默认使用uni-ui全端兼容的.高性能UI框架,在我们开发过程中可以满足大部分的需求了,并且如果是为了兼容性,还是强烈建议使用uni-ui作为UI框架使用. 如果作为初创公司,自 ...
- JK触发器与模12计数器
JK触发器 JK触发器具有保持,置0,置1和翻转四个功能. 则可得出次态方程:\(Q_{n+1} = JQ_n'+K'Q_n\) Design `timescale 1ns / 1ps module ...
- python常用库总结
图片处理相关 # opencvy pip install opencv-python pip install opencv-contrib-python pip install matplotlib ...
- spring源码解析(一) 环境搭建(各种坑的解决办法)
上次搭建spring源码的环境还是两年前,依稀记得那时候也是一顿折腾,奈何当时没有记录,导致两年后的今天把坑重踩了一遍,还遇到了新的坑,真是欲哭无泪;为了以后类似的事情不再发生,这次写下这篇博文来必坑 ...
- jvm之垃圾收集一之垃圾回收算法
最近又重新在读深入理解java虚拟机一书,吸取第一次读完到现在已经忘记的差不都的教训,这次的学习之旅想通过博客的形式记录下自己的所学所感,以备后续继续学习备忘所用!这次先记录下垃圾收集相关知识点: 垃 ...
- dockerNginx代理本地目录
dockerNginx代理本地目录 ssl_certificate cert/5900588_test.zk.limengkai.work.pem; ssl_certificate_key cert/ ...
- python实现图片转换pdf
安装第三方库 linux平台 sudo apt install python3-reportlab python3-pil 示例代码 import sys from reportlab.pdfgen ...
- Cannot resolve module 'net' in stompjs
解决方案1 stompjs 不支持客户端环境下运行需要作为开发依赖安装 npm install stompjs --save 解决方案2 webpack.config.js 增加这段 resolve: ...
- 学习ASP.NET Core Blazor编程系列十六——排序
学习ASP.NET Core Blazor编程系列文章之目录 学习ASP.NET Core Blazor编程系列一--综述 学习ASP.NET Core Blazor编程系列二--第一个Blazor应 ...
- MySQL视图-触发器
目录 一:视图 1.什么是视图? 2.为什么要用视图? 3.如何使用视图 4.反复拼接的繁琐(引入视图的作用) 5.解决方法 二:视图的应用 1.创建视图的格式: 2.查询视图层 3.查询Navica ...