ajax實現簡單的商品展現

時間 2020-08-28

標籤 ajax 實現簡單商品展現欄目 Ajax 简体版

原文原文鏈接

昨天一個同窗問我如何用ajax獲取後臺php文件傳輸過來的多個商品的信息,其實php後臺返回的一個數組,咱們能夠經過json_encode講這個數組變成json字符串,而後在前臺頁面的js中咱們經過eva()在將其轉換成json對象,而後就能夠使用'.'進行調用了.可是多個物品咱們如何進行遍歷呢.
php

下面是本身寫的一個demo:目錄結構爲(頁面->index.php,php後端->show.php,還有三張測試圖片)html

頁面:index.php(js也在裏面)
jquery

<!DOCTYPE html>ajax

<html lang="en">數據庫

<head>json

<meta charset="UTF-8">後端

<title>Document</title>數組

<script src="source/jquery.js"></script> ide

<style>post

.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出來,兩種方法均可以.

相關文章

相關標籤/搜索

RXJava的簡單實現

最簡單的實現

紅包項目實戰

網站品質教程

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<