jq的ajax
1.本地文件简易ajax获取数据
<body>
<button>点击</button>
<h1></h1>.
<script src="../jQuery/jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
$.ajax({
url:'./login.txt',
method:'get',
async:false,
dataType:'json',
success:function(res){
/* console.log(JSON.parse(res));
let a=JSON.parse(res); */
$('h1').html(`${res.name},${res.msg}`)
},
error:function(){
$('h1').html('登录失败')
}
})
})
</script>
</body>
2.真实接口JQ使用ajax 登录成功,获取token并保存
$('button').click(function () {
$.post(url+'login',{username:'admin',password:'123456'},function(res){
localStorage.token = res.data.token;
$('button').slideUp('slow')
})
})
jq真实接口的增删查完整代码
<button id="login">登录</button>
<div>
<p>
用户名: <input type="text" id="username">
</p>
<p>
密码: <input type="password" id="password">
</p>
<p>
邮箱: <input type="text" id="email">
</p>
<p>
手机号: <input type="text" id="mobile">
</p>
<input type="submit" value="添加" id="submit">
<h1 id="msg" style="color:red;"></h1>
</div>
<input type="text" id="userid">
<button id="query">查询</button>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>电话</th>
<th>电子邮箱</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="./jquery-1.12.4.js"></script>
<script>
let url = "http://timemeetyou.com:8889/api/private/v1/";
/* 登录功能 */
$('#login').click(function () {
$.post(url+'login',{username:'admin',password:'123456'},function(res){
localStorage.token = res.data.token;
$('#login').slideUp('slow')
/* 得到token之后调用获取用户列表数据 */
getUsers();
})
})
/* 获取用户列表数据 */
function getUsers(){
$.ajax({
url:url+'users',
headers:{
Authorization:localStorage.token
},
data:{
pagenum:1,
pagesize:50
},
success:function(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>
`
)
}
}
})
}
$('#query').click(function(){
$.ajax({
url:url+'users/'+$('#userid').val(),
headers:{
Authorization:localStorage.token
},
success:function(res){
/* 出现提示 */
$('#msg').html(res.meta.msg)
/* 过三秒 提示消失 */
setTimeout(function(){
$('#msg').html('')
},3000)
/* 更新最新的表格信息 */
// getUsers();
$('tbody').html('');
$('tbody').append(
`
<tr>
<td>${res.data.username}</td>
<td>${res.data.mobile}</td>
<td>${res.data.email}</td>
<td><button onclick="del(${res.data.id})">删除</button></td>
</tr>
`
)
}
})
})
function del(id){
console.log(id);
$.ajax({
url:url+'users/'+id,
method:'delete',
headers:{
Authorization:localStorage.token
},
success:function(res){
/* 出现提示 */
$('#msg').html(res.meta.msg)
/* 过三秒 提示消失 */
setTimeout(function(){
$('#msg').html('')
},3000)
/* 更新最新的表格信息 */
getUsers();
}
})
}
$('#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){
/* 出现提示 */
$('#msg').html(res.meta.msg)
/* 过三秒 提示消失 */
setTimeout(function(){
$('#msg').html('')
},3000)
$('#username').val('')
$('#password').val('')
$('#email').val('')
$('#mobile').val('')
/* 更新最新的表格信息 */
getUsers();
}
})
})
</script>
