jquery中的Ajax
封装好了的函数
load：
作用：异步加载页头和页脚；
创建header.php与footer.php公共部分分别放入php中，在main的html中需要加入js代码：
//js.提前下载好jquery
<script src="js/query.js"><script>
<script>
$('选择器').load('header.php);
$('选择器').load('footer.php');
$.ajax({
type:"GET",//get post 请求方式
url:"*****.php",//路径
data:{"uname",uname},
success:function(list,mag,xhr){//list服务器返回的结果，list代表函数
//成功是存放函数
}
error：funciton(){}//失败是存放的函数，基本不用此函数
})
</script>
练习
1.创建数据库，数据库名为wine，表明为jiu；
#1.设置编码方式
SET NAMES UTF8;
#2.删除一个数据库，如果存在的话
DROP DATABASE IF EXISTS wine;
#3.创建数据库
CREATE DATABASE wine CHARSET=UTF8;
#4.进入数据库
USE wine;
#5.创建表
CREATE TABLE jiu(
jid INT PRIMARY KEY AUTO_INCREMENT,
pic VARCHAR(32),
tit VARCHAR(128),
price FLOAT(6,2)
);
#6.插入数据
INSERT INTO jiu VALUES(NULL,'img/1.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/2.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/3.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/4.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/5.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/6.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/7.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/8.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/9.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
INSERT INTO jiu VALUES(NULL,'img/10.jpg','麦卡伦（MACALLAN）洋酒 12年蓝钻单一麦芽苏格兰威士忌700ml','399');
#7.查看数据表中的内容
SELECT * FROM jiu;
2.创建wine.php，
<?php
//响应消息头部
header('Content-Type:application/json');
$conn=mysqli_connect('127.0.0.1','root','','wine',3306);
$sql="SET NAMES UTF8";
mysqli_query($conn,$sql);
$sql="SELECT * FROM jiu";
$result=mysqli_query($conn,$sql);
$all=mysqli_fetch_all($result,MYSQLI_ASSOC);
// var_dump($all);
//把输出的结果按照一个json格式输出
$str=json_encode($all);
echo $str;
3.编写wine.html
//样式仅仅为实现效果，仅供参考
<style type="text/css">
*{
margin:0;
padding:0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
li{
list-style: none;
}
.box{
width:1000px;
overflow: hidden;
margin:50px auto;
}
.box>li{
width:20%;
text-align: center;
float:left;
border-right: 1px solid #ddd;
border-bottom: 1px solid #ddd;
}
</style>
<body>
<ul class='box'>
</ul>
<script src='js/jquery.js'></script>
<script type="text/javascript">
$.ajax({
type:"GET",
url:"wine.php",
success:function(list,msg,xhr){
var html='';
for(var i=0;i<list.length;i++){//
var c=list[i];//{}
console.log(c);
html+=`
<li>
<img src="${c.pic}">
<p>${c.tit}</p>
<p>￥${c.price}</p>
</li>
`;
}
$('.box').html(html);
}
})
</script>
</body>
网友评论