jquery中的Ajax
摘要：
封裝好了的函式
load：
作用：非同步載入頁頭和頁尾；
建立header.php與footer.php公共部分分別放入php中，在main的html中需要加入js程式碼：
//js.提前下載好jquery
<script src="js/query.js"...
封裝好了的函式
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>
jquery中的ajax練習（京東酒類）
2018-11-14_145623.png
2018-11-14_150032.png
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>