$('button').click(function () {
//通过HHTP请求加载远程数据
$.ajax({
/* 异步 默认为true */
/* false 表示同步 改同步渲染页面会出现白屏 */
async: false,
/* 是否设置浏览器的缓存功能
true 设置缓存
false 不设置缓存 每次请求都是新的请求 */
cache:false,
/* 请求的接口 */
/* url: 'http://timemeetyou.com:8889/api/private/v1/login', */
url:"./login.txt",
/* 请求的方式post 有加密功能 */
method: 'get',
/* method: 'post', */
/* 发送到服务器的数据 */
data: {
username: 'admin',
password: '123456'
},
/* 预期服务器返回的数据类型 jaon jsonp */
dataType:'json',
/* 在一个jsonp请求中重写回调函数的名字 */
/* 这里的fn需要和后台的代码对应 */
jsonp:'fn',
/* callbackFn是一个前端配置的 */
jsonpCallback:'callbackFn',
/* 请求成功后的回调函数 */
success: function (res) {
/* success后面的方法里的形参res表示后台返回的数据 */
document.write(res);
},
/* 请求失败后的回调函数 */
error:function(err){
document.write('请求失败');
}
})
})
ajax练习
登录功能
$('#login').click(function () {
$.post(url + 'login', { username: 'admin', password: '123456' }, function (res) {
console.log(res);
localStorage.token = res.data.token;
$('button').slideUp('slow')
/* 得到token后 */
getUsers()
})
})
获取用户数据
function getUsers() {
$.ajax({
url: url + 'users',
headers: {
Authorization: localStorage.token
},
data: {
pagenum: 1,
pagesize: 30
},
success: function (res) {
console.log(res);
/* 插入现在的数据之前清空之前的数据 */
$('tbody').html('');
for (var i in res.data.users) {
$('tbody').append(
`
<tr>
<td>${res.data.users[i].username}</td>
<td>${res.data.users[i].mobile}</td>
<td>${res.data.users[i].email}</td>
<td><button onclick='del(${res.data.users[i].id})'>删除</button></td>
</tr>
`
)
}
}
})
}
function del(id){
$.ajax({
url:url+'users/'+id,
method:'delete',
headers:{
Authorization: localStorage.token
},
success:function(res){
/* 出现提示 */
$('.msg').html(res.meta.msg)
/* 过3秒提示消失 */
setTimeout(function(){
$('.msg').html('')
},2000)
}
})
}
增加用户
$('#submit').click(function () {
$.ajax({
url: url + 'users',
method: 'post',
headers:{
Authorization: localStorage.token
},
data: {
username: $('#username').val(),
password: $('#password').val(),
email: $('#email').val(),
mobile: $('#mobile').val()
},
success:function(res){
console.log(res)
$('.msg').html(res.meta.msg)
setTimeout(function(){
$('.msg').html('')
},2000)
$('#username').val('')
$('#password').val('')
$('#email').val('')
$('#mobile').val('')
/* 更新最新的表格信息 */
getUsers();
}
})
})
