1.jQuery中的Ajax:
<body>
<button>登录</button>
<script src="./jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
// $.ajax({
// /* 异步 默认为true */
// /* false表示同步 改同步渲染页面会出现白屏现象*/
// async:true,
// /* 是否设置浏览器的缓存功能 true 设置缓存
// false不设置缓存 每次请求都是新的请求 */
// cache:true,
// /* 请求的接口 */
// // url:"http://timemeetyou.com:8889/api/private/v1/login",
// url:"./123.txt",
// /* 请求的方式 post有加密功能 */
// // method:"post",
// method:"get",
// /* 发送到服务器的数据 */
// // data:{
// // username:'admin',
// // password:'123456'
// // },
// /* 预期服务器返回的数据类型 json jsonp*/
// dataType:'json',
// /* 在一个 jsonp 请求中重写回调函数的名字 */
// /* 这里fn需要和后台的代码对应 */
// jsonp:"fn",
// /* 为 jsonp 请求指定一个回调函数名 */
// /* callbackFn 是前端配置的 */
// jsonpCallback:"callbackFn",
// /* 请求成功之后 执行的回调函数 */
// // success:function(res){
// // /* success后面的方法里面的形参res表示后台返回的数据 */
// // console.log( res );
// // },
// /* 请求失败时调用此函数 */
// error:function(err){
// console.log(err)
// }
// })
})
// function callbackFn(res){
// console.log(res)
// }
/*
参数 类型 描述
options Object 可选，AJAX 请求设置，所有选项都是可选的
async Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false
cache Boolean 默认值: true，dataType 为 script 和 jsonp 时默认为 false。设置为 false 将不缓存此页面
data String 发送到服务器的数据
dataType String 预期服务器返回的数据类型
error Function 请求失败时调用此函数
success Function 请求成功后的回调函数
jsonp String 在一个 jsonp 请求中重写回调函数的名字
jsonpCallback String 为 jsonp 请求指定一个回调函数名
*/
</script>
</body>
jQuery中的Ajax练习：
<body>
<button>登录</button>
<h1></h1>
<script src="./jquery-1.12.4.js"></script>
<script>
$('button').click(function(){
/* $.ajax({
url:"./login1.txt",
method:'get',
async:true,
dataType:'json',
success:function(res){
console.log(res);
$('h1').html(`姓名：${res.name},${res.msg}`)
$('button').fadeOut('slow')
},
error:function(){
$('h1').html('请求失败')
}
}) */
/* $.get 方法 不需要传参 第一个是接口地址 第二个回调函数 */
/* 需要传参 第一个是接口地址 第二个传输的数据 第三个是成功后的回调函数 */
$.get('./login.txt',{name:'zhangsan',age:30},function(data){
let res = JSON.parse(data)
$('h1').html(`姓名：${res.name},${res.msg}`)
$('button').fadeOut('slow')
})
$.get('./login.txt?name=zhangsan&age=30',function(data){
let res = JSON.parse(data)
$('h1').html(`姓名：${res.name},${res.msg}`)
$('button').fadeOut('slow')
})
})
</script>
</body>
2.post里的增、删、查效果
<body>
<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>
</body>
