1.跨域:
/* 使用jsonp解决跨域 */
$.ajax({
url:"http://192.168.1.2/a.php",
type:"get",
//定义发送jsonp请求
dataType:'jsonp',
//更改定义的参数名
jsonp:'kyFn',//修改callback名称,但是php中也要修改成相对应的函数名
//指定jsonp发送的回调函数名(可以任意起名字,无需对应)
jsonpCallback:'callBack',
});
function callBack(res){
document.write(res);
}
// $.ajax({
// url:"http://localhost:3000",
// success:function(res){
// console.log(res);
// },
// error:function(err){
// console.log(err)
// }
// })
2.bootstrap中jq ajax实战:
1、登录界面:
kw47的小卖铺
$('#loginBtn').click(function(e){
/* 阻止bootstrap表单默认事件 */
e.preventDefault();
$.post('http://timemeetyou.com:8889/api/private/v1/login',{
username:$('#user').val(),
password:$('#pwd').val()
},function(res){
console.log(res);
localStorage.token=res.data.token;
localStorage.username=res.data.username;
alert(res.meta.msg)
setTimeout(function(){
location.href = './home.html'
},300)
})
})
2、主页:
*{margin: 0;padding: 0;}
.main{
display: flex;
overflow-y: hidden;
}
aside{
width: 200px;
/* 100vh 占满可视区的高度 */
height: 100vh;
background:#000;
opacity: .9;
}
.titleSty{
padding: 16px 15px;
font-size: 24px;
color:#fff;
}
$(function(){
$('#username').html(localStorage.username);
$('#loginOut').click(function(){
localStorage.removeItem('token')
localStorage.removeItem('username')
setTimeout(function(){
location.href="./login.html"
},300)
})
$('#shopList').click(function(){
$('#frameID').attr('src','./shopPage.html')
$('#pageTitle').html('商品列表')
$(this).addClass('active').siblings().removeClass('active')
})
$('#addGoods').click(function(){
$('#frameID').attr('src','./addGoods.html')
$('#pageTitle').html('添加商品')
$(this).addClass('active').siblings().removeClass('active')
})
})
3.订单列表以及查询功能:
# | 订单id | 订单编号 | 是否发货 | 公司名称 | 订单金额 |
---|
init();
function init(val) {
let params = {
pagenum: 1,
pagesize: 20
}
if (val) {
params.query = val
} else {
delete params.query
}
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/orders",
headers: {
Authorization: localStorage.token
},
data: params,
success: function (res) {
let str = '';
let goods = res.data.goods;
for (var i in goods) {
str += `
`
}
$('tbody').html(str)
}
})
}
$('#search').click(function () {
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/orders/" + $('#keywords').val(),
headers: {
Authorization: localStorage.token
},
success: function (res) {
$('tbody').html('');
$('tbody').append(
`
`
)
}
})
})
4.修改订单(根据实际接口功能实现):
function add() {
console.log(1);
$.ajax({
url: "http://timemeetyou.com:8889/api/private/v1/orders/" +
$('#goods_name').val(),
method: 'put',
headers: {
Authorization: localStorage.token
},
data: {
order_number: $('#goods_cat').val(),
is_send: $('#goods_price').val(),
order_price: $('#goods_weight').val(),
},
success: function (res) {
console.log(res)
alert('更新成功')
}
})
}