1.通过ajax访问后台的步骤：
1：创建一个对象 XMLHttpRequest
2: 给这个对象绑定一个事件onreadystatechange（自动触发）
3： 和服务器进行连接
4： 向服务器发送请求
XMLHttpRequest这个对象有一个readyState属性这个属性有5个值，分别表示我们向服务器发送ajax请求的不同阶段
0: 表示XMLHttpRequest对象创建成功，但是open() 方法还没有调用
1: 表示open() 方法被调用了，但是send()方法没有被调用
2: 表示send() 方法已经被调用，并且服务器返回的头信息已经被收到了 【http协议】
3: 表示，正在接收主体数据，但是数据还没有接收完成
4: 表示XMLHttpRequest对象已经完全接收到后台返回的所有数据， 这个时候我们就可以从这个XMLHttpRequest对象中获取到后台返回的数据
// 创建一个对象
var xhr = new XMLHttpRequest();
// 给这个对象绑定一个事件，这个事件也是自动触发，不需要人为参与的事件
// 这个事件就是用来监听readyState属性值的变化的，只要readyState的值发生变化了，这个事件就会被触发
xhr.onreadystatechange = function() { // 在这个函数中要获取后台传递过来的数据
// 判断只有readyState属性的值等于4时，我们才能获取后台传递过来的数据
if(xhr.readyState == 4) {
// 拿到后台传递过来的数据
var res = JSON.parse(xhr.responseText)
var userList = res.rows;
// 将后台返回的数据显示到页面中
var ulDom = document.querySelector('ul')
userList.forEach(function(user) {
// 创建li标签
var liDom = document.createElement('li'); // <li></li>
// 向li标签中添加内容
liDom.innerText = `${user.username}-----${user.password}----${user.phone}`
ulDom.appendChild(liDom)
})
}
}
// 向服务器进行连接
// 第一个参数表示请求方式， 第二个参数表示请求的路径
xhr.open("get", "http://localhost:8080/user/list")
// 向服务器发送请求
xhr.send()2.ajax简易封装
/**
*
* option参数接收一个对象
*
* option = {
* type:
* url:
* param:
* fn:
*
* }
*
*
*/
function ajax(option){
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
// 获取后台数据 // 登录成功 用户列表
var res=JSON.parse(xhr.responseText)
// 对后台数据做处理 // 弹框显示后台数据 将用户列表通过for循环生成标签显示到页面中 ， 对后台数据进行处理的代码没有办法写死
option.fn(res)
}
}
option.type=option.type||'get';
if(option.type=='get'){
xhr.open(option.type,option.url+'?'+objToString(option.param)) // ``
xhr.send()
}else{
xhr.open(option.type,option.url)
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded")
xhr.send(objToString(option.param))
}
}
// 将对象{username: 'zhangsan', password: '123456'}转换为字符串 : username=zhangsan&password=123456
function objToString(obj){
var str="";
for(key in obj){
str+=`${key}=${obj[key]}&`
}
// 去掉最后多出来的那个 &
str=str.slice(0,str.length-1)
return str;
}3.用户管理小案例
html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="css/goods.css">
<script src="js/ajax.js"></script>
<script src="js/用户管理.js"></script>
</head>
<body>
<div id="container">
<div id="table-head">
<button id="goods-add-btn">添加</button>
</div>
<table id="goods-list">
<thead>
<tr>
<th>用户id</th>
<th>用户名</th>
<th>密码</th>
<th>手机号</th>
<th>邮箱</th>
<th>真实姓名</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>zhangsan</td>
<td>111</td>
<td>186666666666</td>
<td>zhangsan@qq.com</td>
<td>张三</td>
<td>
<button class="btn-edit">编辑</button>
<button class="btn-del">删除</button>
</td>
</tr> -->
</tbody>
</table>
</div>
<div id="zhezhao">
<div id="edit-pannel">
<div id="edit-pannel-head">
<div id="pannel-title">添加用户</div>
<div id="pannel-close">X</div>
</div>
<input type="hidden" id="userid" value=""/>
<div id="edit-pannel-body">
<div class="form-item">
<label for="goodsid">用户名</label>
<input type="text" id="username" value="" placeholder="请输入用户名" /><br />
</div>
<div class="form-item">
<label for="goodsid">密 码</label>
<input type="text"id="password" value="" placeholder="请输入密码" /><br />
</div>
<div class="form-item">
<label for="goodsid">手机号</label>
<input type="text" id="phone" value="" placeholder="请输入手机号" /><br />
</div>
<div class="form-item">
<label for="goodsid">邮 箱</label>
<input type="text" id="email" value="" placeholder="请输入邮箱" /><br />
</div>
<div class="form-item">
<label for="goodsid">姓 名</label>
<input type="text" id="name" value="" placeholder="请输入真实姓名" /><br />
</div>
</div>
<div class="edit-pannel-footer">
<button id="btn-cancel">取消</button>
<button id="btn-submit">确定</button>
</div>
</div>
</div>
</body>
</html>js页面
onload=function(){
//获取添加按钮
var addBtn=document.querySelector("#goods-add-btn")
addBtn.onclick=openDialog
//获取弹框中的X，和取消按钮
var pannelClose=document.querySelector("#pannel-close")
var btnCancel=document.querySelector("#btn-cancel")
pannelClose.onclick=btnCancel.onclick=closeDialog;
//初始化用户列表
initUserList()
//获取弹框中的确定按钮标签，添加点击事件
var btnSubmit=document.querySelector("#btn-submit")
btnSubmit.onclick=addUser //既能添加用户也能修改用户
}
//打开遮罩
function openDialog(){
var zhezhao=document.querySelector("#zhezhao")
zhezhao.style.display='block'
document.querySelector("#pannel-title").innerText="添加用户"
}
//关闭遮罩
function closeDialog(){
var zhezhao=document.querySelector("#zhezhao")
zhezhao.style.display='none'
// 将输入框的内容清空掉
document.getElementById("username").value = '';
document.getElementById("password").value = '';
document.getElementById("phone").value = '';
document.getElementById("email").value = '';
document.getElementById("name").value = '';
}
//初始化用户列表
function initUserList(){
//通过ajax获取用户列表
ajax({
url: "http://localhost:8080/user/list",
fn:function(res){
//对后台传递过来的数据进行处理
console.log(res)
var userList=res.rows
// 通过对userList进行循环，创建表格的行，userList中有几个用户对象就循环多少次，
var tbody = document.querySelector('#goods-list > tbody')
// 先清空原来的用户列表
tbody.innerHTML = "";
userList.forEach(function(user) {
// 创建一个tr标签
var tr = document.createElement("tr") // <tr></tr>
tr.innerHTML = `
<td>${user.userId}</td>
<td>${user.username}</td>
<td>${user.password}</td>
<td>${user.phone}</td>
<td>${user.email}</td>
<td>${user.name}</td>
<td>
<button userid="${user.userId}" class="btn-edit">编辑</button>
<button userid="${user.userId}" class="btn-del">删除</button>
</td>
`
// 获取每一行的编辑和删除按钮， 给他们添加点击事件
var editBtn = tr.querySelector('.btn-edit')
var delBtn = tr.querySelector(".btn-del")
editBtn.onclick = showEditDialog
delBtn.onclick = delUser
// 将tr追加到 tbody标签中
tbody.appendChild(tr)
})
}
})
}
//显示编辑弹框
function showEditDialog(){
var zhezhao=document.querySelector("#zhezhao")
zhezhao.style.display='block'
document.querySelector("#pannel-title").innerText="编辑用户"
//获取用户id（获取不符合w3c规范的）
var userId=this.getAttribute("userid")
//通过ajax获取要编辑的用户的对象
ajax({
url: `http://localhost:8080/user/${userId}`,
fn: function(res) {
// 将获取到的这个用户的数据设置到输入框中
var user=res.data;
document.getElementById("username").value = user.username;
document.getElementById("password").value = user.password;
document.getElementById("phone").value = user.phone;
document.getElementById("email").value = user.email;
document.getElementById("name").value = user.name;
//隐藏域userid的值
var userid = document.getElementById("userid").value = user.userId;
}
})
}
//删除用户
function delUser(){
//给反悔机会
if(confirm("确定要删除这个用户吗?")){
//获取要删除的用户的id
var userId=this.getAttribute("userid")
//通过ajax访问后台的删除用户功能
ajax({
type: "post",
url: "http://localhost:8080/user/delete",
param: {
uids: userId
},
fn: function(res) {
// 删除完数据之后的操作
// 重新加载用户列表
initUserList();
}
})
}
}
//添加用户 修改用户也是这个方法
function addUser(){
// 获取用户信息（输入框中的值）
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var phone = document.getElementById("phone").value;
var email = document.getElementById("email").value;
var name = document.getElementById("name").value;
// 怎么判断添加用户还是修改用户，可以根据userid是否有值
var userid = document.getElementById("userid").value;
if(userid){//如果userid有值，说明是编辑用户
// 通过ajax将用户信息发送到后台的添加用户的功能模块
ajax({
type: "post",
url: "http://localhost:8080/user/edit",
param: {
userId:userid,
username,
password,
phone,
email,
name
},
fn: function(res) {
// 修改用户完成之后我们要做的事情
// 1: 关闭弹框
closeDialog()
// 2: 重新加载用户列表， 也就是重新从后台查询一遍用户列表
initUserList()
}
})
}else{//userid没有值，添加用户
// 通过ajax将用户信息发送到后台的添加用户的功能模块
ajax({
type: "post",
url: "http://localhost:8080/user/add",
param: {
username,
password,
phone,
email,
name
},
fn: function(res) {
// 添加用户完成之后我们要做的事情
// 1: 关闭弹框
closeDialog()
// 2: 重新加载用户列表， 也就是重新从后台查询一遍用户列表
initUserList()
}
})
}
}
526
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
