1.跨域：
<body>
<!--
Access to XMLHttpRequest at 'http://localhost:3000/' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
-->
<!-- 看到报错信息 有Access to XMLHttpRequest by CORS policy: No 'Access-Control-Allow-Origin' 这些关键字 就代表是跨域错误 -->
<!-- 产生跨域的原因
由浏览器的同源策略造成的
同域名，同端口，同协议（http 和 https）
-->
<!-- 跨域解决方案1
CORS跨域资源共享
服务端：header("Access-Control-Allow-Origin:*");
“*”表示所有的域都可以接受
-->
<!--
跨域解决方案2
jsonp
动态创建script标签，使用jQuery的jsonp请求
优点
兼容性强&不受同源策略的限制
缺点
只能用get方法，不能使用post方法
-->
<script src="./jquery-1.12.4.js"></script>
<script>
/* 使用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)
// }
// })
</script>
</body>
2.bootstrap中jq ajax实战：
1、登录界面：
<body>
<h1 style="text-align:center;margin:30px 0;">kw47的小卖铺</h1>
<form class="form-horizontal" style="margin:0 auto;width: 50%;">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="user" placeholder="请输入用户名">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pwd" placeholder="请输入的密码">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> Remember me
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" id="loginBtn">Sign in</button>
</div>
</div>
</form>
<script src="./jquery-1.12.4.js"></script>
<script>
$('#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)
})
})
</script>
</body>
2、主页：
<link rel="stylesheet" href="./bootstrap.min.css">
<style>
*{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;
}
</style>
</head>
<body>
<div class="main">
<aside>
<ul class="nav nav-pills nav-stacked nav-pills-stacked-example">
<li role="presentation" ><a href="#" class="titleSty">小卖铺</a></li>
<li role="presentation" id="shopList"><a href="#">订单列表</a></li>
<li role="presentation" id="addGoods"><a href="#">修改订单</a></li>
</ul>
</aside>
<section style="width: calc(100vw - 200px);">
<nav class="navbar navbar-inverse" style="margin-bottom: 0px;">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-9" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">kw47的小卖铺</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
<ul class="nav navbar-nav" style="float:right;">
<li ><a href="#" id="username">用户A</a></li>
<li class="active"><a href="#" id="loginOut">退出登录</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active" id="pageTitle">订单列表</li>
</ol>
<!-- 使用iframe来嵌套html页面 -->
<iframe src="./shopPage.html" id="frameID" frameborder="0" width="100%" style="height: calc(100% - 108px);"></iframe>
</section>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
$(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')
})
})
</script>
</body>
3.订单列表以及查询功能：
<body>
<form class="form-inline" style="margin:0 0 10px 10px;">
<div class="form-group">
<label for="keywords">搜索订单id</label>
<input type="text" class="form-control" id="keywords" placeholder="输入关键字">
</div>
<button type="button" class="btn btn-info" id="search">搜索</button>
</form>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>订单id</th>
<th>订单编号</th>
<th>是否发货</th>
<th>公司名称</th>
<th>订单金额</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<script src="./jquery-1.12.4.js"></script>
<script>
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 += `
<tr>
<th scope="row">${parseInt(i)+1}</th>
<td>${goods[i].order_id}</td>
<td>${goods[i].order_number}</td>
<td>${goods[i].is_send}</td>
<td>${goods[i].order_fapiao_company}</td>
<td>${goods[i].order_price}</td>
</tr>
`
}
$('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(
`
<tr>
<td>1</td>
<td>${res.data.order_id}</td>
<td>${res.data.order_number}</td>
<td>${res.data.is_send}</td>
<td>${res.data.order_fapiao_company}</td>
<td>${res.data.order_price}</td>
</tr>
`
)
}
})
})
</script>
</body>
4.修改订单(根据实际接口功能实现)：
<body>
<form style="padding: 10px;">
<div class="form-group">
<label for="goods_name">订单id</label>
<input type="text" class="form-control" id="goods_name" placeholder="输入订单id">
</div>
<div class="form-group">
<label for="goods_cat">订单编号</label>
<input type="text" class="form-control" id="goods_cat" placeholder="输入订单编号">
</div>
<div class="form-group">
<label for="goods_price">是否发货</label>
<input type="text" class="form-control" id="goods_price" placeholder="输入是否发货">
</div>
<div class="form-group">
<label for="goods_weight">订单金额</label>
<input type="text" class="form-control" id="goods_weight" placeholder="输入订单金额">
</div>
<button type="button" class="btn btn-primary" onclick="add()">确认修改</button>
</form>
<script src="./jquery-1.12.4.js"></script>
<script>
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('更新成功')
}
})
}
</script>
</body>
