溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
昨天一個同學問我如何用ajax獲取后臺php文件傳輸過來的多個商品的信息,其實php后臺返回的一個數組,我們可以通過json_encode講這個數組變成json字符串,然后在前臺頁面的js中我們通過eva()在將其轉換成json對象,然后就可以使用'.'進行調用了.但是多個物品我們如何進行遍歷呢.
下面是自己寫的一個demo:目錄結構為(頁面->index.php,php后端->show.php,還有三張測試圖片)
頁面:index.php(js也在里面)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="source/jquery.js"></script>
<style>
.mypic{
width:66px;
height:200px;
overflow:hidden;
float: left;
}
p{
height:15px;
}
</style>
</head>
<body>
<button class='mybtn'>點擊</button>
<div id="info">
<div class='mypic'> <!--這里是展現的樣式-->
<img src="">
<p>名稱:</p>
<p>價格:</p>
</div>
</div>
</body>
<script>
$('.mybtn').click(function(){
var str='';
$.post('show.php',function(data){ //ajax開始,只是測試,所以沒有傳值
var obj=eval('('+data+')'); //返回json對象
for(var i in obj) //利用for...in...循環便利對象
{
str+="<div class='mypic'>";
str+="<img src='"+obj[i].pic+"'><p style='color:#0f0'>"+obj[i].name+" </p><p style='color:#f00'>$"+obj[i].price+"</p>";
str+="</div>";
}
$("#info").html(str); //將str注入到div內部
});
});
</script>
</html>
show.php
//作為測試 模擬了一個通常在數據庫里面取出的數據的形式(二維數組)
<?php
$arr=array(
array('pic'=>'07.gif','name'=>'觀察','price'=>'50'),
array('pic'=>'08.gif','name'=>'瞪眼','price'=>'14'),
array('pic'=>'09.gif','name'=>'吆喝','price'=>'32'),
);
echo json_encode($arr);
?>
測試結果:
開始的時候:
點擊按鈕之后:
這就是這個demo的流程.
注意:在index.php的頁面的js中, obj[i].name 這里的寫法是固定的,第一層是for...in...循環的固定的寫法,第二層是返回的信息的json對象的調用方法,這里不能寫錯.
當然方法也不止這一種,我們也可以在show.php的頁面中,將要返回的的html元素直接組合成字符串,然后echo出來,兩種方法都可以.
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
