jq的ajax请求
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ajax</title>
</head>
<body>
<h1>ajax请求</h1>
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<button type="button" class="btn">发送请求</button>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
$('.btn').click(function () {
username = $('#username').val();
password = $('#password').val();
// 有输入框没内容，直接结束事件，不往后台发送请求
if (!(username && password)) {
return
}
// 代码如何往后台发送请求
$.ajax({
// 请求的路径 - 接口
url: 'http://localhost:8801/data',
// 请求的方式 - get|post
type: 'get',
// 请求的数据
data: {
username,
password,
},
// 请求成功的响应
success: function (response) {
console.log(response, typeof response);
obj = JSON.parse(response);
console.log(obj, typeof obj);
let name = obj.data.name;
$('h1').text(name)
},
// 请求失败的响应
error: function (error) {
console.log(error);
}
})
})
</script>
</html>
bs引入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bs的引入</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
</head>
<body>
<h1 class="bg-success">bs就是按照其规定的页面结构搭建标签</h1>
<h2>给这些标签设置预定义好的类名，引入bs.css就可以直接获得提前写好的样式</h2>
<h2>给这些标签设置预定义好的自定义属性，引入bs.js就可以直接获得提前写好的逻辑</h2>
<h2>bs框架的js文件中采用的是jq语法，所以要使用bs.js要提前导入jq</h2>
<h3>导入bs：本地导入 | CDN导入</h3>
<div class="h1 bg-primary text-center">给.h1类名我就是h1样式</div>
<div class="btn btn-primary btn-block">按钮</div>
</body>
</html>
bs运用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>bs运用</title>
<link rel="stylesheet" href="bs/css/bootstrap.css">
<style>
ul {
list-style: none;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
line-height: 60px;
}
.o-mn li {
25%;
}
.o-i {
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="bg-primary text-center">bs运用</h1>
<h2>
<i class="o-i glyphicon glyphicon-heart"></i>
<div class="glyphicon glyphicon-envelope"></div>
</h2>
<div class="box">
<nav class="navbar navbar-default">
<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-1" 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="https://www.baidu.com">稻草人</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Owen</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">个人中心 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">信息</a></li>
<li><a href="#">修改密码</a></li>
<li><a href="#">详情页面</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">退出登录</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" action="https://www.baidu.com/s">
<div class="form-group">
<input name="wd" type="text" class="form-control" placeholder="搜索内容">
</div>
<button type="submit" class="btn btn-default">搜索</button>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<div class="box">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕这是巨幕</p>
<p class="clearfix bg-primary"><a class="btn btn-primary btn-lg pull-right" href="#" role="button">Learn
more</a></p>
</div>
</div>
<ul class="o-mn clearfix">
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海报</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海报</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海报</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
<li class="pull-left">
<div class="thumbnail">
<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2633316981,1109819462&fm=26&gp=0.jpg" alt="">
<div class="caption">
<h3>美女</h3>
<p>美女海报</p>
<p>
<a href="javascript:viod(0)" class="btn btn-primary" role="button">购买</a>
<a class="btn btn-danger" href="javascript:viod(0)" role="button">打包</a>
</p>
</div>
</div>
</li>
</ul>
<!--栅格化系统: 将所有标签等分为12等分-->
<style>
/*.box {*/
/* 1000px;*/
/*}*/
.b1, .b2, .b3, .b4 {
height: 100px;
}
.b1 {
background-color: orangered;
}
.b2 {
background-color: red;
}
.b3 {
background-color: tomato;
}
.b4 {
background-color: pink;
}
</style>
<div class="box">
<div class="b1 col-md-3 col-sm-6"></div>
<div class="b2 col-md-6 col-md-offset-3 col-sm-6"></div>
<div class="b3 col-xs-1"></div>
<div class="b4 col-xs-11"></div>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script src="bs/js/bootstrap.js"></script>
</html>